web-dev-qa-db-ja.com

テーマのデフォルトスタイルは私のプラグインのカスタムCSSを上書きしています

私は自分で作ったウィジェットを作成する小さなプラグインを作成しました。基本的には<ul>要素だけです。残念ながら、デフォルトのウィジェットスタイルはすべて私のカスタムCSSをオーバーライドしており、特定のスタイルに!importantを追加すると、さまざまなサイズと色のバリエーションが原因で、いくつか壊れています。

これを回避する方法はありますか？私が作成した1つのウィジェットに対してスタイルシートを機能させたいだけで、デフォルトからロードされないようにします。

任意のヒント/提案は大歓迎です。

pluginswidgetscss
1
Eddie

私はまず@Wyckの言ったことに同意すると言って始めたいと思います。

テーマのCSSをあなたのプラグインで上書きするのは一般的に悪い考えですが、独自の独自のクラス/ IDをあなたのウィジェットに追加することはうまくいくはずです。

あなたは@ Wyckの勧告はうまくいかなかったと言った。私はおそらくこれが進むべき道であり、あなたがテーマのスタイルを妨げないようにする唯一の道だと思うでしょう。一意のIDまたはクラスを使用してから、そのセレクターをターゲットにする必要があります。私はちょうどあなたのここでの実行が間違っていると思う、それがそれがうまくいかない理由です。

まず、あなたのCSSで!importantを使わないでください。通常これは、スタイルシートの優先順位が正しく設定されていないことを意味します。

第二に、優先順位はあなたがここで問題です。あなたのスタイルはすべてメインのスタイルシートによって上書きされます。なぜなら、あなたのスタイルは最初にロードされ、最後にはロードされないからです。私はあなたが wp_enqueue_style() であなたのスタイルシートを待ち行列に入れそしてそれを wp_enqueue_scripts にフックしたと思います

function my_plugin_style() {
       wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }

add_action( 'wp_enqueue_scripts', 'my_plugin_style' );

add_action( $hook, $function_to_add, $priority, $accepted_args ); を見ると、3番目のパラメータ（$priority）が、あなたがフックを実行しなければならない優先順位を設定していることがわかります。数値が大きいほど、優先順位が低くなります。あなたのケースでは、あなたのスタイルが最後にロードされるようにするために非常に低い優先順位を設定する必要があるでしょう。だからあなたはこのようなことをする必要があります

add_action( 'wp_enqueue_scripts', 'my_plugin_style', 9999 );
1
Pieter Goosen