WordPressを更新したのに画面が変わらない!反映されない!を解決する完全ガイド(キャッシュ対策)

WordPressサイトを更新したのに画面が変わらない!反映されない! SOSブログ
この記事の監修者・著者

Web制作歴29年。Webプロデューサー、Webマーケター、Webディレクター、Webデザイナー、Webエンジニアなど、様々なポジションでWeb制作に携わってきました。

主宰するホームページ作成教室には全国から受講生が集まっています。

このたび、Webトラブル何でも相談窓口を開設しました。
Webサイトのトラブル解決をサポートします!

コナン先生(小南邦雄)をフォローする

はじめに:原因の9割以上はキャッシュ(Cache)

「記事の誤字を直したのに、前の文章のまま……」
「画像をきれいなものに差し替えたのに、古い画像が表示される!」
「CSSを修正してデザインを変えたのに、崩れたまま直らない……」

WordPressを運営していて、こんなトラブルに遭遇して頭を抱えたことはありませんか?

「保存ボタンは間違いなく押したはずなのに、なぜ?」と焦ってしまいますよね。

実はこれ、原因の9割以上は「キャッシュ(Cache)」という機能が、良かれと思って働いた結果なのです。

この記事では、WordPress運営者を悩ませるこの「キャッシュ」について、その正体から付き合い方、そして「今すぐ画面を直すための具体的な手順」までを、初心者の方にも分かりやすく、徹底的に解説します。

コナン
コナン

一人でトラブルに向き合うのは不安…これ以上触ると取り返しがつかなくなりそうで怖い…一緒にトラブルを解決してほしい!プロに任せたい!という方は、下記よりご連絡ください。
コナン先生のWebトラブル何でも相談窓口

第1章:そもそも「キャッシュ」って何者?

トラブルの犯人扱いされがちなキャッシュですが、まずは敵(?)を知るところから始めましょう。

キャッシュの正体は「コピー」です

キャッシュ(Cache)とは、Webの世界では、「一度見たデータを一時的に保存しておいたコピー」のことを指します。

例えば、あなたが図書館(サーバー)で調べ物(Web閲覧)をするとします。

毎回、書庫まで行って本を探してくるのは大変ですよね(時間がかかる)。そこで、よく使うページをコピーして、手元のノート(ブラウザ)に貼っておきます。次からは、書庫に行かずに手元のノートを見れば、一瞬で情報が手に入ります。

これがキャッシュの仕組みです。

「サーバーまでデータを取りに行く手間を省いて、手元のコピーをサッと表示する」。これによって、Webサイトの表示速度は劇的に速くなっているのです。

キャッシュは悪者?いいえ、優秀なサポーターです

もしキャッシュがなかったら、どうなるでしょうか?

  • 表示が遅くなる
    ページを開くたびに数秒〜数十秒待たされます。
  • スマホのギガが減る
    毎回すべての画像データをダウンロードするため、通信量が激増します。
  • サーバーがダウンする
    多くの人が同時にアクセスすると、サーバーがパンクしてサイトが落ちてしまいます。

つまり、キャッシュは本来、私たちを助けてくれる「正義の味方」なのです。

ただ、「元の本(サーバー上のデータ)は書き換わったのに、手元のノート(キャッシュ)が古いまま」という時にだけ、「更新が反映されない!」というトラブルが発生してしまうのです。

第2章:どこに隠れてる?キャッシュの4つの隠し場所

「キャッシュを消したはずなのに直らない!」という声をよく聞きます。

その原因は、キャッシュが1ヶ所だけではないからです。Webサイトが表示されるまでには、いくつもの関所があり、それぞれが独自にキャッシュを持っています。

この「4つの層(レイヤー)」を意識することが、解決への近道です。

  • ブラウザのキャッシュ(あなたの手元)
    ChromeやSafariなど、Webページを見ているソフトが保存しているキャッシュです。一番よくある原因です。
  • プラグインのキャッシュ(WordPressの中)
    「WP Super Cache」などの高速化プラグインが作っているキャッシュです。
  • テーマのキャッシュ(デザインの裏側)
    最近の高機能なテーマ(SWELLやCocoonなど)や、ページビルダー(Elementorなど)が独自に持っているキャッシュです。
  • サーバーのキャッシュ(インフラの奥底)
    XserverやConoHa WINGなど、レンタルサーバー自体が持っている強力なキャッシュ機能です。

これから、この順番で解決策を見ていきましょう。

基本的には「手元(ブラウザ)」から順番に疑っていくのが鉄則です!

第3章:【解決編】まずはここから!ブラウザのキャッシュ対策

