WordPressの子テーマでCSSとJavaScriptを即反映させる方法

WordPressで、CSSやJavaScriptを変更しても、既にページにアクセスしたことのあるユーザはキャッシュから読み込まれてしまうために、修正内容がすぐに反映されません。CSSやJavaScriptを読み込む際にファイル名の後ろにファイル更新日時をもとにしたバージョンを付加することで、即反映させることができます。

サンプル

functions.php

// CSS,JS読込
function my_wp_enqueue_scripts() {
  // CSS読込
  wp_enqueue_style( 'my-style', get_theme_file_uri( '/css/style.css') , array() , filemtime( get_theme_file_path( '/css/style.css') ) );

  // JS読込
  wp_enqueue_script( 'my-script', get_theme_file_uri('/js/script.js'), array( 'jquery' ), filemtime( get_theme_file_path( '/js/script.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_scripts' );

解説

filetime()

第4引数はバージョンでfiletime()にすることで、該当ファイルが更新されたら即反映されるようにできる

wp_enqueue_script

第5引数をtrueにするとフッター読込になる