ここで紹介するのは、あくまでアイディアの一例です。
なので、開発ツール・言語・フレームワークなどご自身の事情にあわせて適宜調整して下さい。
少しでもキャッシュで困っている方へのヒントになれば幸いです。

新たに見つけたり思いついたら、順次追記していきます。

手動(HTML)

まずは基本系として、プレーンなHTMLでの方法です。
例として、style.css の内容を変更したら手作業でクエリを書き換えてみます。
以下でご紹介する方法の出力例がこんな感じになりますね。

<link rel="stylesheet" href="style.css?ver=12345">

WordPress・PHP

スタイルシートを読み込む際に、PHPの関数を使って現在の時間を読み込んでみます。

<link rel='stylesheet' href='<?php bloginfo('stylesheet_url');?>?ver=<?php echo date("His") ?>'/>

functions.phpから、テーマのバージョン番号を読み込むならこんな感じでしょうか。

wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

試しにカスタムフィールドでもやってみます。

<link rel='stylesheet' href='<?php bloginfo('stylesheet_url');?>?ver=<?php the_field('カスタムフィールド名'); ?>'/>

PHP

date関数で現在の時間を読み込んでみます。
WordPressの1例目とほぼ同じです。

<link rel='stylesheet' href='style.css?ver=<?php echo date("His") ?>'/>

filemtime関数でファイルの更新時刻を読み込んでみます。

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

JavaScript

色々と制約がある場合にはJavaScriptでも良いのかも。あまり好きでは無いですが…。

const now = new Date()
const y = "" + now.getFullYear();
const m = ("00" + (now.getMonth()+1)).slice(-2);
const d = ("00" + now.getDate()).slice(-2);
document.write(`'<link rel="stylesheet" href="style.css?${y+m+d}">`);

【参考】
javascriptでcache-bustingを自動化する方法
https://ja.stackoverflow.com/questions/43918/javascriptでcache-bustingを自動化する方法

EC CUBE4 (twig)

管理画面で「キャッシュ削除」も忘れずに。

<link rel="stylesheet" href="style.css?{{ "now"|date("His") }}">	

SCSS(CSS内のパスにクエリを追加)

CSS内のリンクにクエリを追加してみても良いですね。

【参考】
Sass unique-id
https://sass-lang.com/documentation/modules/string#unique-id

1 件のコメントが “Cache Busting(キャッシュバスティング)の具体例” にあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です