Share

キャッシュしてますか！？私はキャッシュしています。でもファイルを更新したときはブラウザ側も更新してほしいですよね。

というわけでキャッシュを破棄する話です。今回はワードプレスのサイトでCSSファイルのみに限ってお話します。

HTMLでCSSを読み込む際にパラメータを付与することでブラウザに別のファイルであると認識させる、というのはよく知られたテクニックです。

//こんな感じ
<link rel="stylesheet" href="style.css">

//↑↓同じファイルだけど、ブラウザは別ファイルと認識する。
<link rel="stylesheet" href="style.css?20200904">

このように更新のたびにテンプレートに書いても実現できるんだけども手間だし忘れるかもしれない。というわけで自動化します。

ファイルの更新時刻を取得する filemtime という PHP の関数があります。
PHP: filemtime - Manual

これを利用してファイルに更新があれば自動的にパラメータも変更してくれるような仕組みにします。

php

$css_file_path = str_replace(home_url(), $_SERVER['DOCUMENT_ROOT'], get_stylesheet_uri());
$cachebuster = filemtime($css_file_path);

WPテンプレート

<link rel="stylesheet" href="<?php echo get_stylesheet_uri() . '?' . $cachebuster; ?>">