変更履歴
- Rev. 0.7 : 2024年01月01日
- 新規作成
1 画像を更新したのに、表示に反映されない
WordPressにおいて、変更を加えた画像が正しく反映されず、
古い画像が表示されたままになることがあります。
ブラウザやサーバーが古いデータをキャッシュに保持し続けているからです。
このようような現象を解消するためには、WordPressのキャッシュのクリアが必要です。 本記事は、WordPressのキャッシュのクリアについてまとめてみました。
1.1 WordPressのキャッシュとは?
キャッシュとは、一度読み込んだデータを一時的に保存しておき、
次回以降のアクセス時に高速に表示できる仕組みのことです。
WordPressでは、ページの表示速度を上げたり、サーバーの負荷を軽減するために キャッシュが使われます。
1.2 WordPressで使われる主なキャッシュの種類
WordPressにおけるキャッシュには、主に以下の種類があります。
- ブラウザキャッシュ
-
ユーザーのブラウザにデータを保存し、
再訪問時に画像やCSS、JavaScriptなどの読み込みを高速化します。 - ページキャッシュ(HTMLキャッシュ)
-
WordPressはPHPで動的にページを生成します。
一度生成したHTMLを保存しておき、
次回はその保存されたHTMLを表示することで処理を高速化します。 - オブジェクトキャッシュ
-
データベースからの問い合わせ結果(クエリ結果)を保存し、
同じ問い合わせを繰り返さずに済むようにします。 - データベースキャッシュ
- データベースへのアクセスを減らすためにクエリ結果をキャッシュします。
- CDNキャッシュ
-
CDN
(Content Delivery Network)を利用して、
世界中のサーバーにキャッシュを分散させ、ユーザーの地理的に近い場所から高速に配信します。
2 キャッシュのクリア
ユーザーがWebページを表示した際に、キャッシュされた画像が優先的に表示されるため、
新しくアップロードした画像が表示されないという現象が起こることがあります。
このような場合は、サーバーサイド、あるいはブラウザサイドのキャッシュをクリアして、
WordPressの最新のデータを読み込めるようにします。
2.1 キャッシュのクリアが必要な時
以下に示すような場合では、キャッシュのクリアが必要となります。
・ コンテンツを追加または変更したが、古いバージョンがまだ表示されている
・ プラグインやテーマの更新後
・ デザインの変更(ボタンの設置やレイアウトの調整など)が反映されていない
・ 以前に作成した固定ページや投稿を更新した
・ CSSやスクリプトのキャッシュが原因で、編集後にサイトの外観が崩れている
2.2 サーバーサイドのキャッシュクリア
サーバーサイドのキャッシュをクリアするには、下に示す2つの方法があります。
① プラグインを利用する
② “.htaccess”に“Cache-Control”を記述
2.2.1 プラグイン
最も簡単で一般的な方法です。
代表的なプラグインに、次のようなものがあります。
WP Super Cache
W3 Total Cache
WP Rocket(有料)
これらはページキャッシュやブラウザキャッシュ、オブジェクトキャッシュなど複数の
キャッシュをまとめて管理できます。
なお、WordPressやPHPのバージョン、あるいはWordPressの設定状況などの
環境によって、正常に動作しないことがあります。
この対策のため、プラグインをインストールする時は、前以って次のことを行っておくことが 求められます。
・ 記事のバックアップをとっておく
・ プラグインのアンインストール方法を調べておく。
ただアンインストールするだけではなく、手作業による後始末が必要な場合があるようです。
2.2.2 “.htaccess”に“Cache-Control”を記述
“.htaccess”ファイルを編集することでも、
ブラウザキャッシュのクリアを設定することができます。
.htaccessファイルに“Cache-Control構文”を追加することで、
静的ファイルのブラウザキャッシュを有効にできます。
本記事では、こういう方法があるということ紹介するだけに留めます。
下に示すページなどを参考にしていただければと思います。
下に示す例は、
画像ファイルや動画ファイルは30日間(単位は秒、60秒×60分×24時間×30日)、
CSSファイルやJavaScriptファイルは7日間、HTMLファイルはキャッシュしないように
設定しています。
|
1 2 3 4 5 6 7 8 9 |
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf|mp3|mp4|avi|mov|ogg|webm)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> <FilesMatch ".(css|js)$"> Header set Cache-Control "max-age=604800" <:/FilesMatch> <FilesMatch ".(html|htm|php)$"> Header set Cache-Control "max-age=0, must-revalidate" </FilesMatch> |
2.3 ブラウザキャシュ
サーバーサイドのキャッシュの他に、
Chrome、Edge、Firefox、Safariなどのブラウザサイトもキャッシュを保存します。
WordPressのキャッシュをクリアしても変更が表示されない場合は、
ブラウザキャッシュのクリアを試してみてください。
以下、Google ChromeブラウザとMicrosoft Edgeのキャッシュクリアでの方法を示します。
2.3.1 Google Chrome
Google Chromeでは、ブラウザの右上にある3つの点
をクリックして、
「閲覧履歴データを削除」
を選択します。
「閲覧履歴」、「Cookieとその他のサイトデータ」、「キャッシュされた画像とファイル」、
「ダウンロード履歴」などを選択して削除します。
2.3.2 Microsoft Edge
Microsoft Edgeにも、Chromeと同様にサイトの履歴とブラウザのキャッシュをクリアする
設定があります。
Microsoft Edgeを開き、ブラウザの右上にある3つの点
をクリックして、
「閲覧データを削除」
あるいは、
「設定」⇒「プライバシー、検索、そしてサービス」⇒、「閲覧データをクリア」
と選択を続け、「クリアするデータの選択」をクリックします。
以上
本記事の元となっているWordで作成したPDFを
ページ最後に貼り付けました。
少しでも役に立てていただければ、うれしく思います。
このPDFファイルは、自由に配布されてもかまいません。
ただし、再配布の際には、
入手元と著者名は明らかにしてください。
なお、上のPDFファイルの内容、また本文中の記述に、
誤字や脱字、誤った内容の記述など見つかりましたら、
下に示すフォームでご連絡いただければ幸いです。





