現在、私はCSSの特殊性を使ってプラグインスタイルを上書きしています。アップデートしたときの頭痛の種が少なくなるので、プラグインの編集にはこれをお勧めします。
私のスタイルシートがプラグインの後にロードされているのであればいいでしょう。これは私のスタイルシートをずっときれいにするでしょう。
あなたがお勧めするように、最も洗練されたアプローチはあなたの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>
プラグインがCSSを処理する方法はいくつかあります。
wp_deregister_*
で回避することができます私の考えでは全体として、別々のスタイルシートを無効にして独自のスタイルシートに組み込んで問題を最小限に抑え、パフォーマンスを向上させる(取得するファイル数を減らす)ことがより簡単になりました。
私は「したくない」プラグインCSSのコピーをテーマフォルダに保存し、次のように追加してテーマCSSにインポートします。
@import url('name-of-the-plugin-css.css');
それに(もちろん、私が注入しているものに.cssの名前を置き換えて)。それから私は他のファイルのためにそうするように私はthemeフォルダーのcssコピーを修正してサーバーにそれを保存します。ああ、そう、時にはそれはそれらに "!important"を割り当てることによって変更されたIDやクラスを "ネイル"することが必要かもしれません。
これが最先端技術であるかどうかはわかりませんが、害はなく、問題なく機能します。
もう一つの非常に優雅な方法はCSSの特定性を使うことです。
プラグインのCSSが言うならば:
div.product div.images img {
......
}
あなたのCSSで定義します。
body div.product div.images img {
......
}
同様の質問については Michael Rader の答えも参照してください。
プラグインのCSSをオーバーライドするために、それはすでに特異性と!importantを使用していました、私はクラスをオーバーライドするためにidを使用しました。これで私のコードは少しきれいになりました。もちろん、idだけでなく要素にもクラスが割り当てられている場合にのみ機能するという点で、これも完璧な解決策ではありません。
理論的には属性セレクタを使うこともできます。しかし、その理論をまだ検証していません。
私は自分のカスタムCSSにとって重要な!を使用することになり、それは私が問題を抱えていたプラグインのためのスタイルを上書きします。プラグインの開発者はプラグインのCSSを通して!importantを使用していたので、これがなければ上書きできませんでした!!.
body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;
}