[php]常に最新のCSS/JSファイルを読み込ませる方法

Webページを開いたときに読み込み速度をあげてくれるキャッシュ。その反面、更新したのにいつまでも古いファイルを参照し続けてしまいトラブルともなるキャッシュ。

CSSファイルを更新したら閲覧者にブラウザのキャッシュをクリアしてもらえばいいのですが、不特定多数のひとに公開しているサイトだとそういうわけにもいきません。

この問題を解決する方法が、ファイルのパスの最後に？＋パラメーターを追加する方法です。パラメーターの値が変わることで、ブラウザは別のファイルだと思ってキャッシュを使わずにファイルを参照しなおしてくれます。

毎回最新のファイルを参照する（キャッシュを利用しない）

time()という関数を使います。こうすることで毎回違うパラメーターがつくので、webページを開くたびに最新ファイルを参照してくれます。

<link href="/style.css?<?php echo time() ?>" rel="stylesheet" type="tex/css" media="a>

任意のタイミングで最新のファイルを参照する

最新ファイルを見てもらいたいときにだけパラメーターの値を手で書き換えます。

<link href="/style.css?****" rel="stylesheet" type="text/css" media="all" />

ファイルが更新されたときにだけ最新のファイルを参照する

filetime()という関数を使います。これはファイルの更新時刻を取得してくれる関数なので、ファイルが更新された場合だけこのパラメーターの数字が変わるという仕組みです。

<link href="/style.css?<?php echo filemtime('stylesheet') ?>" type="text/css" media="all" />

例えばこれをWordPressのfunctions.phpに記述する場合は、下記のように書くことができます。

function load_css() {
  $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
  wp_enqueue_style( 'child-theme-style', get_stylesheet_uri(),array(), $timestamp );
}
add_action( 'wp_enqueue_scripts', 'load_css', 11);