ワイヤード・パンチ

WordPressで、CSSとJavascriptをキャッシュさせない方法。

サイトに使用しているCSSとJavascriptを編集して、その出来栄えを実際に確認するとき、何度もブラウザをリロードすることになるでしょう。

しかし、CSSとJavascriptは、単純にリロードを実行しても更新されないことが多々あります。

PCで見ているときはCtrl+F5でリロードすると反映されるのですが、スマホだとその機能が使えないので厄介です。

広告

CSSとJavascriptを再読み込みする方法。

ただ単にCSSとJavascript(以下JS)を編集したあとに、ページのリロードを行っても、編集が反映されない場合があります。

そのときは、先述のとおりPCのブラウザの場合、今回はChromeになりますが、Ctrlを押しながらF5キーを押すことで、編集内容がちゃんと反映されたページを読み込むことができます。

ところが、それができるのはPCだけ。

同じChromeであって、スマホにはCtrlキーもF5キーもありません

かといって、画面右上の三点リーダのメニューを開いてみても、ページの更新を表す「↻」アイコンはあるものの、これで完全な再読み込みを実行できるわけではありません。

つまり、一度ページを開いてCSSとJSがキャッシュされてしまうと、サーバ側でCSSとJSが更新されたとしても、端末側に残っている古いCSSとJSが読み込まれてしまいます。

サイト制作中は頻繁に出来栄えを確認することになるのに、これではテストになりません。

それならばどうやってテストするかというと、キャッシュクリアかあるいはシークレットタブを使います。

しかし、キャッシュクリアをしてしまうと、サイトにログインしている情報なども消えてしまいます

そうなると、いろんなサイトを利用していた場合、再度ログインするのが非常に面倒です。

一方で、履歴を残さないシークレットタブで見た場合も、キャッシュがない状態でページを見ることができ、なおかつ通常のタブのキャッシュは残ったままになります。

でも、キャッシュがない状態で見るということは、その間ログイン情報が消えており、なおかつシークレットタブで行ったログインはあとで全て消えるので、結局ログインし直しが面倒です。

CSSとJSのキャッシュだけ残させない方法。

CSSとJSだけページを開くたびに編集が反映されているようにしたいけど、ログインされている状態は消したくない

そのような状況を実現したい場合、CSSとJSの名前が毎回別物に変わるようにすればOKです。

キャッシュされるのは同じファイルのときなので、新しいファイルならば前のキャッシュは関係ありません。

しかし、ファイルを編集するたびに、読み込み先をいちいち新しいファイルに変えるのは、あまりにもめんどくさすぎます。

よって同じファイル名でも別ファイル扱いにさせるには、phpの機能を使って、毎回異なる値をURLパラメータにつけてあげるようにすれば可能です。

実際のファイル名は同じであっても、URLパラメータが変わっている場合は、別のファイルだとみなされて、前のキャッシュは使われないようです。

下記がそのためのコードです。また、今回はWordpressを使った環境で行うため、functions.phpにCSSとJSを読み込む処理を追加します。

add_action("wp_enqueue_scripts", function() {
	wp_enqueue_style("style", get_template_directory_uri() . "/style.css?date=".date_i18n("U"));
	wp_enqueue_script("script", get_template_directory_uri() . "/script.js?date=".date_i18n("U"));
});

CSSとJSのURLパラメータとして、UNIXタイムの現在時刻を付加しています。

UNIXタイムといえば、1970年1月1日から現在までに経過した秒数を表した数値なので、1秒経てばもう決して重複することのない数値となります。

よって、決して重複しない数値を毎回ページ読み込み時に付け足すことで、CSSとJSがキャッシュされることを防いでいます。

また、1秒間の間に連続でリロードすれば、いちおう値は重複するのでキャッシュされたものを読み込むことになりますが、さすがにそんなマネはしないでしょう。

ところで、よく考えたら毎回重複する恐れのほぼない値にするなら、桁数を多くしたmt_randでも良かったですね。

add_action("wp_enqueue_scripts", function() {
	wp_enqueue_style("style", get_template_directory_uri() . "/style.css?date=".mt_rand(10));
	wp_enqueue_script("script", get_template_directory_uri() . "/script.js?date=".mt_rand(10));
});

なお、先程のようにパスにパラメータ直書きでも動かないことはないのですが、コードが横に長くなりすぎると、どこで何をしているのかわかりづらくなります。

URLパラメータを付加するための関数を使って、その関数で得られた値を、CSSとJSの読み込みパスにする方が、見栄えの良いコードでしょう。

add_action("wp_enqueue_scripts", function() {
	$args = [
		"date" => date_i18n("U"),
	];
	$css_url = add_query_arg($args, get_template_directory_uri() . "/style.css"));
	$js_url = add_query_arg($args, get_template_directory_uri() . "/script.js"));
	wp_enqueue_style("style", $css_url);
	wp_enqueue_script("script", $js_url);
});

横に長くなりすぎないコードであるため、どこか途中でエラーが起きた場合、どの場所でエラーが起きたか、デバッグしやすくなります。

余談ですが、上記のコードで配列[]には要素が1つしかないので、一番目の要素が最後の要素ということになります。

その最後の要素の末尾に、要素を区切るためのカンマをつけていますが、これで特にエラーにはなりません。

もし、この後ろに新たに要素を追加する場合、うっかりカンマを消したままにしているとエラーになってしまうので、最後の要素であってもカンマを付けたままにしておくことをおすすめします。

いわゆるケツカンマに対しては、以前の記事にも書いています。

phpで配列変数を作成するとき、最後尾のカンマを付けるメリット。 – ワイヤード・パンチ

キャッシュさせないコードの注意点。

これでCSSとJSが毎回新しいものを読み込めるようになるため、Ctrl+F5ができないスマホでも、単純にページをリロードするだけでCSSとJSの編集が反映されます。

ただし、毎回新しいCSSとJSが読み込まれるようになるということは、その分データ通信が行われているということ。

サイトを制作するうえでは、スマホであっても自宅や社内のwi-fiを使って通信するので、通信量は気にしないでしょう。

しかし、外から利用することがあるユーザに対して、CSSとJSを毎回読み込みさせていては、利用してきたデータ通信量が蓄積されていきます。

テキストデータなので、いくらサイズの小さいCSSとJSであっても、チリとつもれば何とやら。

あまり何度も更新しているとデータ通信制限にひっかかる恐れがあるので、本番環境ではキャッシュ無効化手段を使わない方がいいでしょう。