先日 WordPress の子テーマを作り直したのですが。iPhone で表示すると、style.css が読み込まれないと言う事態に陥りました。W3 Total Cache を無効にしたところ、直ったので、原因は W3 Total Cache にあることまでは、突き止めて、一旦無効にしていたんですけど。いかんせんブログの表示速度が遅くなってしまったので、頑張って直してみました。
他のプラグインとの兼ね合いや、使用しているサーバとの相性なんかもあるかもしれないので、以下の方法で絶対直るかわからないんですけど。このブログは、さくらのレンタルサーバ スタンダード
を使っています。
私の環境では、テスト用のブログと本番のブログの両方で、同じ症状が出たんですけど。この方法で両方解決できました。
W3 Total Cache のキャッシュを削除する
PC 表示の方は、普通に W3 Total Cache のキャッシュを削除するだけで、新しい style.css を読み込んでくれました。
W3 Total Cache のキャッシュを削除したい場合は、WordPress の管理画面に入り左側にある「Performance」をクリックして W3 Total Cache の「Dashboard」を開きます。そして「empty all caches」をクリックします。
または、ツールバーの「Performance」をマウスオーバーすると表示されるメニューから「Empty all caches」をクリックします。
これで PC 表示の方は新しい style.css を読み込めました。しかしモバイル用にキャッシュを分けている場合、この方法ではモバイル用のキャッシュが削除できないみたいです。
W3 Total Cache のモバイル用のキャッシュを削除する
W3 Total Cache はそのまま使うと、スマートフォンやタブレットでも PC 用のキャッシュを表示してしまいます。これだと条件分岐などで、スマートフォン用に表示を切り分けていても意味がありません。
そんなわけで「User Agent Groups」でモバイルデバイスでは別のキャッシュを使用するように設定しています。
どうやら、このキャッシュが先ほどの方法では消えなかったみたいで、子テーマを変更しても新しい style.css が読み込まれませんでした。
そこで WordPress の管理画面の左側にある「Performance」から W3 Total Cache の設定を開き、さらに「User Agent Groups」を開きます。
ここで一旦、「User Agent Groups」を無効にします。「Enabled:」のチェックを外して、下にスクロールし「Save all settings」をクリックして設定を保存します。
すると「Empty the page cache」と言うボタンが現れるので、それをクリックしてキャッシュを削除しました。
ことが済んだら、再び「Enabled:」にチェックを入れるのをお忘れなく。
あとで気がついたんですけど「Empty the page cache」なので、もしかすると。「User Agent Groups」ではなく、「Page Cache」を開いて、そちらにある「Empty the page cache」で削除しても同じだったかもしれません。
次に同じことが起きたら、試してみようと思います。
まとめ
初めに実行した「Empty all caches」は All となっているので、これで W3 Total Cache のキャッシュが全部削除できると思っていたんですけど。違うのかな？
少し謎が残ってしまったけど、次に同じことが起きた時のためにメモしておいた次第です。
