WordPressテーマ開発でブラウザキャッシュに悩まされない方法【filemtime活用】

開発中のCSSキャッシュ問題

WordPressテーマを開発していると、CSSを修正したのにブラウザに反映されない…という経験はありませんか？

これはブラウザのキャッシュが原因です。通常は強制リロード（Ctrl+F5やCmd+Shift+R）で解決しますが、毎回これをやるのは面倒ですよね。

よくある解決策とその問題点

方法1：バージョン番号を手動で変更

wp_enqueue_style(
    "my-style",
    get_template_directory_uri() . "/style.css",
    array(),
    "1.0.1" // ← 毎回手動で変更
);

問題点：編集のたびにバージョン番号を変更する必要があり、忘れがち。

方法2：nullを指定してバージョンを無効化

wp_enqueue_style(
    "my-style",
    get_template_directory_uri() . "/style.css",
    array(),
    null // ← バージョンなし
);

問題点：本番環境でもキャッシュが効かなくなり、パフォーマンスが低下。

スマートな解決策：filemtime()を使う

PHPのfilemtime()関数を使えば、ファイルの最終更新時刻を自動的にバージョン番号として使えます。

実装方法

function my_theme_scripts() {
    wp_enqueue_style(
        "my-style",
        get_template_directory_uri() . "/assets/css/style.css",
        array(),
        filemtime(get_template_directory() . "/assets/css/style.css")
    );
}
add_action("wp_enqueue_scripts", "my_theme_scripts");

仕組み

1. filemtime()がファイルの最終更新時刻（Unixタイムスタンプ）を取得
2. CSSのURLは style.css?ver=1706518234 のようになる
3. ファイルを編集すると、タイムスタンプが自動的に更新される
4. ブラウザは新しいURLとして認識し、キャッシュを無視して再読み込み

JavaScriptにも応用可能

同じ手法はJavaScriptファイルにも使えます。

wp_enqueue_script(
    "my-script",
    get_template_directory_uri() . "/assets/js/common.js",
    array("jquery"),
    filemtime(get_template_directory() . "/assets/js/common.js"),
    true
);

メリット

• 自動化：ファイルを編集するだけで、バージョンが自動更新
• 開発効率UP：強制リロードやバージョン番号の手動変更が不要
• 本番環境でも安心：ファイルが変更されない限りキャッシュが有効
• チーム開発に最適：他の開発者がファイルを更新しても自動対応

注意点

ファイルパスは正確に

get_template_directory_uri()（URL）とget_template_directory()（サーバーパス）を混同しないように注意してください。

• URL用：get_template_directory_uri()
• filemtime用：get_template_directory()

子テーマの場合

子テーマを使っている場合は、以下の関数を使い分けます。

// 子テーマのCSS
wp_enqueue_style(
    "child-style",
    get_stylesheet_directory_uri() . "/style.css",
    array(),
    filemtime(get_stylesheet_directory() . "/style.css")
);

まとめ

filemtime()を使ったキャッシュ対策は、WordPressテーマ開発の効率を大幅に向上させる実践的なテクニックです。

バージョン管理の手間から解放され、開発に集中できるようになります。ぜひ試してみてください！

EOF
)

カスタマイズに関するお問い合わせはこちら