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関数をカスタマイズする場合は以下のサイトをご確認ください。
クエリパラメータ付きでJavaScriptやCSSファイルを読み込ませるコード例
下の例では、テーマフォルダの直下にstyle.cssファイルがある場合と、テーマフォルダ内のjsフォルダにあるconfig.jsファイルを読み込む場合の例です。ファイルパスは環境に合わせて適時かえて設定してください。
まとめ
このコードを使うことで、JavaScriptやCSSファイルをアップロードするたびに、クエリパラメータが更新され、変更した内容がすぐに反映されるようになるかと思います。クライアントとの確認作業で「変更されてませんよ…」→「いやいやブラウザのキャッシュをクリアしてください。」といった不毛なやりとりが軽減されるかと思います