WordPress、jQuery UI CSSファイル？

StackOverflow https://stackoverflow.com/questions/8849684

質問

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プラットフォームには、上記のEnqueueがあるように、すでに事前にインストールされたスクリプトが付属しています。私のスクリプトはタブで正常に実行されますが、スタイルはありません！それで、私が尋ねようとしていること、WordPressプラットフォームにはjQuery UIテーマが事前にインストールされていますか？ ...もしそうなら、どのようにしてスタイルをプラグインに入れることができますか？

役に立ちましたか？

解決

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. 。でアクセスできます wp_scripts(); また 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);

他のヒント

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

私はあなたが探していると思います この機能. 。ヘッダーにスクリプトを追加できます。プラグインフォルダーのどこかにテーマのCSSを置いて、それを含めてください。

jQuery UI v1.11.4の時点で、ekojrの回答にいくつかの詳細を追加するために、jQuery UI CSS StyleSheet全体を追加すると、デフォルトの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

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

その後、で見つけることができます wp-includes\css および使用するenqueue wp_enqueue_style().

OPのユースケースについては、 wp_enqueue_style( 'wp-jquery-ui-dialog' ); 必要なのはすべてです。

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

使用する場合 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

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top