【キャッシュ対策】WordPressでファイルを更新したら自動でパラメーターを付与する方法

修正完了したから確認してネ
変わってないんだけど???
エッ!!!

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'); ?>" alt="xxxx">

こんな感じで出力されます

【ファイルURL】/image.jpg?1641258000

このままだとUnixのタイムスタンプとして出力されるので、これを「年、日、時」に変換したほうがわかりやすいですね。

date('YmdGi', filemtime( 'ファイルまでのパス' ));

上記ではY(年/)、m(月 )、d(日)、G(時間)、i(分)を指定しています。

秒数まで入れるときは「YmdGis」とします。

例:2022/1/4 10:50の場合…202201041050

フォーマット文字列についてはこちらのサイトが参考になります。

<img src="<?php echo get_template_directory_uri(); ?>/img/image.jpg?<?php echo date('YmdGi', filemtime( 'get_template_directory() . '/img/image.jpg'' ));; ?>" alt="xxxx">

こんな感じで出力されます

【ファイルURL】/image.jpg?2022010410

function.phpでCSS/JSを読み込む時

function.phpの wp_enqueue_style でファイルを読み込むときも、filetime関数を使用します。

wp_enqueue_style('スタイル名','ファイルパス', array(), date('YmdGi', filemtime('ファイル絶対パス')));

ファイル名?ver={xxxxx}という形式でパラメータが付与されます。

JSも同様の書き方をします。

ちゃんと反映されててえらい!
わーい

参考になったサイト

https://qiita.com/m_t_of/items/83928b3a78040e8a5315

https://wemo.tech/316#index_id0

スポンサーリンク

おすすめ本の紹介

直感的にデザインが分かっちゃうスバラシな本です

余白の大事さがギュッとこの一冊で分かっちゃう

WP中級者向け。テーマ作成で役立ちます。

関連記事・広告