CSSやjsを修正したのに、キャッシュが残っていてページに反映されないイライラを解決すべく、サイト作成・修正時にキャッシュの影響をうけないようにしたい!
やりたいこと
CSSファイルにクエリパラメータ(例:?20240123045600)を付けたい
こまったこと
ページ内に書くならこれ↓でもいいけど、全てのページに適用したいのでfunctionで読み込ませたい
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?ver=<?php echo date('U'); ?>">
解決したコード
通常、function.php でCSSを読み込むためには wp_enqueue_style を使って以下のように書きますが、
wp_enqueue_style('style', get_stylesheet_directory_uri().'/style.css');
cssファイルの更新時間を取得して、その時間をクエリパラメータとして付与します
wp_enqueue_style('style', get_stylesheet_directory_uri().'/style.css', false, filemtime(get_stylesheet_directory() . '/style.css'), false);
functionから書き出されたcssは
<link rel='stylesheet' id='style-css' href='https://⚪︎⚪︎⚪︎⚪︎⚪︎/wp-content/themes/⚪︎⚪︎⚪︎⚪︎⚪︎/style.css?ver=2830790820' media='' />
のようになります。
これでデザイナーやお客様から「何も変わってないんですけど?」と言われなくても済むのだぁ!