ブログ

ワードプレスでキャッシュに悩まされないぞ

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='' />

のようになります。

これでデザイナーやお客様から「何も変わってないんですけど?」と言われなくても済むのだぁ!