WordPressを更新したのに反映されない?キャッシュと「?v=」の仕組みを学びました

WordPressを更新したのに反映されない?キャッシュと「?v=」の仕組みを学びました

記事
デザイン・イラスト
WordPressでホームページを制作していると、

「ファイルを更新したのに、なぜか表示が変わらない!」

ということがあります。

今回は実際のサイト制作でこの現象が起こり、ブラウザのキャッシュとURLのバージョンについて学んだのでまとめてみます。

更新したのに古いページが表示されるのはなぜ?

Webサイトを一度表示すると、ブラウザは画像やCSSなどのデータを一時的に保存することがあります。

これが**キャッシュ(cache)**です。

キャッシュがあることで、同じサイトをもう一度開いたときにすべてのデータを毎回取得する必要がなくなり、ページを速く表示できます。

とても便利な仕組みなのですが、Webサイトを制作・更新していると、

サーバー上は新しくなっているのに、ブラウザには以前の表示が残っている

ということがあります。

今回もPCでは新しいページが表示されているのに、スマートフォンでは以前のページが表示されるという現象がありました。

URLの最後に「?v=20260809」を付けてみる

今回試したのが、URLの最後に

?v=20260809

を付ける方法です。

例えば、

example.com/

というURLを、

example.com/?v=20260809

のようにします。

すると、ブラウザなどからは異なるURLとして扱われる場合があるため、以前のページURLに対するキャッシュを避けて表示を確認できることがあります。

このようにURLを変化させてキャッシュの影響を避ける方法は、一般に**キャッシュバスティング(Cache Busting)**と呼ばれます。

「20260809」という数字に意味はある?

最初は、

「20260809って何かWordPressの命令なの?」

と思いましたが、この数字自体に特別な意味はありません。

例えば、

?v=1

でも、

?v=2

でも、

?v=20260809

でも構いません。

大切なのは、以前とは違うURLにすることです。

今回は更新日が分かりやすいように、

20260809 = 2026年8月9日

として使用しました。

日付にしておけば、「いつの更新版なのか」が自分でも分かりやすいので、制作途中の確認にも便利だと感じました。

ただし「?v=」ですべて解決するわけではない

ここも今回勉強になったポイントです。

ページURLに ?v=20260809 を付けたからといって、CSS・JavaScript・画像など、すべてのキャッシュが必ず更新されるわけではありません。

本格的に対策する場合は、CSSやJavaScript自体にも、

style.css?ver=...

script.js?ver=...

のようなバージョンを付ける方法があります。

WordPressでは functions.php の wp_enqueue_style() や wp_enqueue_script() を使って、こうしたバージョン管理を行うこともできます。

ここは今後さらに勉強していきたいところです。

本番環境へ移行した後の修正方法も学びました

今回はローカル環境で制作したWordPressを、本番サーバーへ移行する作業も行いました。

移行には All-in-One WP Migration を使用しました。

サイト全体を移行するときにはとても便利ですが、本番環境へ移した後のちょっとした修正まで、毎回サイト全体を移行し直す必要はありません。

例えば、

style.css を変更した
→ style.css をアップロード

JavaScriptを変更した
→ 該当するJSファイルをアップロード

PHPを変更した
→ 該当するPHPファイルをアップロード

というように、変更したテーマファイルだけを本番サーバーへ反映することができます。

投稿やWordPress管理画面で設定した内容はデータベースに保存されるため、「ファイル」と「データベース」の違いを意識することも大切だと感じました。

まとめ

今回は実際のサイト更新を通して、

「更新した=すぐ全員の画面も最新版になるとは限らない」

ということを学びました。

キャッシュはWebサイトを快適に表示するための便利な仕組みですが、制作中には「変更したのに反映されない!」という原因になることもあります。

そんなときは、

サーバーへのアップロードができているか → キャッシュが残っていないか → CSSやJavaScriptが最新版になっているか

と順番に確認していくことが大切です。

実際に制作していると、デザインやコーディングだけでなく、こうした公開後・更新時の仕組みについて学ぶ機会も増えてきました。

ひとつずつ経験しながら、今後の制作にも活かしていきたいと思います。

タグ

#Web制作 #WordPress #キャッシュ #キャッシュバスティング #ホームページ制作 #Webデザイン #コーディング #WordPress初心者 #Web制作勉強中
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す