キャッシュを消せばどうにかなる!WordPressの CSS 変更・追加が反映されない時の対処法


WordPressの CSS 変更・追加が反映されない・・・!?

どうも、Linです。未定、です。

 

WordPress サイトのデザインをいじりたい時は CSS を編集しますよね?

WordPress の CSS は style.css というファイルに記述されていて、このファイルを編集するとサイトのデザインを変更、もしくはデザインを追加することができます。

しかしながら、そんな WordPress の CSS を変更しても、

反映されない・読み込まれない・効かない

といった事件が起こることがあります。

 

実際、この悲劇は僕の身にも起きたことがありました。

僕がハマったのは、

ウェブブラウザのキャッシュ機能が原因で反映されなかった

ということです。

ほとんどのウェブブラウザーには「キャッシュ」と呼ばれる機能が付いていて、こちらは

一度読み込んだサイトの情報をブラウザ内に保存しておく機能のこと

です。これによって同じサイトを閲覧する時に0から情報を取り寄せなくていいので表示速度が速くなるなどのメリットがあるのですね。

 

がしかし、です。

そのキャッシュで はCSS の情報も記憶されているため、変更前の CSS が読み込まれている場合は、いくらCSSを変更してもキャッシュに保存された変更前の CSS のデータが読み込まれてしまうといった現象が起きるのです。

 

 

キャッシュが原因でWordPress の CSS 変更が反映されない時の対処法

このキャッシュが原因で起こる WordPress のCSSの変更が反映されない、という事態は、次の3つの解決策があると思います。

  1. キャッシュを消す
  2. キャッシュが残らないショボイブラウザを使う
  3. シークレットウィンドウを使う

僕自身、二つ目の解決策でこれまでやっていて、全く知られていないしょぼいブラウザでそのサイトを CSS の変更後に表示することで、 CSS の変更を反映させていました。

しかしながら、そのしょぼいブラウザもいつのまにかバージョンアップしていて、キャッシュで CSS の情報を一時保存するようになっていたのです。

 

そのバージョンアップに気付かず何度もCSSを更新しても反映されないという沼にはまってことになりました。

3つの「シークレットウィンドウ立ち上げてページを開く」というのもいいんですが、CSSの更新ごとにウィンドウを立ち上げなければならないのが面倒ですね。

ゆえに、オススメは一つ目の

ブラウザのキャッシュを消す

という方法です。

 

 

ブラウザのキャッシュを消す方法(Chrome編)

ということで、 WordPress の CSS が反映されないという事態に陥っている方はまずはブラウザのキャッシュを消してみましょう。

今回はChromeを例として解説していきますね。

 

Step1. ディベロッパーツールを開く

まずは Chrome のデベロッパーツールを開きましょう。

Chrome の右上のメニューから「その他のツール>ディベロッパーツール」と進んでやると開くことができますよね。

wordpress css 反映されない

Macをお使いの方はショートカットキーの「command + option +I」と打ち込んであげると一瞬でデベロッパーツールを立ち上げることができますよ。

 

Step2. 「更新マーク」で右クリック

ディベロッパーツールを開いたら Chrome の左側にあります「更新マーク」の上で右クリックをしてみましょう。

wordpress css 反映されない

 

Step3. キャッシュを消去する

いくつか候補が選択肢が出てくると思うんですが、今回は

キャッシュの消去とハード再読み込み

というものを選択します。

wordpress css 反映されない

すると、ウェブブラウザにキャッシュで一時保存されていた CSS データがリセットされるでしょう。

WordPress style.css を編集して CSS を変更した後にこの作業を行えば、WordPress の CSS の変更が反映されると思います。

 

 

WordPress の CSS が反映されない時はキャッシュを消してみよう

と、以上が WordPress の CSS が反映されない時の対処方法でした。

僕自身、このキャッシュを消す方法に助けられて、なんとか CSS の変更が反映されて望み通りにサイトのデザインを変更することができました。

このキャッシュ消去の方法ですっきり解決することができまして気分は爽快。

腸でくすぶっていた便が一気に出たような清々しさを感じています。

もしかしたら僕と同じようにキャッシュが原因で CSS の変更が反映されていない可能性もありますので、とりあえずブラウザのキャッシュを消してみましょう。

 

それでは!

Lin

 

【参考記事】


コメントはこちらからお願いします!



もう1本読んでみる