「デザインが崩れた」「画像が変わらない」という時は、まず自分のパソコンやスマホを疑いましょう。サーバー側は更新されているのに、あなたのブラウザだけが古いデータを握りしめている可能性が大です。

1.魔法のコマンド「スーパーリロード」

通常の「更新ボタン」や「F5キー」を押すだけでは、ブラウザは「まだキャッシュが残ってるからこれを使おう」とサボることがあります。

そこで、「キャッシュを無視して、強制的に新しいデータを取ってきて!」と命令するのが「スーパーリロード(強制再読み込み)」です。

まずはこれを試してみてください。

Windowsをお使いの方

  • Google Chrome / Edge / Firefox
    • キーボードの Ctrl キーを押しながら、F5 キーを押します。
    • これでもダメなら Ctrl + Shift + R も試してみてください
    • 画面が一瞬白くなって読み込み直されれば成功です。

Macをお使いの方

  • Google Chrome / Firefox
    • Command (⌘) + Shift + R を同時に押します。
  • Safari
    • Command (⌘) + Option + R を同時に押します。
    • または、Shift キーを押しながらアドレスバーの右にある更新ボタンをクリックします

2.設定からキャッシュを完全に削除する

スーパーリロードでも直らない場合、あるいはスマホの場合は、ブラウザの設定画面からキャッシュを削除します。

Google Chrome (パソコン)

  • 右上の「︙(三点リーダー)」をクリックし、「閲覧履歴データを削除」を選びます。
  • 期間は必ず「全期間」を選んでください。「1時間以内」だと、それより前の古いキャッシュが消えません。
  • 「キャッシュされた画像とファイル」にチェックを入れます(他は外してOK)。
  • 「データを削除」をクリックします。

Safari (Mac)

Web制作をするなら、この設定をしておくと便利です。

  • メニューの「Safari」→「設定(環境設定)」→「詳細」を開きます。
  • 一番下の「メニューバーに”開発”メニューを表示」にチェックを入れます。
  • メニューバーに出た「開発」をクリックし、「キャッシュを空にする」を選びます。
  • これで、いつでもショートカット(Option+Cmd+E)で一発削除できるようになります。

iPhone (Safari) の場合

iPhoneユーザーからの「直らない」という相談はとても多いです。

  • ホーム画面の「設定」アプリを開きます。
  • ずらっと並ぶアプリから「Safari」を探してタップします。
  • 下の方にある「履歴とWebサイトデータを消去」をタップします。
  • 注意:これを行うと、ログインしていたサイトからログアウトしてしまうことがあります
  • 特定のサイトだけ消したい場合は、「設定」→「Safari」→「詳細(一番下)」→「Webサイトデータ」と進み、自分のサイトを探して、左にスワイプして「削除」してください。

Android (Chrome) の場合

  • Chromeアプリを開き、右上の「︙」メニューをタップします。
  • 「履歴」→「閲覧履歴データを削除」をタップします。
  • 期間を「全期間」にして、「キャッシュされた画像とファイル」にチェックを入れ、「データを削除」します。

第4章:【解決編】プラグインとテーマのキャッシュ対策

ブラウザをきれいにしても直らない場合、次はWordPressの中を確認しましょう。

キャッシュ系プラグインを使っていませんか?

「サイトを高速化する」という名目のプラグインを入れている場合、そこが原因であることが多いです。以下の主要プラグインの操作方法を確認してください。

  • WP Super Cache
    管理画面の上部バーにある「キャッシュを削除」をクリックします。
    または、「設定」→「WP Super Cache」→「キャッシュを削除」ボタンを押します。
  • WP Fastest Cache
    上部バーのチーターのアイコンにカーソルを合わせ、「Delete Cache(全キャッシュ削除)」をクリックします。
    CSSなどをいじった時は「Delete Cache and Minified CSS/JS」を選ぶと確実です。
  • Autoptimize(デザイン崩れの常習犯!)
    これはCSSやJSを圧縮するプラグインですが、キャッシュ機能も強力です。
    上部バーの「Autoptimize」から「CSS/JS キャッシュ消去」をクリックします。
    デザイン調整中は、このプラグインを一時的に「無効化」しておくのが一番の安全策です。
  • LiteSpeed Cache
    上部バーのひし形アイコンから「全てをパージする(Purge All)」をクリックします。

高機能テーマの「独自キャッシュ」に注意!

最近の優秀な日本製テーマは、プラグインなしで高速化機能を備えています。これを見落としがちです。

  • SWELLの場合
    管理画面の「SWELL設定」→「リセット」タブの中に、「キャッシュクリア」というボタンがあります。ここを押してみてください。
    また、「ブログカード」などの表示がおかしい時は、それぞれのキャッシュクリアボタンも試しましょう。
  • Cocoonの場合
    管理画面の「Cocoon設定」→「キャッシュ削除」タブを開きます。
    「全てのキャッシュ削除」などを実行します。
  • Elementor(エレメンター)の場合
    ページビルダーでデザインしたのに崩れている場合です。
    「Elementor」→「ツール」→「一般」タブにある「CSSを再生成」をクリックします。これで直ることが非常に多いです。

