32

WordPress プラグインを作成しようとしていますが、設定ページの 1 つに jQuery UI タブを追加したいと考えています。

スクリプト コード セットは既にあります。

wp_enqueue_script('jquery');                    // Enque jQuery
wp_enqueue_script('jquery-ui-core');            // Enque jQuery UI Core
wp_enqueue_script('jquery-ui-tabs');            // Enque jQuery UI Tabs

...そして、HTML と JavaScript も作成しました。ここまでは大丈夫です。

質問は：

WordPress プラットフォームには、上記でエンキューしたスクリプトのように、いくつかのスクリプトが事前にインストールされています。私のスクリプトはタブで正常に動作しますが、スタイルが設定されていません! 私が質問しようとしているのは、WordPress プラットフォームには jQuery UI テーマがプリインストールされていますか? ...もしそうなら、どうすればスタイルをプラグインにエンキューできますか?

4

6 に答える 6

70

WordPress内でjquery-uiテーマに使用できるスタイルを見つけるのに問題があるようです。

あなたの質問に答えるために。いいえ、WordPressにはプラットフォーム自体で利用できる便利なスタイルはありません。利用可能なcssは\wp-includes\ jquery-ui-dialog.cssのみであり、それだけではあまり役に立ちません。

私も同じ問題を抱えていて、2つの選択肢が見つかりました。CSSフォルダーに保存してそこからロードするか、URL（Google API）を介してロードします。JQuery UIについては、GoogleのCDAに依存することにし、「テーマローラー」を利用する方法を追加しました。その量のcssコードを保存することは、そもそも不必要であるように思われ、そのあまりにも悪いWordPressは、jquery-uiスクリプトのようにスタイリングサポートを提供しません。

ただし、WPは、CSSをで最新の状態に保つスクリプトを提供します$wp_scripts->registered['jquery-ui-core']->ver。wp_scripts();ORでアクセスできますglobal $wp_scripts;。

静的テーマ

$wp_scripts = wp_scripts();
wp_enqueue_style('plugin_name-admin-ui-css',
                'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

または動的テーマ

$wp_scripts = wp_scripts();
wp_enqueue_style('plugin_name-admin-ui-css',
                'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/' . $pluginOptions['jquery_ui_theme'] . '/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

そしてそれをローカルに保存する例

wp_enqueue_style('plugin_name-admin-ui-css',
                plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css',
                false,
                PLUGIN_VERSION,
                false);
于 2012-08-03T04:50:40.117 に答える
5

UIテーマがプリインストールされているとは思いません。ヘッダーにスクリプトを追加する必要があります。

この関数を探していると思います。ヘッダーにスクリプトを追加できます。テーマの css をプラグイン フォルダーのどこかに置いて、それを含めるだけです。

于 2012-01-13T11:20:31.290 に答える
3

EkoJr の回答にさらに詳細を追加するには、Jquery UI v1.11.4 の時点で、JQuery UI CSS スタイルシート全体を追加すると、デフォルトの Wordpress テーマ スタイルが壊れる可能性があります。

したがって、スライダー コンポーネントに対応する CSS クラスのみを追加できます。私が使用したクラスは次のとおりです（注：これらはui-darkness テーマ用に構築されています）：

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
    font-weight: bold;
    color: #eeeeee;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 6px;
}
.ui-widget-content {
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #000000 url("img/jquery-ui/ui-bg_inset-soft_25_000000_1x100.png") 50% bottom repeat-x;
    color: #ffffff;
}
.ui-widget {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-slider-horizontal {
    height: .8em;
}
.ui-slider {
    position: relative;
    text-align: left;
}

また、これらのクラスにコンテナ ID のプレフィックスを付けることができることに注意してください。たとえば、スライダーの ID が「slider」の場合、次を使用します。

 #slider .ui-state-default,
 #slider .ui-widget-content .ui-state-default,
 #slider .ui-widget-header .ui-state-default {
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
    font-weight: bold;
    color: #eeeeee;
}
....ETC
于 2016-05-31T18:37:10.607 に答える
0

私はちょうどこの問題に直面し、投稿を見つけて、クラス「subsubsub」をulタグに挿入する方法を見つけました。リストは悪くないでしょう。コードは次のようになります。

<div id="tabs">
<ul class="subsubsub"><li><a href="#tab1"></a></li>
<div id="tab1"></div>
</div>

それが誰かを助けることを願っています。

于 2016-07-20T09:07:47.117 に答える
0

wp_enqueue_style()との呼び出しを正しく使用し、wp_enqueue_script()他の作成者もそれらを正しく使用していると仮定すると、WordPress は競合を処理します。

wp_headただし、プラグインまたはテーマの作成者がまたはアクションを使用してスタイルまたはスクリプトをページの先頭に直接出力する場合、admin_head競合を回避するためにできることはあまりありません。

参照:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

于 2012-07-30T19:14:44.047 に答える