CSSファイル更新時【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も同じ仕組みで、キャッシュクリアを実装できる。参考記事のリンク先を参照してほしい。

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-10-13 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 10月13日
詳細・お申し込みはこちら

2022-10-14 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-10-21 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 10月21日※10月は第3金曜日
詳細・お申し込みはこちら

2022-10-22 11:00 – 12:00
オンライン【あみだす発酵アカデミー】手作り濃口醤油仕込みクラス+年間サポート付き
詳細・お申し込みはこちら

2022-10-22 14:00 – 15:15
オンライン「”料理が面倒な人のための”クラス」発酵調味料でパパっとメイン1品+作り置き3品
詳細・お申し込みはこちら

2022-10-23 11:00 – 12:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。