第5章:【解決編】サーバーのキャッシュというラスボス

ここまでやってもダメなら、犯人は「レンタルサーバー」です。

最近のサーバー(XserverやConoHaなど)は非常に高性能で、WordPressの外側で勝手にキャッシュを作ってくれています。これが強力すぎて、更新を阻むことがあります。

Xserver(エックスサーバー)

  • エックスサーバーの「サーバーパネル」にログインします。
  • 「高速化」の項目にある「サーバーキャッシュ設定」をクリックします。
  • ドメインを選び、「キャッシュ削除」タブから「削除する」ボタンを押します。
  • 裏技: デザイン調整をしている間だけ、一時的に「設定変更」タブでキャッシュを「OFF」にしておくのも手です(作業が終わったらONに戻しましょう)。

ConoHa WING(コノハウィング)

  • コントロールパネルにログインし、「WING」→「サイト管理」→「高速化」へ進みます。
  • 「キャッシュ」タブを開き、「コンテンツキャッシュ」の項目にある「クリア」をクリックします。

Mixhost / ColorfulBox など

これらのサーバーは「LiteSpeed」という技術を使っています。

サーバーパネルではなく、WordPress内の「LiteSpeed Cache」プラグインを使ってキャッシュ削除(パージ)を行ってください。

第6章:それでも直らない時の「最終チェックリスト」

「全部やった!それでも変わらない!」

そんな時は、キャッシュ以外の場所、あるいは意外な盲点があるかもしれません。

1.検証の切り札「シークレットモード」

本当にキャッシュが原因か迷ったら、ブラウザの「シークレットモード(プライベートブラウジング)」でサイトを開いてみてください。

  • シークレットモードで正常に見える場合
    原因は100%、あなたのブラウザのキャッシュです。もう一度ブラウザのキャッシュ削除を丁寧にやってみましょう。
  • シークレットモードでも崩れている場合
    原因はサーバーやプラグイン、あるいは「コードの記述ミス」です。

2.CDN(Cloudflareなど)を使っていませんか?

CloudflareなどのCDNを利用している場合、世界中のサーバーに古いデータが残っています。Cloudflareの管理画面から「Purge Everything(全キャッシュ削除)」を行う必要があります。

3.CSSの記述ミスはありませんか?

「色は変わったけどレイアウトが変」という場合、CSSの書き間違え(スペルミスや } の閉じ忘れ)で、その行から下が無視されていることがあります。

また、「全角スペース」が混じっていないか確認してください。これは目に見えないので厄介です。

4.DNSキャッシュ(サーバー引越し直後など)

サーバーを引っ越した直後は、あなたのパソコンが「古いサーバーの住所」を覚えているせいで、新しいサーバーが見えていないことがあります。

パソコンやルーターを再起動すると直ることがあります。

まとめ:トラブルシューティングの流れ

最後に、トラブルが起きた時に慌てず対処するためのフローチャートをまとめておきます。

  • 現状確認:
    シークレットモードで見てみる。
    直ってる → 自分のブラウザの問題(手順2へ)
    直らない → サイト側の問題(手順3へ)
  • ブラウザ対策:
    PCならスーパーリロード(Ctrl+F5)。
    スマホなら設定から履歴削除。
  • WordPress内対策:
    キャッシュプラグイン(WP Super Cacheなど)の「キャッシュ削除」ボタンを押す。Autoptimizeなどの最適化プラグインのキャッシュを消す。
    SWELLやElementorなどのテーマ・ツール側のキャッシュ削除・CSS再生成をする。
  • サーバー対策:
    XserverやConoHaの管理画面で「サーバーキャッシュ」を削除する。

最後にアドバイス

「更新したのに変わらない」という現象は、実はあなたのサイトが高速化の恩恵を受けている証拠でもあります。キャッシュは決して悪者ではありません。

ただ、「よく分からないけど、速くなりそうだから」といって、複数のキャッシュプラグインを同時に入れるのは絶対にやめましょう。(例:WP Super Cache と W3 Total Cache を同時に入れるなど)。

これは薬の飲み合わせが悪いのと同じで、重大な不具合の原因になります。原則、キャッシュプラグインは1サイトに1つです。

このガイドが、あなたの「画面が変わらない!」というストレスを解消し、快適なWordPress運用の助けになれば嬉しいです。