【WordPress】CSSファイルの更新日時を取得してキャッシュを自動更新する方法｜wp_enqueue_style + filemtime

2024.03.13

CSSやJSファイルを更新しても、訪問者のブラウザに古いキャッシュが残って反映されないことがあります。これは、ファイルの読み込みURLに付くバージョン番号（?ver=...）が変わらないためです。この記事では、filemtime()（ファイルの更新日時）を使って更新のたびに自動でバージョンを変える正しい実装を解説します。

この記事でわかること

  • wp_enqueue_style() の第4引数に filemtime() を渡す方法
  • 子テーマで使う場合の正しいパス関数
  • 生の <link> タグを直書きしない方がよい理由
スポンサーリンク

wp_enqueue_style() の第4引数にfilemtime()を渡す

子テーマの functions.php に、wp_enqueue_scripts フックでCSSを読み込むコードを追加します。第4引数（バージョン）に filemtime() を渡すのがポイントです。ファイルを更新するたびにこの値が変わり、URLの ?ver=... が自動で変わってキャッシュが更新されます。

functions.php：CSSの更新日時を自動でバージョンにする
add_action('wp_enqueue_scripts', function () {
  $css_path = get_stylesheet_directory() . '/css/style.css'; // サーバー上のパス（filemtime用）
  $css_url  = get_stylesheet_directory_uri() . '/css/style.css'; // 読み込むURL

  wp_enqueue_style(
    'my-theme-style',
    $css_url,
    array(),
    filemtime($css_path) // 更新日時をそのままバージョンにする
  );
});

JavaScriptも同様に、wp_enqueue_script() の第4引数に渡します。

functions.php：JSの更新日時を自動でバージョンにする
add_action('wp_enqueue_scripts', function () {
  $js_path = get_stylesheet_directory() . '/js/script.js';
  $js_url  = get_stylesheet_directory_uri() . '/js/script.js';

  wp_enqueue_script(
    'my-theme-script',
    $js_url,
    array(),
    filemtime($js_path),
    true // フッターで読み込む
  );
});

header.phpに直接タグを書かない

直書きはWordPressの管理外になる
header.php に <link rel="stylesheet" href="..."> を直接書く方法もありますが、これは wp_enqueue_style() による依存関係の管理・重複読み込みの防止・他のプラグインとの競合検出をすべて迂回してしまいます。CSS/JSの読み込みは常に wp_enqueue_style() / wp_enqueue_script() を使うのがWordPressの基本ルールです。ページによって読み込みを分けたい場合の条件分岐は特定のページでのみCSS・JSを読み込む方法を参照してください。

子テーマでは get_stylesheet_directory() を使う

親テーマと子テーマでパス関数を使い分ける
get_template_directory() / get_template_directory_uri() は親テーマのパスを返します。子テーマの /css/・/js/ に置いたファイルには、get_stylesheet_directory()（サーバーパス）／get_stylesheet_directory_uri()（URL） を使ってください。親テーマのファイルをそのまま使う場合だけ get_template_directory_*() です。

よくある質問（FAQ）

QCSSのキャッシュを自動更新するには？
Awp_enqueue_style() の第4引数（バージョン）に filemtime(get_stylesheet_directory() . '/style.css') のようにファイルの更新日時を渡します。ファイルを更新するたびに値が変わり、ブラウザが新しいバージョンとして読み込みます。
Q子テーマのCSSにも同様のバージョン管理を適用できますか？
Aできます。get_stylesheet_directory() で子テーマのサーバーパスを取得し、filemtime(get_stylesheet_directory() . '/style.css') でタイムスタンプを取得します。親テーマは get_template_directory()、子テーマは get_stylesheet_directory() と使い分けてください。
Qfilemtimeの値は変わっているのに反映されません。
ACDNやサーバー側のキャッシュ（ページキャッシュ・オブジェクトキャッシュ）が原因のことが多いです。ブラウザキャッシュはURLのバージョンが変われば更新されますが、サーバー側でHTML自体がキャッシュされていると古いURLのまま配信され続けます。キャッシュプラグインやCocoonの高速化設定、CDNのキャッシュクリアも確認してください。

まとめ

  • 基本：wp_enqueue_style() / wp_enqueue_script() の第4引数に filemtime() を渡す
  • 避ける：header.php への <link> 直書き（WP管理外になる）
  • 子テーマ：get_stylesheet_directory() / get_stylesheet_directory_uri()

読み込み条件を分けたい場合は特定のページでのみCSS・JSを読み込む方法とあわせて実装すると、キャッシュ更新と読み込み範囲の両方を制御できます。