はじめに
WordPressでCSSを編集・追加したのに見た目が変わらない場合、ほとんどはキャッシュ問題か読み込み順の問題です。症状ごとに確認ポイントが異なるため、段階的に切り分けます。
症状・原因
- CSSを保存したが表示が変わらない → キャッシュ問題
- 管理画面の「追加CSS」は機能するがstyle.cssが効かない → 優先度問題
- 特定のページだけCSSが適用されない → 条件分岐の問題
- 本番には反映されているがローカルで変わらない → ブラウザキャッシュ
解決手順
ステップ1：キャッシュをクリアする
# WordPressオブジェクトキャッシュをクリア
wp cache flush
# Transientベースのキャッシュをクリア
wp transient delete --all- ブラウザの強制リロード：
Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac） - キャッシュプラグイン（W3 Total Cache・WP Super Cache等）のキャッシュもクリア
ステップ2：CSSの読み込みを確認
ブラウザの開発者ツール（F12）→ Network タブ → CSSファイルを選択して実際に配信されているCSS内容を確認します。
// functions.php — CSSを正しいバージョン付きで読み込む
add_action('wp_enqueue_styles', function() {
wp_enqueue_style(
'my-custom-style',
get_stylesheet_directory_uri() . '/css/custom.css',
[],
filemtime(get_stylesheet_directory() . '/css/custom.css') // バージョンをファイル更新日時に
);
});ステップ3：CSSの優先度を確認
/* 特異度（スペシフィシティ）が低いと上書きされる */
/* 弱い（要素セレクタ）*/
p { color: red; }
/* 強い（IDセレクタ）*/
#content p { color: blue; }
/* 最強（!important）※多用は避ける */
p { color: red !important; }開発者ツールの「Styles」タブで、書いたCSSに取り消し線が入っていれば別のルールに上書きされています。
ステップ4：追加CSSを使う（最も確実）
管理画面の「外観 → カスタマイズ → 追加CSS」に直接記述したCSSは wp_head の最後に出力されるため、テーマのスタイルより後に読み込まれ優先されます。
ステップ5：子テーマのstyle.cssを使う
親テーマのstyle.cssを直接編集するとテーマ更新で上書きされます。必ず子テーマを使います。
// 子テーマの functions.php
add_action('wp_enqueue_scripts', function() {
// 親テーマのスタイルを読み込む
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// 子テーマのスタイルを後から読み込む（優先される）
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style']
);
});ステップ6：プラグインのCSSを上書きする
プラグインのCSSを上書きするには、プラグインのスタイルハンドル名を特定して依存関係を設定します。
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'my-override',
get_stylesheet_directory_uri() . '/override.css',
['plugin-style-handle'], // プラグインのハンドル名を依存に追加
'1.0'
);
}, 999); // 優先度を高くして後から読み込む注意事項
!importantは最後の手段として使い、乱用するとメンテナンス性が下がります- バージョンパラメータ（
?ver=xxx）をつけないとブラウザがキャッシュした旧バージョンを使い続けます - CloudflareなどのCDNを使っている場合はCDN側のキャッシュもパージが必要です
まとめ
カスタムCSSが効かない場合は、まずブラウザとWordPressのキャッシュを全クリアしてから確認します。それでも反映されない場合は開発者ツールで取り消し線が入っていないか確認し、特異度や読み込み順を調整します。