WordpressのJS・CSSファイルのキャッシュ対策
こんにちはjunです。wordpressのテーマを本番運用してスタイルに修正があり、修正をアップロードしてもクライアントのキャッシュが原因でユーザー側で変更されないことがあります。今回はテーマ内で読み込むjs,cssのキャッシュ対策について忘備録がてら記事として共有したいと思います。
wp_enqueue_style,wp_enqueue_scriptに記述
wordpressのアセット読み込みにはwp_enqueue_style,wp_enqueue_scriptを使用します。それらの第４引数にはバージョンの文字列を入力することができます。
例えば、1.3など入力すれば読み込んだアセットのURLで以下の様に設定されます。
https://example.com/wp-content/themes/minato/assets/css/style.css?ver=1.3
GETパラメーターでバージョンの文字列をつけることで、バージョンを識別できる様になります。ブラウザは同じURLのCSS、JS、画像を手元にキャッシュします。普段は通信が早くなるのでありがたいですが、修正が発生した時などは古いコードが残るのでユーザーによって動きに差異が生まれる原因になります。そして大体のユーザーはキャッシュクリアのやり方を知らないですし、スマホは特に強力なキャッシュが効いています。
更新時のファイルをユーザーに届けるためには、上記の様なバージョンのGETパラメーターをつけるなどして、別のURLを指定する必要があります。
そのため納品時には今後の修正を考えてバージョンを変化させる様にした方がいいです。マーケットプレイスならば上記の引数をリリース・修正ごとに変えていればいいです。しかし開発中や毎回バージョンを変えるのが面倒な時、Gitで管理していてバージョンの文字列をあまり変えたくない時はファイルの更新日時でバージョンを変えてあげる方法があります。
filemtimeを使用する
PHPには対象ファイルの更新日時を取得するfilemtime()という関数があります。引数には以下の様にサーバー上でのファイルパスを入力します。
filemtime(get_theme_file_path('/css/editor-style.css'))
返り値はUnixタイムスタンプです。更新時はその時間が変わるので、更新のたびに変化する値を取得して変更したファイルを確実に届けることができます。対象ファイルを編集するだけで自動的にバージョンを示すことができます。
毎回更新日時を取得するのでその分のパフォーマンスがきりなりますが、自分はよくこの方法でwordpressを構築しています。