Web制作

【phpを利用】CSS、JSを更新したときにキャッシュクリアしないで常に最新ファイルを読み込ませる方法

Web制作をしていく中で、ローカル環境ではなくステージング環境や本番環境のCSSファイルやJSファイルを編集する、というケースがままある。
よくあるのが、「クライアントに確認してもらうためにステージング環境にサイトデータをアップした後に、CSS・JSを修正する」というケースだ。

こういったケースの際、修正した後もクライアントから「修正が確認できません」と連絡を受けること、誰しも経験あるのではなかろうか。
これはブラウザのキャッシュによるもので、更新前のCSS・JSの情報がクライアントのブラウザに読み込まれてしまっていることに起因する。
「ブラウザの閲覧履歴（キャッシュ）を削除して再度見てください」というだけで問題は解決するっちゃあするのだが、クライアントのリテラシーによっては閲覧履歴の削除方法から教える必要があったり、「閲覧履歴を消したくない」というクライアントが居た際、少しばかり難儀する。

phpを使ったパラメータ付与で対応をする

この問題を解決する簡単な方法は、上記の通り「phpを使ったパラメータ付与で対応をする」方法だ。
これを実施することで、キャッシュをクリアすることなく、いつでも最新のCSS・JSを読み込ませることが可能だ。

具体的な方法は以下の通り。
phpファイル上のCSS・JSを

【●●.php】

<link type="text/css" rel="stylesheet" href="style.css?<?php echo date('Ymd-Hi'); ?>">
<script type="text/javascript" src="scripts.js?<?php echo date('Ymd-Hi'); ?>"></script>

こんな感じにする。こうすることで、出力結果としては

【出力結果】
<link type=”text/css” rel=”stylesheet” href=”style.css?20220811-1312“>
<script type=”text/javascript” src=”scripts.js?20220811-1312“></script>

のような形になる。要するに、ページを開いた日時が「?2022~~~」という形でcss,jsファイルのURLにパラメータ付与される、という仕組みだ。
パラメータの数値が異なるたびに違うファイルだとブラウザは認識してくれるので、最新のCSS・JSが表示される、というわけだ。

もしWordPressでfunctions.phpでcss,jsを出力している場合、下記のように書けばほぼ同様の結果が得られると思う。

【functions.php】

function my_script_init()
{
wp_enqueue_style('my', get_template_directory_uri() . '/assets/css/style.css', array(), date('Ymd-Hi'), 'all');
wp_enqueue_script('my', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), date('Ymd-Hi'), false);
}
add_action('wp_enqueue_scripts', 'my_script_init');

CSS,JSのバージョンを記述する箇所に、「date(‘Ymd-Hi’)」と書いてあげればOK。（ここはphpタグで囲んだりechoをつける必要はない）

大した仕組みでは無いが、これをやっておくだけでクライアントとのやりとりや確認に要する時間が結構減るので、取り入れておいて損は無いと思う。



TOP