WordPressのカスタムCSSが反映されない。キャッシュ系(サイト表示高速化)のプラグインを疑え!

ウェブサイト制作ツールWordPress(ワードプレス)でスタイルシートをカスタマイズする場合、「子テーマ」を作るか、直接「Style.css」ファイルをいじる事になります。

しかし、プラグインSimple Custom CSSを使ったり、一部の有料テーマを使ったりする場合は、子テーマやstyle.cssに触れることなく、ダッシュボード上で簡単で安全にスタイルシートをカスタムすることが可能です。

【トラブル】カスタムCSSにタグを入力しても、サイトに反映されない!

ダッシュボード内の「カスタムCSS」欄に記述したタグは、style.cssに書かれたタグより優先されます。例えば、<h2> タグに関するタグが、カスタムCSSとstyle.cssの両方に記述されている場合は、カスタムCSSに書かれたタグが優先されるということです。

今回僕は、カスタムCSS内に記述したタグの一部が反映されない、というトラブルに見舞われました。

具体的には、カスタムCSS欄に記述している「見出しタグ(<h2> など)」は反映されるのに、「引用タグ(blockquote)」だけが反映されず、元のstyle.cssのスタイルシート内の記述が反映されてしまうのです。

タグの記述にミスはないか(スペルミス、閉じタグ忘れなど)をしっかりとチェックし、他の設定部分でおかしな部分がないかをくまなく調べました。さらにブラウザのキャッシュを消去したり、複数のブラウザや端末で確認しても、やはり反映されません。

何度見直しても、原因は一向に突き止められませんでした。

原因は、まさかのプラグイン。サイト表示高速化のためのキャッシュ系が怪しい

似たような事例はないかとGoogle検索してみると、どうやらキャッシュ系プラグインが悪さをする場合があるようです。

そこで、まずは導入済みのプラグインJetpack内の「Photon(画像と写真をスピードアップ)」をオフに。これではなさそうです。

次に、僕が使っているWordPressテーマ用のプラグイン「tagDiv Speed Booster」を停止にしてみました。

ビンゴ! 原因はコレでした。プラグインを停止した途端、カスタムCSS内に記述した「引用タグ(blockquote)」が反映されるようになりました。

スタイルシートに関して、まさかプラグインに原因があるとは思わず、解決までに色々試していたので3時間ほど要してしまいました。とにかく解決して良かったです。

ただ、このキャッシュ系のプラグインを停止したままで良いのか……。GoogleのPageSpeed Insightsでサイトの応答時間を調べてみたところ、停止前と停止後では特に変化はなかったので、まぁ良いのかなと思いつつ気になるところです。