2026年7月15日

WordPressのテーマが更新されない・カスタマイズが反映されない問題を解決する方法

テーマ・デザイン

はじめに

テーマのCSSを編集したのにサイトのデザインが変わらない場合、ブラウザキャッシュ・プラグインのページキャッシュ・CSSのバージョン文字列が原因であることがほとんどです。親テーマを直接編集している場合はテーマ更新で上書きされるため、子テーマへの移行も合わせて解説します。

症状・原因

CSSを編集してもブラウザに反映されない
テーマのアップデートをしたらカスタマイズが消えた
カスタマイザーで変更しても保存されない・反映されない
ブラウザによって表示が異なる（キャッシュの違い）

解決手順

ステップ1：ブラウザとWordPressのキャッシュをクリアする

# WordPress のキャッシュをクリア
wp cache flush
wp transient delete --all

# キャッシュプラグインをクリア（W3 Total Cache）
wp w3-total-cache flush all

# キャッシュプラグインをクリア（WP Super Cache）
wp eval "
if (function_exists('wp_cache_clear_cache')) {
    wp_cache_clear_cache();
    echo 'WP Super Cache cleared';
}
"

# ブラウザでハードリロード
# Windows: Ctrl + Shift + R
# Mac: Cmd + Shift + R
# または F12 → ネットワーク → 「キャッシュを無効化」にチェック

ステップ2：CSSのバージョン文字列を更新する

// functions.php: CSS のバージョンを更新して強制再読み込みさせる

// ❌ バージョンが固定されているとキャッシュが残る
wp_enqueue_style('my-theme', get_stylesheet_uri(), [], '1.0.0');

// ✅ ファイルの更新時刻をバージョンとして使う（開発時に便利）
wp_enqueue_style(
    'my-theme',
    get_stylesheet_uri(),
    [],
    filemtime(get_stylesheet_directory() . '/style.css')
);

// ✅ 本番環境ではデプロイ時に変えるバージョン番号を使う
define('MY_THEME_VERSION', '2.1.0');
wp_enqueue_style('my-theme', get_stylesheet_uri(), [], MY_THEME_VERSION);

ステップ3：子テーマを正しく設定する

// 子テーマの functions.php: 親テーマのスタイルを正しく読み込む

add_action('wp_enqueue_scripts', function(): void {
    // 親テーマのスタイルを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        [],
        wp_get_theme(get_template())->get('Version')
    );

    // 子テーマのスタイルを読み込む（親の後に読み込まれる）
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        ['parent-style'],
        filemtime(get_stylesheet_directory() . '/style.css')
    );
});

子テーマの style.css ヘッダー（必須）:
/*
 Theme Name: My Child Theme
 Template:   twentytwentyfour      ← 親テーマのディレクトリ名（完全一致）
 Version:    1.0.0
*/

ステップ4：カスタマイザーの変更が保存されない問題を解決する

# カスタマイザーの設定を確認
wp db query "SELECT option_name, option_value
FROM wp_options
WHERE option_name LIKE '%theme_mods%'
LIMIT 5;"

# カスタマイザーの設定をリセット
wp eval "
\$theme = get_stylesheet();
remove_theme_mods();
echo 'Theme mods cleared for: ' . \$theme;
"

# パーミッションが原因の場合
ls -la /var/www/html/wp-content/themes/
chmod -R 755 /var/www/html/wp-content/themes/

// functions.php: カスタマイザーの設定が保存されない場合の診断
add_action('customize_save_after', function(\WP_Customize_Manager $manager): void {
    error_log('[customizer] Settings saved at ' . current_time('mysql'));
    error_log('[customizer] ' . count($manager->settings()) . ' settings total');
});

ステップ5：テーマエディター・追加CSSの競合を解消する

# 追加CSSの内容を確認（管理画面「外観」→「カスタマイズ」→「追加CSS」）
wp db query "SELECT option_value FROM wp_options
WHERE option_name LIKE 'theme_mods_%';" | grep -i "custom_css"

# WP-CLI で追加CSSを確認
wp eval "
\$mods = get_theme_mods();
if (isset(\$mods['custom_css'])) {
    echo \$mods['custom_css'];
}
"

// CSSの読み込み順を確認する（後から読まれるCSSが優先される）
add_action('wp_enqueue_scripts', function(): void {
    // デバッグ用：読み込まれているスタイルシートを一覧表示
    if (current_user_can('administrator') && isset($_GET['debug_css'])) {
        global $wp_styles;
        foreach ($wp_styles->queue as $handle) {
            $style = $wp_styles->registered[$handle];
            error_log('[css] ' . $handle . ': ' . $style->src);
        }
    }
}, 999);
// アクセス: https://example.com/?debug_css=1

注意事項

親テーマを直接編集してカスタマイズした場合、テーマのアップデート時に変更が消えます。必ず子テーマを作成してカスタマイズしてください
キャッシュプラグイン（W3 Total Cache・WP Super Cache・LiteSpeed Cache等）がある場合、CSS変更後は必ずプラグインのキャッシュもクリアしてください。ブラウザのキャッシュだけクリアしても不十分なことがあります
filemtime()をバージョンとして使うのは開発環境では便利ですが、本番環境ではファイルシステムへのアクセスが増えるため、本番では固定のバージョン番号を使ってください

まとめ

テーマ変更が反映されない問題の解決は①wp cache flushとブラウザのCtrl+Shift+Rで全キャッシュをクリア、②wp_enqueue_styleの第4引数をfilemtime()で自動更新してCSS再読み込みを強制、③子テーマのstyle.cssヘッダーにTemplate: 親テーマ名を正確に記述して親スタイルをwp_enqueue_styleで読み込み、④カスタマイザーの保存はcustomize_save_afterフックでログ確認、⑤?debug_css=1で読み込まれているCSSの順序を確認して競合を特定します。

Post Views: 8