こちらの記事の続きです。

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

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

HTML・CSS (手動)

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

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

CSSの中で使う場合はこんな感じ。

.img {
  background-image: url(example.jpg?ver=12345);
}

WordPress・PHP

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

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

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

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

functions.phpから、子テーマに更新時刻を反映させる場合はこんな感じでしょうか。

function 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',
       array('parent-style'),
       date("ymdHis",filemtime( get_stylesheet_directory().'/style.css'))
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

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

<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") }}">	

EC-CUBEのテンプレートタグについての記事を書きました。こちらも参照下さい。

インラインで書かれたコードへの対応アイディア

例えば、<head>内に直接記述したCSSなどの場合です。
あくまでアイディアベースですが、メモとして幾つか羅列してみます。

  • コードを外部ファイルに移動させる。
    ※インラインにした理由があると思うので、正直どうかとは思う。
  • .htaccessで、HTMLファイル自体のキャッシュを制御する(Cache-Controlヘッダー)。
    ※あまりこの方面に詳しくないので各自深掘りしてほしい。
<filesMatch ".(html|htm|js|css)$">
   Header set Cache-Control "no-cache, no-store, must-revalidate"
   Header set Pragma "no-cache"
   Header set Expires 0
</filesMatch>
  • ページを強制的にリロードするスクリプトを埋め込む。
    ※ブラウザキャッシュにどれだけ有効か少し不安。
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 現在のURLにフラグメント識別子(#)が含まれていない場合のみ処理を実行
    if (document.URL.indexOf("#") === -1) {
        // 現在のURLの最後に#を追加(この行は実際には何もしないので、実際の動作には影響しない)
        let url = document.URL + "#";
        // location変数に#を代入(この行は実際には何もしないので、実際の動作には影響しない)
        let location = "#";
        // 現在のページをリロード
        window.location.href = window.location.href;
    }
});
</script>

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

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

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

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

コメントを残す

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