プラグインのCSSを上書き・カスタマイズする方法【WordPress】
2024年8月9日
かなり初心者向けの書き方になりますが、Wordpress でプラグインが独自に出力する CSS を無効化、上書き、置き換える手っ取り早い方法を書いておきます。
プラグインのCSSを置き換える方法
プラグインが出力する CSS を置き換えるには、CSS のスタイルの優先順位を意識し、より優先順位の高い書き方をするようにします。
多くのケースで使える簡単な方法は、「プラグインが出力する要素を囲う要素」を用意し、その要素から順にセレクタを指定してやる方法です。
これは例えば、プラグインが出力する CSS がこのようなものである場合、
div.plugin {
margin: 1em;
}
Code language: CSS (css)
以下のような CSS を書けるような HTML を書いてやる、ということです。これで div.plugin の margin を 0 に上書きできます。
.mycontent div.plugin {
margin: 0;
}
Code language: CSS (css)
これでも効かない場合は、クラス指定より強力な ID 指定を使う手もあります。
#mycontent div.plugin {
margin: 0;
}
Code language: CSS (css)
ID 指定でもまだ効かない場合は、リンク先の資料を参考に、セレクタ優先順位の点数計算で、より優先順位の高い書き方を模索する形になります。
プラグインのCSSを無効化する方法
プラグインの CSS を上書きでなく無効化したい場合は、初期値を表す "initial" を使います。
例えば、プラグインの CSS が定義している box-shadow を無くしたい場合は、以下のように書きます。
.mycontent div.plugin {
box-shadow: initial;
}
Code language: CSS (css)
商品リンク管理プラグイン「Rinker」の CSS を部分的に修正・カスタマイズするときにも使える方法ですので、参考にしてみてください。
こんな記事も読んでみませんか?
- 【WordPress】ログイン・管理画面のセキュリティを強化するプラグイン「SiteGuard WP Plugin」
- UserAgentによるテンプレート切り替えと公式AMPプラグインを併用する方法【WordPress】
- SassがBOM付きCSSを吐いて先頭のCSS定義が効かなかった件(BOM付きPHPをincludeしつつBOMを削除する方法)
- nginx+W3 Total Cache+gzipでのVaryヘッダー嵌りどころメモ【WordPress・Brotli】
- 【WordPress】AMPリクエスト時だけ特定のテンプレートに切り替える方法
- CSSだけでサイドバーの一部をスティッキーにする(固定・追従)