【WordPress】CSSが更新されない原因と解決法｜filemtimeでキャッシュを自動更新

2026年3月17日

WordPressで構築しているサイトで、ちょっとしたデザインの修正を行うためにCSSを変更する、ということはよくあります。

その際に、FTPから直接CSSファイルを編集、あるいはCSSファイルの上書きを行ったのにもかかわらず、

変更が反映されない
ブラウザの強制リロードをしても変わらない

といった経験はありませんか？

これはバグではなく、ブラウザキャッシュの仕組みによるものです。

本記事では、この問題を根本的に解決する方法を解説します。

CSSが更新されない原因

WordPressでは、CSSやJSの読み込みはfunctions.phpで設定するのが一般的です。

wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );

上記のように設定すると、CSSを読み込むstyleタグの末尾に、「?ver=6.9.4」のようなパラメータが付与されます。
これは検証ツールから確認することができます。

style.css?ver=6.9.4

この ver パラメータは、キャッシュ管理のためのバージョン番号です。

ブラウザはこの値を見て、「同じバージョンであれば再ダウンロードしない」と判断します。

つまり、CSSファイル自体を更新しても、そのstyleタグの ver パラメータが変わらない限り、
更新前の古いファイルが使われ続けるのです。

なぜこんな仕組みがあるのか？

ブラウザはパフォーマンス向上のために、一度読み込んだCSSやJSをキャッシュとして保存します。

もし毎回すべてのファイルをダウンロードしていたら、

ページ表示が遅くなる
サーバー負荷が増える

といった問題が発生します。

そこで、「同じファイルなら再ダウンロードしない」という仕組みが使われています。

では、どうやって「同じファイル」と判断するのか？

ここで使われるのが ver パラメータです。

style.css?ver=6.9.4

ブラウザはこのURLを見て、

ver=6.9.4 → 以前と同じ → キャッシュとして保存されているファイルを使用
ver=6.9.5 → 新しい → 再ダウンロード

と判断します。

解決方法（結論）

そこで有効なのが、filemtime関数です。

wp_enqueue_style(
  'style',
  get_template_directory_uri() . '/common/css/style.min.css',
  [],
  filemtime(get_template_directory() . '/common/css/style.min.css')
);

上記コードのようにfilemtime関数を使用してfunctions.phpに記述すると、
CSSファイルが更新されるたびに、自動でバージョンが変わります。

コードの詳細解説

それぞれの引数を分解して解説します。

第1引数：ハンドル名

'style'

第1引数には、CSSを識別するための名前を記述します。
任意の名前でOKですが、他の読み込みファイルの名前と重複しないようにします。

第2引数：CSSファイルのURL

get_template_directory_uri() . '/css/style.css'

第2引数には、テーマ内にアップロードされているCSSファイルのパスを指定しています。

get_template_directory_uri()は、テーマディレクトリのURLを取得する関数です。

第3引数：依存関係

[]

第3引数には、他のCSSに依存している場合指定します。
今回は依存していないため空配列を指定しています。

第4引数：バージョン（ここが重要）

filemtime(get_template_directory() . '/css/style.css')

第4引数にはバージョンを指定します。
何も指定がない場合、WordPressのバージョンが挿入されます。

この第4引数に記述するコードが今回のポイントです。

filemtimeとは？

filemtime() は

ファイルの最終更新日時（タイムスタンプ）を取得する関数

です。

CSSに変更があった場合、その変更日時を取得します。

つまり、CSSの変更をしたら自動的にバージョンも変わり、CSSの変更が即反映されます。

まとめると、

CSSを更新する
更新日時が変わる
バージョンが変わる
ブラウザを再読み込みすると変更が反映される

という流れになります。

JavaScriptの読み込みにも使用可

wp_enqueue_script(
  'script',
  get_template_directory_uri() . '/js/script.js',
  [],
  filemtime(get_template_directory() . '/js/script.js'),
  true
);

JavaScriptの読み込みでも、同じように記載することでキャッシュ問題を防ぐことができます。

注意点

万が一ファイルが存在しない場合、エラーになる可能性があります。

安全に書くなら以下がおすすめです。

$path = get_template_directory() . '/common/css/style.min.css';
wp_enqueue_style(
  'style',
  get_template_directory_uri() . '/common/css/style.min.css',
  [],
  file_exists($path) ? filemtime($path) : null
);

get_template_directory()はサーバー上のファイルパスを取得する関数です。

サーバー上に該当ファイルが存在しない場合はnullを返す、という挙動になります。