[WordPressテーマ] Cocoonの追加CSSがリアルタイムで反映されない原因はCSS縮小化

国産WordPressテーマでは現在最も利用者が多いのではないかと思われるCocoonですが、そろそろ私も本格的に使ってみたいと思いながらもまだ正式に運用しているサイトは無かったりします。

ですが、今度こそはと数日前からテストを開始したサイトでCocoonをイジりかけた時に

「追加CSSが効いてなくない？」

そういえば以前にもそんな事がありましたね…という事で、その時はそのまま放置してしまいましたが今回はしっかりと原因を追求してみました。

尚、CSSが反映されない！と言ってもよくあるキャッシュ削除してないんじゃね？というお話ではなくカスタマイザーの追加CSSのお話になります。あと、今回は本当に小ネタなので内容的にはあまり期待しないで下さい…え、いつもの事ですか、そうですか。

コンテンツ

追加CSSが効かないってどういう事？

それではカスタマイザーを開いて追加CSSにこんな感じのCSSをコピペしてみます。

.article h2 {
	background: #000;
	color: #fff;
}

普通ならコピペした瞬間にH2見出しの背景色が黒に、文字色が白になるはずです。

ん～んんん…なりませんねぇ…

とか言って実は公開をポチっとして記事を開いてみればCSSが反映される事は確認済みですが、プレビューしながらああでもないこうでもないとイジりたい時にこれでは如何ともし難いわけで。

ダッシュボードからCocoon設定 > 高速化と開いて、その中のCSSを縮小化するにチェックが入っているとカスタマイザーの追加CSSがリアルタイムで反映されなくなるようです。なのでこのチェックを外して変更を保存して下さい。

※この時点でチェックが入っていなかったらお手上げです、お役に立てず申し訳ない。

尚、高速化の設定はCocoon設定のタブの中ではない事に注意して下さい。

それではあらためて先程と同様にCSSをコピペしてみます。

今度はすぐに反映されましたね、よかったよかった。

さすがにこれだけで終わるのもアレなので、この追加CSSについて少しだけ私がわかっている範囲で書いてみますと、この追加CSSに記述した内容はほにゃらら.css 的なファイルではなくWordPressのデータベースに格納されるようです。

そんなわけでCSS縮小化の除外対象として指定する事も出来ないので「Cocoonの追加CSSがリアルタイムで反映されない時の対応」としては、常にCSS縮小化を無効にしておくか追加CSSをイジりたい時だけ無効にするかの二択になるでしょう。

とは言え、今まで自分以外にこの問題を挙げている方を見た事が無いので単なるおま環なのかしらとも思いますが、どなたかのお役に立つ事があれば幸いです。