cache-problemWordPressでスタイルシート(cssファイル)の内容を変更しても、その変更内容が表示に反映されないときがあります。特にキャッシュ系のプラグインやCloud FlareなどのCDNサービスを使っている人に起こりやすいのですが、最近、変更してずいぶん時間が経っているのに変更内容が一向にブログの表示に反映されないことが何度かありました。その時の解決法も含めて、考えうる原因と解決法についてまとめたいと思います。

sponsored link

原因その1: 変更したcssの記述が正しくない

あたりまえですが、cssが正しく記述されなければ表示もちゃんとされませんよね。単純なことですけど、コロン(:)やセミコロン(;)が抜けていないか、{}で閉じられているか、など再チェックしましょう。

cssの変更の際には、ブラウザの開発ツールを使うとミスが少なくなり、編集スピードもグッとあがります。

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

 

原因その2: ブラウザのキャッシュが効いている

ブラウザのキャッシュにより、以前の状態が表示されていることがあります。ページを2~3度、再読み込み(F5キー押下)すると表示が新しくなることがあるので、試してみてください。でも、Wordpress側で、ページの読み込み速度を高速化するためのキャッシュプラグインを使用している方は、これだけだとうまくいかないことが多いです。その場合は次!

 

原因その3: Wordpressのキャッシュ系プラグインのせい

私はW3 Total Cacheプラグインを使用して、ページキャッシュ、ブラウザキャッシュなどの設定をしています。こういうキャッシュ系のプラグインを使っていると、スグに変更が反映されないときが多いです。W3 Total Cacheの場合、Purge from cacheやEmpty all cachesといったメニューがあるので、それを実行してキャッシュをいったん削除します。その他のプラグインも似たような機能がついていると思うので、Wordpressのダッシュボードから確認してみてください。

 

原因その4: Cloud Flareのキャッシュのせい

W3 Total Cacheと併せて利用するとかなり高速化の効果が高い、CDNサービスCloud Flareですが、少し前に仕様が変わったのか、以前のやり方では、変更前のcssの状態がかなり長く続いてしまう、ということに気づきました。。

Cloud Flareについてはこちらの記事も見てみてください。

ブログ表示速度をアップさせるために使っているプラグインとCloudFlare

 

以前は、ログインして、一時的にDevelopment Mode(開発モード)に設定しておけば、cssやjavascriptなどをキャッシュしないで(CDN経由にしないで)表示してくれ、編集がすべて終わった後に、Development modeを終了しておけば、その編集内容が引き続き表示に反映されていました。

が、最近は、Development modeを終了すると、編集内容がすべてなかったかのように、以前の表示に戻ってしまう…という事態が何度か発生。「一日経てば表示が更新されるだろう」と思って放っておいたら、ナント一週間たっても更新されないままでした!

焦って、CSSが書き戻されていないかなどチェックしなおしたりしたのですが、最終的に分かったのは、これです。

Cloud FlareのCacheメニューからキャッシュをクリアーしないと、変更が反映されない。

でした。。

 

いや~、意外にハマってしまった。。以下、キャプチャとともに解決法を載せたのでCloud Flareをお使いの方はぜひ一度確認してみてください!

 

CSSの編集をする際には、Overview のところでStatusをDevelopment modeに変更します。

Cloud flare

 

Development Modeが有効になっているときは、cssの変更がスグに表時に反映されるはずです。(されない場合は、キャッシュプラグインの方のキャッシュも削除)

 

重要なのは、CSSの編集を終えて、Development Modeを無効化するとき。まず、Cachingのメニューに移って、Purge everythingをクリックします。こうすることで、以前Cloud Flareがキャッシュしていたファイルはクリアされ、変更後の状態を新たにキャッシュしてくれます。
Cloud flare

 

最後にDevelopment Modeを無効化して完了。

Cloud flare