WordPressでCSSを更新しても反映されない！ブラウザキャッシュが原因？

WordPressで修正作業をしていたところ・・・style.cssを編集してFTPでアップロードしたのに反映されない！このような現象がおこりましたので原因を調査してみました。

原因はブラウザのキャッシュ

Chrome、Firefox、Safariなどのブラウザには、サーバーの負荷を減らすために「キャッシュ」という機能があります。
この機能は、一度アクセスしたファイルをブラウザ側で保持することができるので、サーバー側にファイルを読み込みにいく必要がありません。
よってサーバーの負荷を減らすことができるので、Webサイトの表示速度がアップするのです。

しかしWebサイトを開発中の場合は、頻繁にファイルを更新するので、このキャッシュ機能が邪魔になることがあります。

更新をすぐに反映させるためには？

PHPの関数で「filemtime」というパラメーターがありますので、こちらを使用して解決したいと思います。
CSS以外にも、JavaScriptやimgのファイルを読み込むときにも使用できます。以下のコードでファイルの読み込みを行ってみてください。

CSS

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css<?php echo '?' .filemtime( get_template_directory() . '/css/style.css'); ?>">

JavaScript

<script src="<?php echo get_template_directory_uri(); ?>/js/init.js<?php echo '?' .filemtime( get_template_directory() . '/js/init.js'); ?>"></script>

img

<img src="<?php echo get_template_directory_uri(); ?>/img/logo.jpg<?php echo '?' .filemtime( get_template_directory() . '/img/logo.jpg'); ?>">


このように記述することで、ディレクトリのパスが「style.css?1595554940」となります。
再読み込みしても？〜以降の数字は変わりませんが、ファイルの内容を変更すると数字が変更され、新しいファイルとして読み込んでくれます。