Tweet

Pocket

前回の記事「簡単5秒！もう強制リロードなんていらない！CSSにクエリを追加してキャッシュをクリアにする方法」では、CSSの読み込みのURLにクエリを追加して、「手動」でCSSのキャッシュをクリアにする方法をご紹介いたしました。

前回の記事を読む

簡単5秒！もう強制リロードなんていらない！CSSにクエリを追加してキャッシュをクリアにする方法

今回は、その「手動」でクリアしていたCSSのキャッシュを、PHPを使って「自動」でクリアにしていく方法をご紹介していこうと思います。

• 毎度修正の度にCSSのクエリを手動で更新するのが面倒だ
• CSSのキャッシュが残ってしまうせいで、デザインが古いまま表示されてしまう

実装方法

まずは、説明の前にどのような実装なのか見ていただきたいと思います。

<link rel="stylesheet" href="style.css?<?php echo date('YmdHis'); ?>" type="text/css">

前回の記事でstyle.cssの後ろに「?1111(お好きな数字)」を入れたのですが、それの代わりに、「?<?php echo date(‘Ymd-Hi’); ?>」を入れるだけなのです。

<?php echo date(‘YmdHis’); ?>の説明

このPHPで取得されるのは「Y=年数」「m=月」「d=日」「H=時間」「i=分」「s=秒」です。

つまり、CSSのアップロードした時間が2020年4月1日 00時00分00秒であれば、クエリは「?20200401000000」と自動で書き出されるのです。

このようにPHPで自動で日時を取得し、クエリの数値を更新することにより、ファイルをアップロードする度にスタイルシートが新しいファイルであるとブラウザ認識させることができます。

そのため、新しいファイルとしてCSSを読み込むため、古いままのCSSを表示することなく新しいCSSを読み込んで表示させてくれるのです。

いろんな書き方の例

今回YmdHis全てご紹介したかったので全部盛り込みましたが、必要な数字を取得するようおすすめします。

以下書き方の一例になります。

?<?php echo date('YmdH'); ?>

はき出されるクエリは「?2020040100」です。

?<?php echo date('Ymd-Hi'); ?>

はき出されるクエリは「?20200401-0000」です。

?<?php echo date('Ym_Hi'); ?>

はき出されるクエリは「?202004_0000」です。

まとめ

いかがでしたでしょうか。
このPHPを利用して、もう強制リロードに悩まない生活を送りましょう！