CSSなどを変更してクライアントに確認してもらう時、「変わってませんよ？」と言われ、「すみません、キャッシュです。お手数ですが削除してから…」という不毛なやり取り。経験ありませんか？
サイト制作中もFTPなどでファイルをアップしたらブラウザ側で「キャッシュの消去とハード再読み込み」をいちいち選択して確認してました。（Chromのデベロッパーツールの表示中は更新ボタンを右クリックすると下の画像のような更新の種類が表示されます。）
とはいえ、サイトの公開前なら特に問題ないのです。面倒なだけ。
問題なのは公開後にCSSファイルなどを修正した場合です。サイトを訪れてくれた人はCSSが更新されていることを知らないし、ブラウザキャッシュのクリア方法なんて知りません。表示のおかしい状態で見られてしまう可能性があります。
かといってブラウザキャッシュ事体をオフにしたり短くするのはSEO的に良くないし、困ったものです。
実際そんな事態になって困ったので、少し調べてみました。
すると、簡単にできる対処法が出てきましたので、メモしておこうと思います。
ファイル名の末尾に更新日時のクエリパラメータを付ける
クエリパラメータ、クエリ文字列とか呼ばれているものを利用します。
ファイル名の末尾についている ?◯◯=△△というような文字列のことを指します。
jQueryのようなプラグインファイルを読み込むときに付いているのをよく見かけないでしょうか？
例
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js?ver=4.9.5'></script>これでいうと、 ?ver=4.9.5の部分がクエリパラメータです。
クエリパラメータが変わらないうちはブラウザキャッシュの設定通りに「jquery.min.js」のキャッシュを維持してくれます。
そして、例えばパラメータが ?ver=4.9.6などのように変化すると、ブラウザは「jquery.min.js」のキャッシュを更新してくれるのです。
自分で読み込むファイルにもクエリパラメータを付与してみる
先程のjQueryの読み込みファイルのように、自分で読み込むファイルにも好きなクエリパラメータを付与することができます。
とりあえず適当につけてみましょう。
例えばこんな感じ。
<link rel="stylesheet" src="style.css?date=20170601">"date=" の部分はなんでもOKです。むしろなくても大丈夫。
このようにまずは適当にクエリパラメータをつけてみて、無事にファイルが読み込まれることを確認してみて下さい。
ファイルの更新日時をパラメータにする
もうわかっている方もいるかと思いますが、このクエリパラメータに「 ファイルの更新日時」を自動で付与する事が出来れば、ファイルを更新するたびにクエリパラメータが変化して、ブラウザキャッシュが更新されるようになります。
そのために、まずはファイルの更新日時を取得しましょう。
filemtime( 'ファイルまでのパス' );filetime()というPHPの関数を利用する事で、ファイルの最終更新時刻が Unix タイムスタンプとして返されます。
しかしこの Unix タイムスタンプという形式ではクエリ文字列としては使えないので、さらに date()というPHPの関数を使用します。
date('YmdGis', filemtime( 'ファイルまでのパス' ));第一引数を 'YmdGis'としていますが、このようにすることで、 '20180419114031'のように年から秒までが数字で取得できます。
「秒まではいらないかな、分まででいいや」って人は 'YmdGi'とします。
これを、ファイル名の末尾に追記するようにして読み込みましょう。
例
<link rel="stylesheet" href="ファイルまでのパス?date=<?=date('YmdGis', filemtime( 'ファイルまでのパス' ));?>">
WordPressの「wp_enqueue」でファイルを読み込む場合のクエリパラメータの付け方
WordPressでのファイルの読み込みはwp_enqueue_scriptsフックを利用すると思いますので、wp_enqueue_scriptやwp_enqueue_styleでのクエリパラメータを付ける場合の記述例もメモしておきます。
とは言っても、実はwp_wnqueue_◯◯は第４引数にバージョンのクエリパラメータを指定することができるようになっているので、これを使用します。
wp_enqueueでクエリパラメータを付ける
//cssの読み込み
wp_enqueue_style('スタイル名','ファイルパス', array(), date('YmdGis', filemtime('ファイル絶対パス')));
//jsの読み込み
wp_enqueue_script('スクリプト名','ファイルパス', array(), date('YmdGis', filemtime('ファイル絶対パス')));このようにすることで、{ファイル名}?ver={第４引数}という形式でクエリパラメータが付与されます。
としてファイル名の後ろに追加されます。
なので、ここにファイルの更新日を記述しておけば、ファイルが更新されるたびにクエリー文字も更新され、すぐにファイルの変更内容が反映されるようになります。
クエリパラメータ付きでファイルを読み込むためのオリジナルの関数を作ってしまうと楽
これらをファイルの読み込みごとに記述するのはすごく面倒なので、私はオリジナルの関数を作成してファイルを読み込んでいます。
クエリパラメータ付きでファイルを読み込む関数
function add_files(){
define("TEMPLATE_DIRE", get_template_directory_uri());
define("TEMPLATE_PATH", get_template_directory());
function wp_css($css_name, $file_path){
wp_enqueue_style($css_name,TEMPLATE_DIRE.$file_path, array(), date('YmdGis', filemtime(TEMPLATE_PATH.$file_path)));
}
function wp_script($script_name, $file_path, $bool = true){
wp_enqueue_script($script_name,TEMPLATE_DIRE.$file_path, array(), date('YmdGis', filemtime(TEMPLATE_PATH.$file_path)), $bool);
}
//以下のように使う
wp_script('wemo_script','/js/script.js');
wp_css('wemo_style','/style.css');
}
add_action('wp_enqueue_scripts', 'add_files',1);オリジナル関数ではwp_enqueue_scriptの第５引数をデフォルトでtrueにしており、jsの読み込みは基本的にwp_footer()で読み込むようにしています。
追記：第一引数のハンドル名の指定でもクエリパラメータは付与できる
wp_enqueue_styleやwp_enqueue_scriptの第一引数はハンドル名を指定しますが、この時、「ハンドル名?クエリパラメータ」のように?を付けて記述すると、任意のクエリパラメータが指定可能です。
例
wp_enqueue_style('ハンドル名?date=20180428', 'ファイルパス');ただ、この指定だと、クエリパラメータは上記で指定した「date」の他、「ver」も自動で付与されるようです。
というのも、第４引数によるバージョンの指定をしなくとも、自動的にWordPressのバージョンがクエリパラメータとして付与されてしまうためです。
なので、無駄なクエリパラメータを省きたい場合は第４引数を更新日のクリパラメータにしてしまう方法で良いかと。
バージョンと他のクエリパラメータを同時に付与したい場合のみ、第一引数でクエリパラメータを付与しましょう。
wp_enqueue_styleやwp_enqueue_scriptの各引数の意味を詳しく調べて見た
wp_enqueue_styleやwp_enqueue_scriptの各引数を調べてまとめてみました。よければ参考にどうぞ。
