【WordPress】自動でCSS・JSファイルのキャッシュをクリアする
CSSを更新してブラウザで確認すると変更が反映されていない、ということがあります。
ブラウザのキャッシュが原因のことがほとんどなので、キャッシュをクリアすればよいのですが、クライアントワークだったりすると「ブラウザのキャッシュをクリアしてください」と毎回お願いするのも手間をかけさせてしまいますし、そもそもブラウザのキャッシュがなんなのかわからないという方にやり方を説明するのも大変。
なので自動でキャッシュをクリアするように設定しておきます。
ファイル更新日のタイムスタンプでバージョンを常に最新にする
wp_enqueue_style() でCSSやJSのファイルを指定すると、自動的にパラメータでバージョンが出力されます。
WordPress6.1.1を使っていたらこんな感じ。
<link rel='stylesheet' href='https://example.com/wp-content/themes/テーマ名/style.css?ver=6.1.1' media='all' />キャッシュされているファイルより新しいバージョンになっていると認識すると、ブラウザが新しいファイルを読み込み直してくれます。
バージョンをファイルの更新日時にすることで、常にバージョンが最新になるので、ファイル更新後は自動的にキャッシュがクリアされて変更が反映されるようになります。
テーマ直下にあるstyle.cssの場合、wp_enqueue_style() のバージョンの部分に filemtime( get_theme_file_path( ‘/style.css’ ) ) と指定するとパラメータにstyle.cssファイルの更新日時が差し込まれるようになります。Unixタイムスタンプから西暦年月日時分秒の形式に変更する場合はdate()で。
CSSファイルのキャッシュを自動クリア
function add_stylesheet() {
wp_enqueue_style( 'style', get_stylesheet_uri(), array(), date( 'YmdHis', filemtime( get_theme_file_path( '/style.css' ) )) );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );<link rel='stylesheet' id='style-css' href='https://example.com/wp-content/themes/テーマ名/style.css?ver=20221207071907' media='all' />JavaScriptファイルのキャッシュを自動クリア
同じ方法でJSファイルもいけます。
function add_scripts() {
wp_enqueue_script( 'script', get_theme_file_uri( '/js/script.js' ), array(), date( 'YmdHis', filemtime( get_theme_file_path( '/js/script.js' ) )), false );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );<script src='https://example.com/wp-content/themes/テーマ名/js/script.js?ver=20221207071907' id='script-js'></script>