CSSやJSファイルを更新する際に、ブラウザがキャッシュを無視して新しいバージョンを取得するために、通常はクエリパラメータを使用します。クエリパラメータを変更することで、ブラウザはファイルを新しいものと見なし、キャッシュされた古いバージョンを無視します。
しかし、更新を行う度に毎回パラメータを付与しなおすのは以外と手間が掛かります。特に更新頻度が高い場合は、自動化できると非常に作業が楽になります。
CSSファイルに自動的にタイムスタンプを付与する方法
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css?<?php echo filemtime(get_theme_file_path('/css/style.css')); ?>" >
このコードでは、filemtime() 関数を使用して、style.css ファイルの最終更新日時を取得し、それを ? の後に追加しています。これにより、ブラウザはCSSファイルをキャッシュせず、必要に応じて新しいバージョンをダウンロードします。
この方法は、WordPressのテーマファイル内のCSSファイルにのみ適用されます。同様に、JavaScriptファイルにも適用できます。
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js?<?php echo filemtime(get_theme_file_path('/js/script.js')); ?>"></script>
これにより、CSSやJSファイルが更新された際に、ブラウザが新しいバージョンを取得するようになります。
よくある質問（FAQ）
Q. CSSファイルのキャッシュを防ぐためにバージョンパラメーターを自動更新するには？
A. wp_enqueue_style()の第4引数にfilemtime()で取得したファイルの更新日時を渡します。filemtime(get_template_directory() . ‘/style.css’)でタイムスタンプを取得し、バージョン番号として使用します。
Q. 子テーマのCSSにも同様のバージョン管理を適用できますか？
A. はい。get_stylesheet_directory()で子テーマのパスを取得し、filemtime(get_stylesheet_directory() . ‘/style.css’)でタイムスタンプを取得します。親テーマと子テーマで別々に管理できます。
Q. 本番環境でキャッシュが更新されない場合の原因は何ですか？
A. CDNやサーバー側のキャッシュが原因のことが多いです。filemtimeの値は変わっているのにブラウザが古いファイルを使う場合はサーバーキャッシュの設定を確認してください。Cocoonの場合はキャッシュ設定もチェックが必要です。
