この記事で分かること

  • キャッシュバスティングの仕組みと、なぜ大切なのか
  • テンプレートや functions.php での具体的な実装手順
  • ファイル更新に合わせて自動でバージョンを切り替える賢い方法
  • 本番環境で運用する際の優しいアドバイス

前提

  • WordPress 6.x
  • PHP 8.0以上
  • 子テーマまたはカスタムテーマを使用されている方マを使用

キャッシュバスティングとは？

「CSSを一生懸命修正したのに、なぜかサイトに反映されない……」「JavaScriptを更新したはずなのに、動きが古いまま」という経験はありませんか?

自信を持って修正完了を報告したのに、お客さんから「反映されていませんよ？」と連絡が来て、恐る恐る「ブラウザのキャッシュをクリアしていただけますか……？」とお願いするのは、お互いにとって少し心苦しいものですよね。

こうした現象の多くは、ブラウザキャッシュが原因です。ブラウザはサイトの表示を速くするために、一度読み込んだCSSやJSファイルを自分の手元に保存して再利用してくれます。とても便利な仕組みなのですが、作り手側がファイルを更新しても、ブラウザが「あ、古い方でいいや」と判断してしまうことがあるのです。

そこで役立つのが 「キャッシュバスティング」 です。仕組みはとてもシンプル。ファイルのURLにバージョン番号や日付をちょこっと付け足すだけで、ブラウザに「これは新しいファイルですよ！」と気付かせてあげることができます。

<!-- バージョンなし（ブラウザが古いものを使い続けやすい） -->
<link rel="stylesheet" href="/wp-content/themes/mytheme/style.css">

<!-- バージョンあり（「新しいものだ！」と認識してくれます） -->
<link rel="stylesheet" href="/wp-content/themes/mytheme/style.css?ver=1.0.1">

まずは基本的な方法から試してみましょう

まずは、最もイメージしやすい原始的な方法から、WordPressらしいスマートな方法まで順を追って見ていきましょう。

１．テンプレートファイルに直接書き込む方法

header.php などのテンプレートファイルにある HTML タグに、直接バージョンを書き込む方法です。

<!-- header.php など -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css?ver=20260123">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/main.js?ver=20260123"></script>

CSSを修正した時に ?ver=20260123_v2 のように手動で数字を変えてあげれば、確実に反映されるようになります。

２．functions.php でスマートに管理する（おすすめ）

テンプレートに直接書くのも分かりやすいですが、WordPressには wp_enqueue_style() や wp_enqueue_script() という、CSS・JSを管理するための便利な関数が用意されています。これらを使うのが、WordPressの「標準的な作法」であり、おすすめの方法です。

これらの関数は、私たちの代わりに以下のような難しいことを引き受けてくれます。

  • 読み込みの重複を防ぐ: 大切なプラグインなどの動きを邪魔しません
  • 依存関係を整理する: 「jQueryを読み込んだ後にこのファイルを読み込む」といった順番を正しく守ってくれます
  • 一括でバージョン管理ができる: 今回の主役ですね！
// functions.php

