プラグインCSSをオーバーライドする最良の方法は？

36

現在、私はプラグインのスタイルをオーバーライドするためにCSSの特異性を使用しています。プラグインを編集する場合は、更新時に頭痛が少なくなるので、これが好きです。

スタイルシートがプラグインの後に読み込まれるといいので、それだけではなく、具体的にする必要があります。これにより、スタイルシートがよりきれいになります。

plugins css

— マイルドファズ
ソース

1

CSSの特異性について教えてくれたことに賛成します。質問の前に聞いたことはありませんでした。

— luke_mclachlan

21

あなたが提案するように、最もエレガントなアプローチは、CSSオーバーライドがプラグインによって挿入されたCSSの後にロードされるときです。これは非常に簡単に実現できます。スタイルシートを参照する前にheader.php呼び出しを確認する必要がありますwp_head()。

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

— ティム・コールター
ソース

子テーマを使用している場合はどうなりますか？親テーマのheader.phpをオーバーライドしたくありません。

— ジュール

19

プラグインがCSSを処理する方法はいくつかあります。

ベストケース：プラグインはCSSをキューに入れ、それを無効にするオプションを提供します（無効にし、CSSコードをスタイルシートにコピーして満足します）。
良い例：プラグインはスタイルをキューする関数をフックします（関数のフックを解除し、必要に応じて独自のmodをフックします）。
通常の場合：プラグインはCSSを直接キューに入れます。スクリプトをデキューする方法をご覧ください。（スタイルにも適用されます）。ショートバージョン-将来のWPリリースにはデキュー機能があります。wp_deregister_*
悪いケース：プラグインは他の多くのものの間でCSSをエコーします。ケースバイケース...

全体的には、個別のスタイルシートを無効にして独自にスタイルシートを組み込み、問題を最小限に抑えてパフォーマンスを向上させる（フェッチするファイルが少なくなる）方が良いと思います。

— ラスト
ソース

それがどれであるかをどのようにして知ることができますか？

— イアンエディントン

1

主にコードを見てください。:)

— Rarst

2

別の非常にエレガントな方法は、CSSの特異性を使用することです。

したがって、プラグインのcssに次のように記載されている場合：

div.product div.images img {
  ......
}

cssで定義します：

body div.product div.images img {
  ......
}

同様の質問については、Michael Raderの回答も参照してください。

— アンドレアス
ソース

はい、ありがとうございます。これは私にとって受け入れられる答えでしょう。一般的なstyle.cssを使用するだけで、特異性は輝きのように機能します！

— ルカレゲリン

1

「not willing」プラグインCSSのコピーをテーマフォルダーに保存し、追加してテーマcssにインポートします

@import url('name-of-the-plugin-css.css');

それに（もちろん、.cssの名前を、注入するものに置き換えます）。次に、テーマフォルダーのcssコピーを変更し、他のファイルと同様にサーバーに保存します。ああ、はい、時々、「！important」を割り当てることによって変更されたIDまたはクラスを「釘付け」する必要があるかもしれません。

これが最先端かどうかはわかりませんが、害はなく、うまく機能します。

— スベンノック
ソース

0

既に特異性と！importantを使用していたプラグインのcssをオーバーライドするために、クラスをオーバーライドするためにidを使用しました。これは私のコードを少しきれいにしました。もちろん、クラスだけでなく要素にもidが割り当てられている場合にのみ機能するという点で、これも完璧なソリューションではありません。

理論上、属性セレクターを使用することもできます。しかし、私はまだその理論を検証していません。

— ショーン・H・スミス
ソース

0

私はカスタムcssに！importantを使用することになり、それが問題を抱えていたプラグインのスタイリングをオーバーライドしました。プラグインの開発者はプラグインcss全体で！importantを使用していたため、！importantなしでは上書きできませんでした。

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

— ランディD
ソース

-1

既に特異性と！importantを使用していたプラグインのcssをオーバーライドするために、クラスをオーバーライドするためにidを使用しました。これは私のコードを少しきれいにしました。もちろん、クラスだけでなく要素にもidが割り当てられている場合にのみ機能するという点で、これも完璧なソリューションではありません。

理論上、属性セレクターを使用することもできます。しかし、私はまだその理論を検証していません。

— dsdsd
ソース