PDFやCSSなどを更新したときに、お客さん側でキャッシュが残っていて「画像変わってないよ」と言われるまえにこちらで対策を取る方法を共有します。
パラメーターとは
パラメーターは、Webサーバーに情報を伝えるための記述です。
URLの末尾にクエスチョンマーク「?」を付けて、その後ろにパラメーターを指定します。
ファイル名の後ろにパラメータを付与すると、ブラウザ側で「違うファイル」と認識されて更新してくれます。
手動でパラメーターを変えてもいいのですが、ファイルをアップロードするだけで自動でパラメーターを変える方法をご紹介します。
htmlタグにパラメーター付与
filemtime( ‘ファイルまでのパス’ );を指定します。
filetime()
はファイルの最終更新日時をUnixタイムスタンプとして取得できるPHPの関数です。
filemtime('ファイルまでのパス');
例
<img src="<?php echo get_template_directory_uri(); ?>/img/image.jpg?<?php echo filemtime(get_template_directory() . '/img/image.jpg'); ?>">
こんな感じで出力されます
【ファイルURL】/image.jpg?1641258000
このままだとUnixのタイムスタンプとして出力されるので、これを「年、日、時」に変換したほうがわかりやすいですね。
wp_date('YmdHis', filemtime( 'ファイルまでのパス' ));
wp_date…日付を取得する関数。
YmdHis…日付の詳細を決めています。上記ではY(年/)、m(月 )、d(日)、H(時間)、i(分)、s(秒)を指定しています。
例:2022/1/4 10:50の場合…202201041050
フォーマット文字列についてはこちらのサイトが参考になります。
例
<img src="<?php echo get_template_directory_uri(); ?>/img/image.jpg?<?php echo wp_date('YmdHis', filemtime( 'get_template_directory() . '/img/image.jpg'' )); ?>">
こんな感じで出力されます
【ファイルURL】/image.jpg?2022010410
function.phpでCSS/JSを読み込む時
function.phpの wp_enqueue_style でファイルを読み込むときも、filetime関数を使用します。
wp_enqueue_style('スタイル名','ファイルパス', array(), wp_date('YmdHis', filemtime('ファイル絶対パス')));
ファイル名?ver={xxxxx}
という形式でパラメータが付与されます。
JSも同様の書き方をします。