PHP / WordPress

CSSやJavaScriptなどのキャッシュを回避！ファイルを更新したタイミングで再読み込みさせる方法（WordPress版）

Webサイトの画像やコードを修正してページを見てみると「あれ？変わってない…？」なんてことがありますよね。
これは「キャッシュ」と呼ばれるページの読み込みを速くするための仕組みが影響していて、修正が反映されないことがあります。
こういった問題を回避するために、WordPressでファイルを更新した際に、自動的にファイルを再読み込みさせる方法を記事にしました。

広告

本記事で使用する言語

  • PHP
  • WordPress

キャッシュって何？

キャッシュはページの読み込み速度を速くするための仕組みになります。
キャッシュはブラウザ側（Google Chrome、Internet Explorer、Microsoft Edgeなど）に標準的に組み込まれている機能なので、インターネットを使っているほぼすべてのユーザーが無意識に使っています。

Webサイトを表示する際には、複数の「画像」「CSSファイル」「JavaScriptファイル」などをダウンロードするのですが、ダウンロードを毎回行うと時間がかかってしまいます。
そのため、ページの読み込み時間を短縮するために、Webサイトに訪れた際にデータを一部保存して、再訪問（またはサイト内の別ページへ移動）した際に保存したデータを参照することで「ダウンロードの時間」と「ファイルの読み込み時間」を短縮するのが「キャッシュ」のおおまかな機能となります。

キャッシュについてもっと詳しく知りたい方は、下記のサイト様がよくまとまっているので読んでみてください。
ブラウザの「キャッシュクリア」とは

何故ファイルを更新してもキャッシュが残るの？

ブラウザはキャッシュがあるかどうかをアクセスしたURLで判定しているみたいです。
そのため、ファイルの中身を更新しても同じURLであれば、ブラウザ側は「以前に読み込んだファイルだ！」と判断して以前のデータ（※つまりキャッシュ）を使ってページを表示します。

画像、CSSファイル、JavaScriptファイルは全てキャッシュの対象になるので、更新したファイルを上書きするだけではユーザーに正しく反映されません。
そのため、更新したファイルを再読み込みさせる必要があります。

単純な回避策としては「ファイルを別名に変更する」方法があるのですが、修正があるたびにファイル名を変更するのはちょっと手間がかかりますよね。
なので今回は、ファイルの更新情報を自動で検知して、更新があるファイルのみ最新のファイルを再読み込みさせるコードを組んでみました。

キャッシュの回避方法

簡単な回避方法はURLにパラメータを付ける方法になります。
具体的には、下記のようなURLになります。

https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?190622140815

URL末尾の?以降の文字がパラメータと呼ばれるもので、同じURLで別の内容を表示する際に使うものになります。
基本的にパラメータは直接ファイルの中身に影響するものではないので、?以降は自由に半角の英数字を入力することができます。

パラメータが変わることでブラウザは別のURLとして認識しますので、この仕様を利用してファイルの更新があった場合のみ?以降の文字を変える事でキャッシュを回避します。

パラメータに指定する情報

ファイルの更新情報を取得する際には、ファイルが変わったことを示す何かしらの情報が必要となります。

ファイルを修正した際に変わる情報は「ファイルサイズ」または「ファイルの更新日」になります。
ファイルサイズは更新内容によってサイズ自体は変わらない場合があるため、ファイルの更新日を使います。

ファイルの更新日はPHPのfilemtime関数を使って取得できます。
ファイルの更新日をURLの?の後に付ける事で、ファイルの更新があった場合のみ自動で再読み込みをさせるように仕掛ける事ができます。

実際にコードを組むと下記のようになります。

画像のキャッシュ回避

<img src="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/img/sample.jpg?<?php echo date("ymdHis", filemtime( get_stylesheet_directory() . '/img/sample.jpg')); ?>">

CSSファイルのキャッシュ回避

<link rel="stylesheet" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?<?php echo date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')); ?>" type="text/css">

JavaScriptファイルのキャッシュ回避

<script type="text/javascript" src="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/js/common.js?<?php echo date("ymdHis", filemtime( get_stylesheet_directory() . '/js/common.js')); ?>"></script>

上記のようなコードを設置する事で、ファイルの更新があった場合のみ再読み込みさせることができるようになります。

WordPressの子テーマではスタイルシートのキャッシュが回避できない…？

WordPressの子テーマを使っている場合は、functions.phpで下記のように記述すると子テーマのCSSを自動的に再読み込みさせることができます。

<?php
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

実際に出力されるコードは下記のようになります。

<link rel="stylesheet" id="parent-style-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell/style.css?ver=5.1.1" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?190527131850&amp;ver=5.1.1" type="text/css" media="all">
<link rel="stylesheet" id="maxwell-stylesheet-css" href="https://www.kansuke-prg.com/wp/wp-content/themes/maxwell-child/style.css?ver=1.7.2" type="text/css" media="all">

先程のfunctions.phpに記述した子テーマのCSSにはパラメータが正しく付いていますが、その後に再度子テーマのCSSがパラメータなしで読み込まれているためキャッシュが参照されてしまいます。
この解決策に関しては、また今度記事で投稿させていただきます。

2019/11/20 追記
すっかり忘れていましたが、解決策となる記事を投稿しました。
興味がある方はコチラ↓もご覧ください。

WordPressの子テーマ化をした際にスタイルシートの重複読み込みを回避する方法
WordPressの子テーマ化をした際にスタイルシートの重複読み込みを回避する方法
WordPressを子テーマした際に、親テーマのfunction.phpの処理によって子テーマのスタイルシートが重複して読み込まれてしまう場合があります。この重複読み込みを解消する方法をご紹介します。 ※今回の記事は前回

ではまた！

広告

2件のコメント

  1. ピンバック: ブラウザのキャッシュの影響を受けないようにする | サンネット技術部
  2. ピンバック: WordPressでの子テーマが反映されない原因 | sunaohonda

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です