CSSファイル更新時【WordPress】キャッシュ対策クエリパラメータを付ける

2020年4月1日

2020年3月19日

大東信仁（ものくろ）

WordPressノウハウ

WordPressブログを運用しているときに、CSSファイルを書き換えたのに、ブラウザーで確認すると反映されない。

クライアントさんや読者さんから「変わらないよ」と言われたときに、ブラウザーキャッシュを削除してもらうより、良い方法がある。

それが、このCSSファイルにクエリパラメータを付ける設定を行うこと。

クエリパラメータ

クエリパラメータとは、何か？以下のようなURLを見たことがないだろうか？

https://mono96.jp/example?s=keyword

このURLの最後に「ハテナから始まる文字列」が付いている場合がある。これがクエリパラメータだ。

クエリパラメータは、URLに対して、特定の値を送信することができる。上のサンプルだと、「keywordで検索せよ」（本当は、そうは言い切れないけど、説明の都合上、言い切る）になる。

CSSファイルに対して、クエリパラメータを付けても、基本的には、CSSファイルがそれを受け取ることはないが、キャッシュ機能から見ると、クエリパラメータが違う = （ファイル名が同じでも）ファイルが違う と認識される。

この仕組みを使って、キャッシュをクリアできる。クエリパラメータを手動で作ると、作業が増えるので、ファイルの更新日時（タイムスタンプ）から、パラメータを自動生成する。

header.phpのケース

Qiitaの記事が参考になった。

テーマ直下のstyle.css

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?<?php echo filemtime( get_stylesheet_directory() . '/style.css'); ?>" >

サブディレクトリのstyle.css

<link rel="stylesheet" href="<?php get_stylesheet_directory_uri(); ?>/css/example.css?<?php echo filemtime(get_template_directory() . '/css/example.css'); ?>">

子テーマ（functions.php）のケース

wp_enqueue_style()関数には、第四引数に”バージョン”のパラメータが指定できる。こちらの記事が参考になった。

function my_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('parent-style'));
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

プラグインのケース

こちらの記事が参考になった。考え方は、functions.phpと同じ。

wp_enqueue_style( 'style',
    plugins_url( '/css/style.css', __FILE__ ),
    array(),
    date_i18n( 'YmdHis', filemtime( plugins_url( '/css/style.css', __FILE__ ) ) )
);

JavaScriptでも同じ仕組みでキャッシュをクリア

JavaScriptも同じ仕組みで、キャッシュクリアを実装できる。参考記事のリンク先を参照してほしい。