PHPを使ったWrodPressなどでCSSやJSファイルを更新した時だけキャッシュをクリア

Webサイトに関係するファイルのキャッシュについては。Webページの表示速度にも関わってくるところですので、サーバ側やhtaccessファイルでキャッシュの設定を行うこともあります。
しかし、サーバのキャッシュを設定することで不便になるのが、Web制作や開発の時、よくあるCSSやJSファイルを更新してサーバにアップロードした際のキャッシュ問題でしょう。

更新したはずなのに、実際に公開されたサイトに反映されていない、更新内容によってはデザインの表示崩れやプログラムが動かないなどのトラブルが起こります。

PHPを利用したWebサイトでは、サーバサイドでファイルの更新を確認できますので、これを利用して対象のファイルの更新情報をサーバに伝えます。

代表的なものでは、WordPressがPHPで構築されています。
静的HTMLサイトでもPHPスクリプトを利用して構築していけば、この問題が簡単に解決します。

PHPでキャッシュをクリア

PHPでのキャッシュクリアでは、filemtime関数を利用していきます。

filemtime関数は、ファイルの更新日時に関する情報を取得することができます。
Unixタイムスタンプ（1970年1月1日0時からの秒数）を返しますので、「1580302282」のような数値を取得します。
この更新日時をCSSやJSファイルのタイムスタンプとして追加することで、別のファイルという認識になりますので、これで更新されたCSSやJSファイルのキャッシュクリアとなります。

まずはWordPressを例に見ていきます。

テーマフォルダの直下にCSSを置いている場合は、以下のように読み込んでいると思います。

または、

こちらを、filemtime関数を利用してファイルのパラメータにタイムスタンプを追加します。
filemtime関数のパラメータはファイルへのパスになります。

filemtime( ファイルへのパス );

テーマフォルダのCSSの出力の後に、echoでクエッションマーク（ ? ）を付けながらfilemtime関数を出力します。

上記のPHPスクリプトが実行されると、以下のようにタイムスタンプが追加されます。

…/themes/〇〇/style.css?1580302282

これで、ファイルを更新した時にタイムスタンプが変わるので、更新ファイルだけのキャッシュクリアとなります。

テーマフォルダの中の一階層したのCSSフォルダの中で、いくつかのCSSファイルを管理していることもあるでしょう。
複数のファイルを読み込む場合でも、同じようにファイルパスを正しく指定すればOKです。

JSファイルの場合でも、同じようにfilemtime関数でタイムスタンプを追加して管理します。

静的HTMLサイトでPHPスクリプトを利用している場合も、ファイルパスの指定を合わせるだけとなります。
ファイルパスの末尾にクエッションマーク（ ? ）をつけて、その後にPHPスクリプトでfilemtime関数を実行します。

JSファイルも同じです。

Webサイトでは、サーバ側のキャッシュの設定が表示速度に関わってくるので、キャッシュの設定をゆるくもできないし、かといってファイル更新の反映が遅れるのも困るものです。

PHPスクリプトを利用することで、簡単に更新ファイルだけキャッシュクリアできます。
filemtime関数はとても便利な関数です。

是非利用して、Webサイトの管理をおこなっていってください。