2026年5月20日

WordPressのCSSが反映されない場合の解決方法（キャッシュ編）

テーマ・デザイン

はじめに

CSSを変更したのに画面に反映されない場合、ほぼ確実に「キャッシュ」が原因です。ブラウザキャッシュ・WordPressキャッシュプラグイン・CDNキャッシュの3層を順番にクリアすることで解決できます。

症状・原因

style.cssを変更したのにサイトのデザインが変わらない
自分のPCでは反映されているのに他の端末では古いデザインのまま
管理画面からキャッシュをクリアしても反映されない
CSSのバージョンが変わっていない

解決手順

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

ブラウザキャッシュのクリア方法:

Chrome:
→ Ctrl+Shift+Delete → 「キャッシュされた画像とファイル」→ 削除
→ またはCtrl+Shift+R（ハードリロード）
→ DevToolsを開いた状態でリロードボタン長押し → 「キャッシュを空にしてハードリロード」

Firefox:
→ Ctrl+Shift+Delete → キャッシュ → 削除
→ またはCtrl+F5

確認方法:
→ DevTools（F12）→ Network タブ → 「キャッシュを無効化」にチェック
→ CSSファイルのステータスが 304（キャッシュ）か 200（新規）か確認

ステップ2：WordPressキャッシュプラグインをクリアする

# WP-CLIでオブジェクトキャッシュをクリア
wp cache flush

# トランジェントをクリア
wp transient delete --all

# 各キャッシュプラグインのクリアコマンド
# WP Super Cache
wp super-cache flush 2>/dev/null || true

# W3 Total Cache
wp w3-total-cache flush all 2>/dev/null || true

# LiteSpeed Cache
wp litespeed-purge all 2>/dev/null || true

# WP Rocket
wp rocket clean --confirm 2>/dev/null || true

ステップ3：CSSにバージョンパラメーターを付与する

// functions.php — CSSファイルの更新時刻をバージョンとして付与
add_action('wp_enqueue_scripts', function(): void {
    $css_file = get_stylesheet_directory() . '/style.css';
    $version  = file_exists($css_file) ? filemtime($css_file) : wp_get_theme()->get('Version');

    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['parent-style'],
        $version  // ファイル更新時刻 = キャッシュバスター
    );
}, 20);

# バージョンパラメーターを確認
# → <link href="style.css?ver=1748000000"> のように付与される
wp eval "
global \$wp_styles;
wp_print_styles();
\$handle = 'child-style';
if (isset(\$wp_styles->registered[\$handle])) {
    echo \$wp_styles->registered[\$handle]->src . PHP_EOL;
    echo \$wp_styles->registered[\$handle]->ver . PHP_EOL;
}"

ステップ4：CDNキャッシュをクリアする

# Cloudflare キャッシュをWP-CLIでクリア（Cloudflare プラグイン使用時）
wp cloudflare purge-everything 2>/dev/null || true

# Cloudflare API で直接クリア
curl -X POST "https://api.cloudflare.com/client/v4/zones/{ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer {API_TOKEN}" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything":true}'

# 特定ファイルだけクリアする場合
curl -X POST "https://api.cloudflare.com/client/v4/zones/{ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer {API_TOKEN}" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://example.com/wp-content/themes/my-theme/style.css"]}'

ステップ5：CSSが確実に最新版か確認する

# サーバー上のCSSファイルの最終更新日時を確認
stat wp-content/themes/my-child-theme/style.css

# ファイルの内容を確認（最初の30行）
head -30 wp-content/themes/my-child-theme/style.css

# CSSのMD5ハッシュで変更を確認
md5sum wp-content/themes/my-child-theme/style.css

# HTTPヘッダーでキャッシュ制御を確認
curl -I https://example.com/wp-content/themes/my-child-theme/style.css \
  | grep -E "Cache-Control|Last-Modified|ETag"

ステップ6：.htaccessでキャッシュ設定を調整する

# .htaccess — CSS/JSのキャッシュ期間を設定
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
</IfModule>

# ETagを有効化してキャッシュ検証を改善
<IfModule mod_headers.c>
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "public, max-age=604800, must-revalidate"
    </FilesMatch>
</IfModule>

注意事項

本番環境では filemtime() を使ったバージョニングが最も確実です。毎回ファイル更新時刻がバージョンになるため、古いCSSがキャッシュされ続けません
CDNを使用している場合、WordPressのキャッシュをクリアしてもCDNのキャッシュが残っていることがあります
WP_DEBUG が有効なときは SCRIPT_DEBUG も有効にすると圧縮されていないCSSが読み込まれます

まとめ

CSSが反映されない場合は「Ctrl+Shift+R → wp cache flush → CDNキャッシュクリア → filemtimeバージョニング追加」の順で対処します。filemtime() を使ったバージョン管理が根本的な解決策です。

Post Views: 12