WordPress

WordPressでcssが反映されないときの対処法

WordPress(ワードプレス)でcssを変更したり、記事を公開しても反映されないときの対処法について調べました。

原因は主に2つあるようですが、2つ目の原因は自分では気づきにくいですね。おじさんもググってはじめてわかりました。

 

症状

まずは症状です。おじさんの場合、このサイトではなく他のwordpressサイトをいじっているときに起きました。

ロリポップ!のFTPでcssを変更して、Mac(ブラウザはChrome)で確認をし、「これでサイトが良い感じになったぞ!」と思っていたらスマホ(ブラウザはSafariもChromeも試した。)だとその変更が反映されてないことが判明。

CSSを変更した時はサイトを作り始めたばかりで、検索エンジンにインデックスされない設定にしていました。

「どうせインデックスされてないからだろ」と思ってインデックスされるように変更したんですが、やはりダメ。1日たってもダメ。

とりあえずググってみたらそれらしい情報があったので試してみたらアッサリ解決しました。

 

キャッシュが悪さをしてる

まず原因として考えられるのはキャッシュみたいです。対処法を説明する前にキャッシュについて少しだけ説明して起きます。

 

キャッシュとは?

キャッシュがある場合とない場合のブラウザ表示の図解

キャッシュは、一度訪れたことがあるサイトのデータを保管しておき、そのサイトにもう一度訪れた時にその保管していたデータを使ってサイトを表示させることができます。

普通はサイトに訪れるとサーバーからサイトの情報をもらってこないといけないんですが、これには少し時間がかかります。

キャッシュを使えば早くページを表示できますが、過去のキャッシュが残っていると最新の状態のサイトが表示されないことがあります。

 

おじさんの場合、Macの表示は更新されていて、スマホだとダメだったんですが、これは何故なんでしょうね。スマホだとブラウザはアプリで起動しているのでその辺の問題なんでしょうか。

 

対処法1:ブラウザを更新する

ブラウザキャッシュの場合の対処法は超カンタンです。ブラウザの更新ボタンを押すだけです。

更新ボタン

ブラウザを更新しても解決できない場合はプラグインが原因かもしれません。

 

プラグインが悪さをしてる

キャッシュ系プラグインを有効化しているとこの症状が起きるようです。おじさんの場合、「WP Fastest Cache」というプラグインが原因でした。

WP Fastest Cacheを無効化したらアッサリ解決しました。

キャッシュ系のプラグインを入れている場合はこの方法を試してみるといいかもしれませんね。

WordPressをやってるとちょいちょいプラグインが悪さをするので、何か不具合が起きたらプラグインを疑ってみるっていうのが基本動作ですね。

以前にもウィジェットの変更が保存できないことがありました。そのときは以下の記事のように対処しました。

Simplicity2のカスタマイズ中に保存できないときの対処法

 

でもプラグイン使いたいんだけど

おじさんはサイトを高速化するためにキャッシュ系のプラグインを入れていたんですが、今回の件でブラウザキャッシュの恐ろしさを知りました。

とりあえずプラグインを無効化したんですが、プラグインを使いたい方はプラグインの機能でキャッシュを削除すれば良いんじゃないかと思います(試す前にプラグインを無効化してしまったため未検証です…)。

このサイトは訪問者がまだまだ少ないのでキャッシュ系プラグインがなくてもいいかなと思うので、とりあえず無効化して起きます。そのうち有効化しててもこの症状がでないような方法を探してみたいと思います。

 

キャッシュについて詳しく解説してある記事を見つけたので載せておきます。おじさんは半分もわかりませんでしたけどね笑

WordPressキャッシュプラグインを選ぶために知っておくべきこと