[WordPress] 更新されたスタイルシート（CSS）を自動的に読み込ませたい
私「更新完了しました」
お客様「表示が崩れてるんだけど…」
私「あっ…（あかん）」
ウェブ業界で結構あるあるなやり取りだと思います。
こういった場合、キャッシュをクリアしてくださいとお願いすることになるのですが、お客さんからすれば「キャッシュなんて知らないよ」と言いたくなってしまいます。
お客さん以外にも、サイトを訪問する不特定多数のユーザーの中には、キャッシュの保存期間内に複数回アクセスする場合も十分にありえます。
このようなケースを防止するため、CSSファイルを更新したときだけ、最新版のスタイルシートを読み直すやり方を検討してみました。
header.phpに書く場合
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css<?php echo '?ver=' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
htmlでCSSのパスを指定する際、ファイル名の末尾に「?xxx123」といったパラメーターをつけることで、サーバー上は同じファイルでありながら、ブラウザの読み込み時には別のファイルとして認識され、キャッシュが再保存されます。
このパラメーターに「filemtime」関数を使って取得したスタイルシートのタイムスタンプを設定することで、スタイルシートが更新されたときだけ、パラメーターが書き換わるようになります。
functions.phpに書く場合
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', false, filemtime(get_stylesheet_directory() . '/style.css'), false);
functions.phpで「wp_enqueue_style」関数を使って読み込む場合、第4引数に指定した値がパラメーターとして設定されます。ここでも同じように「filemtime」関数の実行結果を設定しています。
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。