web-dev-qa-db-ja.com

プラグインCSSを上書きするための最良の方法は?

現在、私はCSSの特殊性を使ってプラグインスタイルを上書きしています。アップデートしたときの頭痛の種が少なくなるので、プラグインの編集にはこれをお勧めします。

私のスタイルシートがプラグインの後にロードされているのであればいいでしょう。これは私のスタイルシートをずっときれいにするでしょう。

36
Mild Fuzz

あなたがお勧めするように、最も洗練されたアプローチはあなたのCSSオーバーライドがプラグインによって注入されたCSSの後にロードされるときです。これは達成するのが非常に簡単です - あなたはそれがあなたのスタイルシートを参照する前にあなたのheader.phpwp_head()を呼び出すことを確認する必要があるだけです:

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

    <?php wp_head(); ?>

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

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

  • ベストケース:プラグインはCSSをキューに入れ、それを無効にする(CSSコードをあなたのスタイルシートにコピーして幸せになる)無効にするオプションを提供します。
  • 良い例:プラグインはスタイルをキューに入れる関数をフックします(フックされていない関数、必要ならmodを使ってフックします)。
  • 通常の場合:プラグインはCSSを直接​​キューに入れます。 スクリプトをデキューする方法 (スタイルにも適用)ショートバージョン - 将来的にはデキュー機能があるでしょうWPリリース、今のところwp_deregister_*で回避することができます
  • 悪い場合:プラグインはCSSを他のものと同じようにエコーします。ケースバイケース...

私の考えでは全体として、別々のスタイルシートを無効にして独自のスタイルシートに組み込んで問題を最小限に抑え、パフォーマンスを向上させる(取得するファイル数を減らす)ことがより簡単になりました。

19
Rarst

私は「したくない」プラグインCSSのコピーをテーマフォルダに保存し、次のように追加してテーマCSSにインポートします。

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

それに(もちろん、私が注入しているものに.cssの名前を置き換えて)。それから私は他のファイルのためにそうするように私はthemeフォルダーのcssコピーを修正してサーバーにそれを保存します。ああ、そう、時にはそれはそれらに "!important"を割り当てることによって変更されたIDやクラスを "ネイル"することが必要かもしれません。

これが最先端技術であるかどうかはわかりませんが、害はなく、問題なく機能します。

1
Sven Knoch

もう一つの非常に優雅な方法はCSSの特定性を使うことです。

プラグインのCSSが言うならば:

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

あなたのCSSで定義します。

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

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

1
Andreas

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

理論的には属性セレクタを使うこともできます。しかし、その理論をまだ検証していません。

0
Sean H. Smith

私は自分のカスタムCSSにとって重要な!を使用することになり、それは私が問題を抱えていたプラグインのためのスタイルを上書きします。プラグインの開発者はプラグインのCSSを通して!importantを使用していたので、これがなければ上書きできませんでした!!.

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