web-dev-qa-db-ja.com

WordPress、jQuery UI CSSファイル？

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 Themeがプリインストールされていますか？...その場合、プラグインにスタイルをエンキューするにはどうすればよいですか？

jquerywordpressjquery-uiwordpress-pluginjquery-ui-css-framework
27
Merianos Nikos

Jquery-uiテーマのWordPress内で利用可能なスタイリングを見つけることに問題があるようです。

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

私も同じ問題を抱えていましたが、2つのオプションが見つかりました。 CSSフォルダーに保存してそこから読み込むか、[〜＃〜] url [〜＃〜]（Google API）で読み込みます。 JQuery UIについては、GoogleのCDAに依存することにし、「テーマローラー」を利用する方法を追加しました。その量のcssコードを保存することは、最初は無駄ではないように思われます。また、あまりにもひどいWordPressは、jquery-uiスクリプトで行うようなスタイリングサポートを提供しません。

ただし、WPは、_$wp_scripts->registered['jquery-ui-core']->ver_を使用してCSSを最新の状態に保つスクリプトを提供します。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);
_
54
EkoJR

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

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

5
Tim S.

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

したがって、スライダーコンポーネントに対応するCSSクラスのみを追加できます。ここに私が使用したクラスがあります（注：これらはi-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;
}

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

 #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
3
Luc Lérot

WordPress以降、これまでに発生した変更の更新。最近のWordPressパッケージにはボックスにCSSが付属しています。

その後、_wp-includes\css_で検索し、wp_enqueue_style()を使用してエンキューできます。

OPのユースケースでは、wp_enqueue_style( 'wp-jquery-ui-dialog' );だけが必要だったと思います。

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

1
Arun Basil Lal

私はこの問題に直面して投稿を見つけましたが、クラス「subsubsub」をulタグに挿入する方法を見つけました。リストは悪くありません。コードは次のとおりです。

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

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

0
Hix.botay

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

0
Paul