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

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

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

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

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

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

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

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

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」などと表示されます。
 

あとがき

ブラウザキャッシュを活用しサイトレスポンスを向上させることは、SEOの観点からみても有効な手段なのですが、上手く使いこなさなければWebページが正しく表示されないなど悪影響を及ぼす可能性があります。

例えクエリパラメータを更新して自動的にキャッシュクリアしていたとしても、その修正を手作業で行っていれば手間も掛かってしまいます。

今回ご紹介したように、filemtime関数を利用して「ファイルの更新日時」情報を取得し、その情報をクエリパラメータに付与することで、自身の修正の手間を省けるとともにキャッシュの維持更新ができるようになるのでおすすめです。

ぜひ参考にしていただければと思います。
 

Webの豆知識]関連記事

Service

Contact

インフォコネクトに相談してみませんか?

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください