【PHP】外部CSSやJSのブラウザキャッシュ対策

CSSやJSファイルを更新したのに「えぇ～何も変わってないよ。。」→「ブラウザのキャッシュかと…」というやり取りはあるあるかと思います。

そのような場合、読み込みの際ファイル末尾に?ver=201701011234といったようなタイムスタンプ（ちなみにタイムスタンプという決まりはありません…）のパラメーターを追記する事により、対策することができます。

<!-- キャッシュ対策前 -->
<link rel='stylesheet' id='style-css'  href='style.css' type='text/css' media='all' />
<script type='text/javascript' src='main.js'></script>

<!-- キャッシュ対策後 -->
<link rel='stylesheet' id='style-css'  href='style.css?ver=201701011234' type='text/css' media='all' />
<script type='text/javascript' src='main.js?ver=201701011234'></script>

ここからがいよいよPHPのお話になるのですが、PHPにはfilemtime()という関数があり、カッコ内にファイル名をパス（URL形式はNG）で指定することによりそのファイルの最終更新日を取得できるのです。
今回はWordPressのwp_enqueue_style()やwp_enqueue_script()で読み込んだ場合を例に、コードサンプルにしてみます。

// キャッシュ対策前
wp_enqueue_style( 'style', get_stylesheet_uri(), array(), NULL );
wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js, array(), NULL, true );

// キャッシュ対策後
wp_enqueue_style( 'style', get_stylesheet_uri().'?ver='.filemtime( TEMPLATEPATH.'/style.css' ), array(), NULL );
wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js?ver='.filemtime( TEMPLATEPATH.'/js/main.js' ), array(), NULL, true );

パスで指定する必要があるのでTEMPLATEPATHという、テーマのパス名を返してくれる定数を使用していますね。

filemtime()で返り値となる最終更新日はUnixタイムスタンプ形式となりますので、見栄えが気になる方はdate()でフォーマット形式を変えるといいですね！