function mytheme_enqueue_assets() {
    // CSSを読み込みます
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_directory_uri() . '/css/style.css',
        array(),
        '20260123'  // ここにバージョンを指定
    );

    // JavaScriptを読み込みます
    wp_enqueue_script(
        'mytheme-script',
        get_stylesheet_directory_uri() . '/js/main.js',
        array('jquery'),
        '20260123', // 修正したらここを書き換えればOKです
        true
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');

どちらの方法も「手動で書き換える」必要はありますが、functions.php にまとめておけば、あちこちのファイルを触らずに済むので安心ですね。

でも、できれば「自動で」更新してくれたら嬉しいですよね。次のセクションで、その方法をご紹介します。

ファイルの更新日時に合わせて自動化する

「バージョンを書き換えるのを忘れてしまった！」というミスを防ぐために、ファイルの最終更新日時を自動でバージョン番号にしてしまいましょう。

// functions.php

function mytheme_enqueue_assets() {
    // CSSファイルの情報を取得します
    $css_path = get_stylesheet_directory() . '/css/style.css';
    $css_version = file_exists($css_path) ? filemtime($css_path) : '1.0.0';

    // JSファイルの情報を取得します
    $js_path = get_stylesheet_directory() . '/js/main.js';
    $js_version = file_exists($js_path) ? filemtime($js_path) : '1.0.0';

    // CSSの読み込み
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_directory_uri() . '/css/style.css',
        array(),
        $css_version // 自動で「更新日時」が入ります
    );

    // JSの読み込み
    wp_enqueue_script(
        'mytheme-script',
        get_stylesheet_directory_uri() . '/js/main.js',
        array('jquery'),
        $js_version,
        true
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');

filemtime() という関数を使って、「最後にファイルを上書き保存した時間」をバージョン番号として利用しています。これで、ファイルを更新してサーバーにアップした瞬間、ブラウザも新しいファイルだと気付いてくれるようになります。とても心強い仕組みですね！

実際のURLはどう見える？

自動化すると、HTMLに出力されるURLはこんな風になります。

<link rel="stylesheet" href="/wp-content/themes/mytheme/css/style.css?ver=1705901234">
<script src="/wp-content/themes/mytheme/js/main.js?ver=1705901234"></script>

数字は少し難しそうに見えますが（UNIXタイムスタンプと言います）、ブラウザにとっては「数字が変わったから新しいファイルだ！」と判断するのに十分なのです。

もっと楽をするための「ヘルパー関数」

読み込むファイルが増えてくると、同じようなコードを何度も書くのは大変です。そんな時は、便利な「お手伝い用の関数（ヘルパー関数）」を作っておきましょう。

// functions.php に追記します

/**
 * ファイルのバージョン番号を自動で取得してくれる優しい関数
 */
function mytheme_get_asset_version($file_path) {
    // サーバー上のフルパスを作ります
    $full_path = get_stylesheet_directory() . '/' . $file_path;

    // ファイルがあったら更新日時を、なければテーマのバージョンを返します
    if (file_exists($full_path)) {
        return (string) filemtime($full_path);
    }

    $theme = wp_get_theme();
    return $theme->get('Version');
}

function mytheme_enqueue_assets() {
    // これだけでOK！スッキリしましたね
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_directory_uri() . '/css/style.css',
        array(),
        mytheme_get_asset_version('css/style.css')
    );

    wp_enqueue_script(
        'mytheme-script',
        get_stylesheet_directory_uri() . '/js/main.js',
        array('jquery'),
        mytheme_get_asset_version('js/main.js'),
        true
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');

ここだけは気をつけておきたいポイント

最後に、実装する際に迷いやすいところを優しくフォローします。

１．パスの指定に注意しましょう

filemtime() に渡すのは、URL（https://…）ではなく、サーバー上の「フルパス（/var/www/…）」です。

  • ○ 正解:get_stylesheet_directory().’/css/style.css’
  • × 間違い:get_stylesheet_directory_uri().’/css/style.css’ （_uriがつくとURLになってしまいます）

２．CDNやキャッシュプラグインをご利用の場合

CloudflareのようなCDNや、強力なキャッシュプラグインを使っている場合、そちらのキャッシュが優先されて反映が少し遅れることがあります。もし反映されないな？と思ったら、CDN側のキャッシュクリア（パージ）も試してみてくださいね。

まとめ：気持ちの良いサイト運用のために

キャッシュバスティングは、ほんの数行のコードで「反映されない！」というトラブルを未然に防いでくれる、とても優しい機能です。

ポイントを振り返ると：

  • wp_enqueue_style / wp_enqueue_script を使うと管理がスマート
  • filemtime()を使えば自動化できてミスがなくなる
  • ヘルパー関数を作ると複数ファイルの管理が楽になる
  • CDNやキャッシュプラグインとの併用時は設定を確認
  • 管理画面用のアセットにも応用できる

最初は少し難しく感じるかもしれませんが、一度設定してしまえばその後の運用がぐっと楽になります。ぜひ、あなたのプロジェクトでも取り入れてみてください。

もし「自分のテーマに合わせてうまく設定できない」「他にも高速化で悩んでいる」といったことがあれば、アウルキャンプまでお気軽にご相談くださいね。皆さんのWordPress運用が、よりスムーズで楽しいものになるよう応援しています！