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メール必須
お名前(姓)必須
お名前(名)必須

講座・ワークショップ に参加する

2023-06-08
19:00 - 22:00
2023-06-17
11:00 - 12:30
2023-06-21
19:00 - 21:00
2023-06-23
19:00 - 22:00
2023-06-25
10:00 - 12:00
2023-07-01
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

1976年大阪生まれ。鳥取大学大学院博士課程(専門は乾燥地農業)を中退後、零細企業の立ち上げに関わり、スタッフ育成・社内ITならびにWEBシステム開発を担当。6億円の受注プロジェクト案件をまとめる。2011年に過労にて就労禁止(双極性障害)の診断を受け、生き方を見つめなおす。双極性障害を克服し、2014年からフリーランスにてWEB・ITコンサルにてWordPressを得意とした活動を行い、1,200名を超えるコンサル実績を持つ。その中で2009年から書き続けているブログは、4,100記事を超え、2016年には月間65万PVを達成した。2018年に法人化し”株式会社あみだす”となる。現在は、コンサルタントに加えて、自己受容と自己理解を広げ、誰もがそのままで命を輝かせるトランスパーソナル心理学をベースとしたカウンセラーとして”心が通う組織づくり”の支援(企業内コミュニケーション改善コンサルティング)を中心に活躍中。


株式会社 あみだす 代表取締役/岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年)/ ブロガー / WordPress & Woocommerceが得意 / 親指シフト歴11年/ orz レイアウト開発者

サービス提供領域

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

お仕事のご依頼はこちら

WEB・ITコンサルティング

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

公式LINE

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

友だち追加

【案内板】

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

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

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


カテゴリー 一覧