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を置いている場合は、以下のように読み込んでいると思います。

従来の読み込みパターン1
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">


または、

従来の読み込みパターン2
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">



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

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



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

filemtime関数の利用
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">



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

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



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

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

変更前
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style02.css">
変更後
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style02.css?<?php echo filemtime( get_stylesheet_directory() . '/css/style02.css'); ?>">



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

変更前
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
変更後
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/main.js?<?php echo filemtime( get_template_directory() . '/js/main.js'); ?>"></script>




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

変更前
<link rel="stylesheet" type="text/css" href="css/style.css">
変更後
<link rel="stylesheet" type="text/css" href="css/style.css?<?php echo filemtime( 'css/style.css' ); ?>">



JSファイルも同じです。

変更前
<script type="text/javascript" src="js/script.js"></script>
変更後
<script type="text/javascript" src="js/script.js?<?php echo filemtime( 'js/script.js' ); ?>"></script>




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

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

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