【WordPress】カスタムテーマにバージョンを設定して CSS キャッシュ対策

WordPressサイトの運営で「CSSを更新したのに反映されない！」というトラブルは、Webエンジニアなら誰もが一度は通る道ではないでしょうか。

本稿では、ブラウザキャッシュに邪魔されず、テーマのスタイル更新を確実にユーザーへ届けるための「スタイルシートのバージョン管理」について解説します。

なぜバージョンを上げる必要があるのか？

ブラウザには、読み込み速度を上げるためにファイルを一時保存するキャッシュ機能があります。しかし、CSSを修正してもブラウザが「以前の古いファイル」を使い続けると、新しいHTMLに古いスタイルが適用されてしまい、デザイン崩れの原因になります。

これを解決するのが、ファイル名（URL）の末尾に付与するクエリパラメータ（例：style.css?ver=1.2.3）です。このバージョン番号を更新することで、ブラウザに「これは新しいファイルだ」と認識させ、強制的に再読み込みさせることができます。

style.css でのバージョン設定

まずは、テーマの基本情報を設定する style.css のヘッダーを確認しましょう。 (style.css はテーマディレクトリの直下にあります。)

style.css

/*
Theme Name: My Custom Theme
Author: Tanaka Qtaro
Description: このカスタムテーマについての説明です
Version: 1.0.1  <-- ここを更新する！
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

修正のポイント

Version: の数値を書き換えます（例：1.0.0 → 1.0.1）。

この数値は、後述する functions.php 内で動的に取得して利用します。

その他の主なヘッダー項目

バージョン以外にも、以下のようなヘッダー項目が使われます。 WordPress 管理画面に表示される各テーマの名称や説明は、これらのヘッダー項目から取得しています。

項目	内容
Theme Name	テーマの名前 (必須)
Author	制作者名
Description	テーマの説明
Version	テーマのバージョン
Template	子テーマの場合、親テーマのディレクトリ名を指定

functions.php での読み込み設定

標準で用意されているテーマ (ここでは twentytwentyfive ) だと、 functions.php 内の以下のような記述でバージョンをパラメータに指定して style.css を読み込んでいます。

functions.php

// Enqueues style.css on the front.
if ( ! function_exists( 'twentytwentyfive_enqueue_styles' ) ) :
        /**
         * Enqueues style.css on the front.
         *
         * @since Twenty Twenty-Five 1.0
         *
         * @return void
         */
        function twentytwentyfive_enqueue_styles() {
                wp_enqueue_style(
                        'twentytwentyfive-style',
                        get_parent_theme_file_uri( 'style.css' ),
                        array(),
                        wp_get_theme()->get( 'Version' )
                );
        }
endif;
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' );

コードの解説

1. wp_enqueue_style():
   第4引数にバージョンを渡すことで、HTML上では <link rel='stylesheet' href='.../style.css?ver=1.0.1' ...> のように出力されます。
2. wp_get_theme():
   現在有効なテーマの情報を取得します。
3. wp_get_theme()->get( 'Version' ):
   style.css のコメント欄から Version: の値を抜き出します。

まとめ

1. CSSを更新したら style.css の Version を上げる。
2. functions.php で wp_get_theme()->get( 'Version' ) を使って読み込む。

これだけで「キャッシュが残ってデザインが崩れている」というトラブルを劇的に減らすことができます。ぜひ自身のテーマ制作に取り入れてみてください。