クエリパラメータ
クエリパラメータ

WordPressでJavaScriptやCSSを更新した時、ブラウザキャッシュを有効にしたまま更新をすぐに反映させる方法

WordPressサイト構築する時、CSSファイル更新後サーバーにアップロードして、クライントに変更点を確認してもらうと「変わってないですよね?」と言われることがありませんか?
これはCSSファイルを同じファイル名でアップロードしたため、ブラウザが保存しているキャッシュを読み込んているためです。その都度、クライントにブラウザ側でスーパーリロード( Ctrl+F5 / Cmd+Shift+R)をお願いするもの申し訳ないし、わざわざリネームしてアップロードするのも地味に面倒です。なので、JavaScriptやCSSファイルを更新した時に、自動でクエリパラメータを付与するようにしてみました。

クエリパラメータとは?

クエリパラメータは読み込むファイルの後に付いている?=1811290231のような文字列です。以降の文字列は任意のもので構いません。今回は、?=更新日時というような形にしています。このクエリパラメータが変わらないうちは、ブラウザキャッシュの設定に合わせてキャッシュを維持します。ファイルを更新してアップロードすると、このクエリパラメータが新しい文字列に変更され、ブラウザは新しいファイルと認識しキャッシュがクリアされます。

クエリパラメータ更新イメージ

クエリパラメータを付与するコード

$filepath='/style.css'/style.css部分を読み込むファイルのパスを指定します。
/style.cssと指定することで、テーマフォルダ内のstyle.cssを読み込み、クエリパラメータを付与します。style.css以外のファイルもクエリパラメータ付きで読み込むことができます。

date関数

クエリパラメータの値をカスタマイズする時はdate関数のYmdHiの部分を変更します。YmdHiだと以下のような形で年月日と時間を取得します。

  • Y → 4桁の西暦(例:2018)
  • m → ゼロ詰めの月(例:01~12)
  • d → ゼロ詰めの日(例:01~31)
  • H → 24時間表示の時間(例00~24)
  • i → 分(00~60)

時間は、日本時間に合いませんが、キャッシュクリアが目的なので、特に修正はしていません。date関数をカスタマイズする場合は以下のサイトをご確認ください。

date – ローカルの日付/時刻を書式化する

クエリパラメータ付きでJavaScriptやCSSファイルを読み込ませるコード例

下の例では、テーマフォルダの直下にstyle.cssファイルがある場合と、テーマフォルダ内のjsフォルダにあるconfig.jsファイルを読み込む場合の例です。ファイルパスは環境に合わせて適時かえて設定してください。

まとめ

このコードを使うことで、JavaScriptやCSSファイルをアップロードするたびに、クエリパラメータが更新され、変更した内容がすぐに反映されるようになるかと思います。クライアントとの確認作業で「変更されてませんよ…」→「いやいやブラウザのキャッシュをクリアしてください。」といった不毛なやりとりが軽減されるかと思います


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利