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制作勉強中