お客様から『サイトのデザインを変更したのに反映されない！』と相談された経験はありませんか？
WordPressのテーマのスタイルシートを更新した際に、CSSの変更がブラウザに反映されずお客様から「変わっていません」と相談が来てしまうこと、ありませんか？
この場合、キャッシュが原因で、確認が手間になるケースがよく見られます。
この記事では、キャッシュの仕組みと、テーマ保守時にできる簡単な対策を初心者向けに解説します。
ブラウザのキャッシュとは
一度訪問したサイトのデータをブラウザが保存しておいて、次に訪問した時に読み込みをしパッと表示してくれる、というメリットがあります。
ただそのキャッシュが原因で、「古い情報のまま表示してしまい、更新した内容に変わっていない」というトラブルにもなります。
WordPressの場合、スタイルシート（style.cssなど）がキャッシュされると、更新したCSSが反映されない。サーバーやCDN（例: Cloudflare）のキャッシュも影響する可能性があります。
お客様が古いデザインを見ている場合、キャッシュが原因の可能性大！
ブラウザのキャッシュをクリアする方法
ただし、毎回手動でクリアするのは非効率で、お客様にも負担がかかります。それに一般のサイトを訪問するお客様のブラウザが変わっていなかったら困ります。
主要なブラウザ（Chrome、Firefox、Safari、Edge）ごとのキャッシュクリア手順をわかりやすくまとめた記事があるので、こちらを確認してください。
キャッシュ問題をクリアできるもっと楽な方法はないの？
テーマ側でキャッシュを賢く回避する方法があれば、保守が楽になりお客様の確認もスムーズになりますよね。
テーマ作成時にできること
HTMLのlinkタグで読み込む場合
<link rel="stylesheet" href="style.css?v=1.0">
style.cssというファイル名の後に?v=1.0のようにクエリパラメータとしてバージョン番号を追加します。
これにより、ブラウザはキャッシュを無視して新しいバージョンを読み込むようになります。
functions.phpでバージョン番号を動的に付与
毎回スタイルシートのバージョンを手作業で入力するのも手間です。動的に変わってくれたらもっとメンテナンスが楽になります。
$style_version = filemtime( get_stylesheet_directory() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), $style_version );
wp_enqueue_styleやwp_enqueue_scriptにfilemtime()を使ってファイルの最終更新日時をバージョン番号に設定します。これでCSS更新時にキャッシュが自動的に無効化されます。
なお、上記はchild-styleと書かれているように子テーマを使っていることを想定したコードなので、読み込み方法は適宜修正してください。
ランダム値を使いたい
?ver=ランダム値というように、スタイルシートやスクリプトのURLにクエリ文字列を追加する方法もあります。
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), time() );
こちらは毎回異なるクエリ文字列が生成されます。
まとめ
キャッシュ問題はホームページの保守運用でよくある課題です。
filemtime()を使ったバージョン管理で、CSS更新をスムーズに反映可能！
本番環境ではキャッシュを活用しつつ、キャッシュのトラブルを解決しましょう！
