CSSとかJSとか修正してブラウザリロードしても修正が反映されない、を解決する

なにもWordPressに限ったことではありませんが、サイトの修正でソースを変更したらリロードして見ますよね。
ただ、なぜかなかなか修正が反映されてくれないときってあります。
ブラウザにキャッシュが残っていていくらリロードしてもどうもそのキャッシュを読んでしまっているようだ、というとき。
CSSやJSのときが多いのですが、たいていはスーパーリロードすればキャッシュクリアしてリロードしてくれます。

Mac版Chromeだと
Cmd + Shift + R

Windows版Chromeだと
Shift + F5

です。

ただ、結構お客さんによってはそういうことを忘れてしまうか知らない方がいて、「修正したっていうけど、変わってないよ？」と言われるたび上記の情報をお伝えするのですが、これがちょい手間です。

だったら、そんなことしなくて済むようにしましょう。
ブラウザに違うファイルだと認識させればいいので、
こんなふうにURLの末尾にクエリを付けてあげます。

<link rel="stylesheet" type="text/css"  href="/assets/css/style.css?20170823030031">

これを自動でできるようにテーマのfunctions.phpにファイルの日付を取得するプログラムを記述します。

function file_date($filename){
	if (file_exists($filename)) {
		return date('YmdHis', filemtime($filename));
	}
}

そして、header.phpとかでCSSを読んでいるところの以下のように書き直します。

<link rel="stylesheet" type="text/css"  href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css?<?php echo file_date(get_template_directory() . '/assets/css/style.css'); ?>">

これで、リロードすればちゃんと修正した内容がブラウザに反映されているはずです。

---