Topics インフォコネクト最新情報

【filemtime関数】CSS・JSファイルのクエリパラメータに「ファイルの更新日時」を設定して更新した時だけキャッシュをクリアさせる方法

2023.04.20

Webの豆知識

インフォコネクトWebの豆知識

この記事は公開から1年以上経過しています。

こんにちは、チーフクリエイターのSHOJIです。
前回、ファイルの拡張子の後ろにクエリパラメータを追加することで更新した時だけキャッシュをクリアさせる方法についてご紹介しました。

CSS・JSにクエリパラメータを追加して、更新した時だけキャッシュをクリアさせる方法 | インフォコネクト株式会社

URLhttps://info-con.co.jp/tips/cacheclear-query-parameter

基本的に、クエリパラメータは更新日や実際のバージョン数などを記述するだけで良く、数字や「.」を使った任意の文字列で構わないので利用しない手はありません！

ですが、長く使い続けていると「ファイルを更新するたびにクエリパラメータを修正するのが面倒くさい」と感じてくるものです。

そこで今回は、PHPを利用して「ファイルの更新日時」を取得し、その情報をクエリパラメータに付与することで、修正の手間を省くと同時にキャッシュの維持・更新まで勝手にやってくれる方法をご紹介したいと思います。

\\　目次　//
filemtime関数
実装方法
あとがき

filemtime関数

PHPを利用してファイルの更新日時の情報を取得するには「filemtime関数」を使います。

filemtime関数で取得する情報は「Unixタイムスタンプ」と呼ばれる1970年01月01日00時00分00秒からの秒数を数値で返します。

例えば、ファイルの最終更新日時が「2023年02月15日11時39分05秒」だった場合、filemtime関数で返される数値は「1676428745」となります。

このように、filemtime関数によって取得されたファイルの更新日時情報であるタイムスタンプを、ファイルのクエリパラメータとして付与してあげることで、修正の手間が省けるというわけです！

実装方法

ここでは、WordPressサイトを例にして見ていきます。

テーマディレクトリ直下のCSSを読み込む場合

テーマディレクトリ直下のCSSを読み込む場合、

＜link rel="stylesheet" type="text/css" href="＜?php echo get_stylesheet_uri(); ?＞"＞

のように記述されていると思いますが、filemtime関数を利用すると、

＜link rel="stylesheet" type="text/css" href="＜?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?＞"＞

のように記述でき、実行されることによって「･･･/themes/〇〇〇/style.css?1676428745」などと表示されます。

テーマディレクトリ内別階層のJSを読み込む場合

テーマディレクトリ内別階層のJSを読み込む場合、

＜script type="text/javascript" src="＜?php echo get_template_directory_uri(); ?＞/js/common.js"＞のように記述されていると思いますが、filemtime関数を利用すると、

＜script type="text/javascript" src="＜?php echo get_template_directory_uri(); ?＞/js/common.js?＜?php echo filemtime( get_template_directory() . '/js/common.js'); ?＞"＞

このように記述でき、実行されることによって「･･･/themes/〇〇〇/js/common.js?1676428745」などと表示されます。