WordPressで外観を変更しても反映されない時はキャッシュ削除を試してみよう【初心者向け】
WordPressサイトでCSSで見栄えを良くしたりウィジェットを入れ替えてデザインを変更しても、スマホブラウザや別のPCブラウザでは変更が反映されていないことがあります。
外観カスタマイザーではきちんと表示されているし、ページを表示してもきれいに見えるのに、他のブラウザではだめ。
ウィジェットの組み合わせがおかしいのか、スタイルシートの文法が間違っていたのか。いくら見直しても理由が分からない。
そんな「表示上の問題」が起きたときは、たいていキャッシュが原因です。
もっとも気づきやすいのは外部CSSファイルによるスタイルシートですね。文字のサイズを大きくしたのに、色を変えたはずなのに元のままなのはだれしも経験しているはず。
スタイルシートの他、外観カスタマイザーを使ってウィジェットを変更した時にも表示がおかしくなることがあります。ページごとに表示されているウィジェットの内容が異なる、といった現象が発生します。
そういうわけで、「カスタマイズの結果がきちんと表示されない」時は、まずはキャッシュを削除してみるといいです。
『キャッシュ』にはいくつか種類がある
一口にキャッシュといっても、 Luxeritas のよくある質問にも書かれているようにいくつか種類があります。
- ブラウザキャッシュ
- 通信経路のキャッシュ(プロキシキャッシュ)
- サーバーのディスクキャッシュ
- WordPress プラグインのキャッシュ
キャッシュは処理速度の向上やアクセス回数を減らすために利用されています。高速化を目的としている点では4つとも目的は同じですが、キャッシュの種類(場所)によって使われ方が異なります。当然ながら対処法も異なります。
キャッシュとは?
キャッシュ(cache)は、よく使われるデータやファイルを一時的に保存したデータのことです。
読み込みに時間がかかるデータを高速にアクセスできる場所に一時的に保存してくことで、アクセスにかかる時間や手間を減らすことを目的として利用されます。
たとえばブラウザゲームをしていると「お使いのブラウザのキャッシュを削除してください」と言われることがあります。
ブラウザキャッシュは手元のブラウザにデータを保存しておくことで、サーバに毎回読みに行く必要がなくなるありがたい存在なのです。しかしサーバのデータを新しいものに差し替えても古いデータが表示され続けてしまうというデメリットもあります。
そういったブラウザに一時保存した「古いキャッシュ」が利用されて新しい情報がうまく表示されない時にキャッシュをクリアすると、新しい情報をサーバに読みにいくため正しく表示されるようになります。
ブラウザキャッシュ
ウェブブラウザはCSSやスクリプトファイルをキャッシュとして一時的に保存しています。
あるページでCSSファイルのURLが書かれていても、同じファイルがキャッシュにあればサーバに読みに行くかわりに、手元のキャッシュファイルを読み込みます。
キャッシュを利用すると通信量の削減、サーバに読みに行く際の応答を待つ時間短縮、サーバの負荷を下げるといった効果があります。その反面、キャッシュの有効期限までは古いキャッシュを利用するため、新しい情報に更新されないことがあります。
Chrome のキャッシュは溜まっていく一方なので、不具合がなくてもときどき削除するといいかもしれません。
(PCブラウザ、スマホブラウザ両方の削除法を載せてあります)
プロクシキャッシュ
サーバまでの経路にあるプロクシでキャッシュされていることがあります。時間が経てば更新されます。
待っていられない時は、ブラウザでプロクシサーバを変更すればうまく表示されることもあります。
Wordpress プラグインのキャッシュ
WordPress はウェブページへのアクセスがあると、毎回アクセスがあったページの情報をデータベースから読み込んで動的に生成しています。
この仕組みは、ページの内容に変更があると即座に全てのページで新しい情報が表示されるというメリットがありますが、ページを表示するたびにサーバへの負荷が生じます。さらにサーバの処理能力によってはページ生成に時間がかかり表示が遅くなることがあります。
「動的にページを生成すると表示速度が遅くなるなら、結果を静的ページ(HTML)として保存すればいいじゃない!」という発想で用いられるのがWP用キャッシュプラグインです。
ワードプレスのキャッシュプラグインは動的に生成されたページの「結果」を保存し、その結果だけを送ります。そのためサーバの負荷は軽く、表示速度も早くなります。その一方でブラウザキャッシュと同じく、キャッシュが更新されるまでは古いページを送り続けることになります。
WordPress用キャッシュプラグインでは記事を投稿すると、フロントページや新着情報といった部分のキャッシュは破棄され新しいものに更新されます。
そのため普段はキャッシュの影響を受けることはありません。しかしキャッシュプラグインが「情報が更新された」と判断できないケース(例えば外観カスタマイズでウィジェットの中身だけ変更した場合など)では古い情報のままということがあります。
外観を変更しても結果に反映されないのは古いキャッシュが原因のことが多いので、うまく行かない場合はキャッシュを削除します。キャッシュのクリアはプラグインの設定の「キャッシュの削除」または「キャッシュをパージ」で行えます。
慣れるまでは、まずはキャッシュを疑うべし
WordPress のキャッシュプラグインの管理メニューにはログインしているユーザには「キャッシュを表示させない」という設定があります。ログインユーザにキャッシュを使わなければデザインを変更するたびに新しい情報が表示されます。
しかし、ログインしていないブラウザでアクセスすると古い情報のまま、ということがあります。
また、ブラウザにはCSSファイルやjsファイルがキャッシュされているため、サーバ側で情報が新しくなっても(ログインしていない)ブラウザでは古いデータが表示され続けていることがあります。
そういった理由からデザインを変更しても反映されないときはキャッシュが原因のことが非常に多いです。
ブラウザ・Wordpressプラグイン両方のキャッシュを削除するのを習慣にすると、カスタマイズの確認もスムーズに行えるようになりますよ。
ディスカッション
コメント一覧
WordPress初めたばかりの初心者です。
WordPressサイトで子style.cssを変更して、PC・他のブラウザーでは変更が反映。しかしスマホブラウザでは反映できない現象に悩んで、こちらのサイトに辿りつきました。
①エックスサーバー 利用ですが、mod_pagespeed設定はoffのまま。
②キャッシュプラグは導入してません。
ブラウザキャッシュは削除済み。一番最初に書いた、変更cssですが当初スマホ上で反映されませんでしたが、1週間位で反映されてました。
→どの様に事が原因か、どの様に対処したらいいかご返答いただいたら幸いです。
すみません、自己解決できました。
MEEさん
コメントを承認するのを忘れて調べてたんですが、よくわからずでした。
そうお返事しようとみたら解決できたようでよかったです。
ピンバック & トラックバック一覧
[…] 1. 『キャッシュ』にはいくつか種類がある […]