[WordPress]CSSとJSファイルを更新したらすぐに反映させるようにする

CSSファイルやJSファイルの中身を書き換えても、クライアントでキャッシュされていて、すぐに反映されないことになります。

スーパーリドード（ChoromeだとCtrl+F5）でキャシュは解消されて変更が反映されますが、すでに運用中などサイト閲覧者にもすぐに反映されるようにしたい場合はどうすればいいか、という話。

通常、スタイルシートの指定は、

<span><link </span><span class="html-attribute-name">rel</span><span>='</span><span class="html-attribute-value">stylesheet</span><span>' </span><span class="html-attribute-name">id</span><span>='</span><span class="html-attribute-value">style-css</span><span>' </span><span class="html-attribute-name">href</span><span>='</span><a class="html-attribute-value html-resource-link" target="_blank" href="https://hananoheya.com/wp-content/themes/welcart_hananoheya2/style.css?ver=20171116" rel="noopener noreferrer">http://hoge.jp/wp-content/themes/sample/style.css</a><span>' </span><span class="html-attribute-name">type</span><span>='</span><span class="html-attribute-value">text/css</span><span>' </span><span class="html-attribute-name">media</span><span>='</span><span class="html-attribute-value">all</span><span>' /></span>

のようにしますが、ファイル名の指定のところで、?var=20171116のようにクエリを追加することで、別ファイル扱いとなり、キャシュされ直される、みたいなことのようです。

<span><link </span><span class="html-attribute-name">rel</span><span>='</span><span class="html-attribute-value">stylesheet</span><span>' </span><span class="html-attribute-name">id</span><span>='</span><span class="html-attribute-value">style-css</span><span>' </span><span class="html-attribute-name">href</span><span>='</span><a class="html-attribute-value html-resource-link" target="_blank" href="https://hananoheya.com/wp-content/themes/welcart_hananoheya2/style.css?ver=20171116" rel="noopener noreferrer">http://hoge.jp/wp-content/themes/sample/style.css?ver=20171116</a><span>' </span><span class="html-attribute-name">type</span><span>='</span><span class="html-attribute-value">text/css</span><span>' </span><span class="html-attribute-name">media</span><span>='</span><span class="html-attribute-value">all</span><span>' /></span>

ということでCSSファイル名にバージョンをクエリで追加することになるのですが、いちいちバージョン名を書き換えるのは面倒なので、ファイルの更新日をfilemtime()関数で取得して追加することにしました。

こんな感じで。

function my_scripts(){
	//style.cssのファイル更新日を取得
	$date =  date("Ymd" , filemtime(get_stylesheet_directory() . '/style.css'));
	//style.cssを「?ver=日付」つきで出力
	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/style.css',false,$date);
	//responsive.jsのファイル更新日を取得
	$date =  date("Ymd" , filemtime(get_stylesheet_directory() . '/responsive.js'));
	//responsive.jsを「?ver=日付」つきで出力
	wp_enqueue_script( 'responsive-jquery', get_stylesheet_directory_uri() . '/responsive.js', array(), $date, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 10 );

function my_scripts(){

//style.cssのファイル更新日を取得

$date = date("Ymd" , filemtime(get_stylesheet_directory() . '/style.css'));

//style.cssを「?ver=日付」つきで出力

wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/style.css',false,$date);

//responsive.jsのファイル更新日を取得

$date = date("Ymd" , filemtime(get_stylesheet_directory() . '/responsive.js'));

//responsive.jsを「?ver=日付」つきで出力

wp_enqueue_script( 'responsive-jquery', get_stylesheet_directory_uri() . '/responsive.js', array(), $date, true );

}

add_action( 'wp_enqueue_scripts', 'my_scripts', 10 );