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メール必須
お名前(姓)必須
お名前(名)必須
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

博士課程中退 / WEB・ITコンサルタント(業界歴 9年以上) / 岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年) / ニックネーム : ものくろ / ブロガー / WordPress & Woocommerceが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

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

2023-01-07 09:30 – 19:30
2023年1月7日 18きっぷを楽しむ1日
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

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

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】イカの塩辛作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-18 19:00 – 20:30
あみだすマインドフルネス 瞑想会
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

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

2023-01-28 14:00 – 17:30
”職場のコミュニケーションが良くなる”働く人のための傾聴講座 3回連続講座
詳細・お申し込みはこちら

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

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

【案内板】

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

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

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


カテゴリー 一覧