2026年9月13日

WordPressのテーマCSSエラーを解決する方法

テーマ・デザイン

はじめに

WordPressのテーマをカスタマイズしてCSSを追加したのにスタイルが反映されない・wp_enqueue_style()で追加したCSSファイルが読み込まれていない・プラグインのCSSとテーマのCSSが競合してレイアウトが崩れる・!importantを多用しているのにスタイルが上書きされてしまうといった問題は、WordPressのスタイルシートキュー管理と正しいCSSの読み込み方法を理解することで解決できます。

症状・原因

wp_enqueue_style()をwp_enqueue_scriptsフック外で呼んでいるためCSSが読み込まれない
テーマのfunctions.phpでCSSを追加しているが、テンプレートにが記述されていない
子テーマで親テーマのCSSを上書きしようとしているが、読み込み順序が正しくない
CSSセレクターの詳細度（Specificity）が低く、プラグインや他のスタイルに上書きされている

解決手順

ステップ1：CSS読み込みエラーを診断する

# 登録済みスタイルを確認
wp eval "
global \$wp_styles;
foreach (\$wp_styles->registered as \$handle => \$style) {
    echo \$handle . ': ' . (\$style->src ?? 'inline') . PHP_EOL;
}
"

# CSSファイルの存在確認
wp eval "
\$file = get_template_directory() . '/style.css';
echo file_exists(\$file) ? 'style.css 存在する' : 'style.css が見つからない';
"

# wp_head が呼ばれているか確認
wp eval "
\$template = get_template_directory() . '/header.php';
\$content = file_get_contents(\$template);
echo strpos(\$content, 'wp_head') !== false ? 'wp_head あり' : 'wp_head なし';
"

# ブラウザのネットワークタブで 404 を確認
# DevTools > Sources でCSSファイルのパスを確認

ステップ2：CSSを正しくエンキューする

// ✅ wp_enqueue_scripts フックで CSS を登録する
add_action('wp_enqueue_scripts', function(): void {
    // ✅ テーマの style.css を読み込む
    wp_enqueue_style(
        'my-theme-style',                    // ハンドル名（ユニーク）
        get_stylesheet_uri(),                // 子テーマの style.css
        [],                                  // 依存ハンドル
        wp_get_theme()->get('Version'),      // バージョン（キャッシュバスター）
        'all'                                // メディアタイプ
    );

    // ✅ 追加の CSS ファイルを読み込む
    wp_enqueue_style(
        'my-theme-components',
        get_stylesheet_directory_uri() . '/css/components.css',
        ['my-theme-style'],                  // style.css の後に読み込む
        filemtime(get_stylesheet_directory() . '/css/components.css') // ファイル更新日時
    );

    // ✅ 条件付きで CSS を読み込む
    if (is_front_page()) {
        wp_enqueue_style(
            'my-theme-home',
            get_stylesheet_directory_uri() . '/css/home.css',
            ['my-theme-style']
        );
    }

    // ✅ インラインスタイルを追加（カスタマイザーの値を適用）
    $primary_color = get_theme_mod('primary_color', '#0073aa');
    $custom_css    = sprintf(
        ':root { --color-primary: %s; }',
        sanitize_hex_color($primary_color)
    );
    wp_add_inline_style('my-theme-style', $custom_css);
});

// ✅ 管理画面にも CSS を追加（エディタースタイルなど）
add_action('admin_enqueue_scripts', function(string $hook): void {
    if ($hook === 'post.php' || $hook === 'post-new.php') {
        wp_enqueue_style(
            'my-theme-editor',
            get_stylesheet_directory_uri() . '/css/editor.css',
            ['wp-edit-post']
        );
    }
});

ステップ3：子テーマで正しくCSSをオーバーライドする

// ✅ 子テーマで親テーマのスタイルを正しく読み込む
// 子テーマの functions.php:
add_action('wp_enqueue_scripts', function(): void {
    // ✅ 親テーマの style.css を読み込む
    wp_enqueue_style(
        'parent-theme-style',
        get_template_directory_uri() . '/style.css',
        [],
        wp_get_theme()->parent()->get('Version')
    );

    // ✅ 子テーマの style.css を親の後に読み込む（上書き用）
    wp_enqueue_style(
        'child-theme-style',
        get_stylesheet_uri(),
        ['parent-theme-style'],              // 親テーマの後に読み込む
        wp_get_theme()->get('Version')
    );
});

// ✅ 親テーマの CSS ハンドルを dequeue して置き換える
add_action('wp_enqueue_scripts', function(): void {
    // 不要な親テーマの CSS を除去
    wp_dequeue_style('parent-theme-fonts');    // Google Fonts など
    wp_deregister_style('parent-theme-fonts'); // 完全に削除
}, 20); // 親テーマより後に実行

ステップ4：CSS特異度の競合を解消する

/* ✅ セレクターの特異度を上げてプラグインCSSを上書き */

/* ❌ 特異度が低い（0,0,1,0） */
.my-button { color: red; }

/* ✅ 特異度を上げる（0,1,1,0） */
body .my-button { color: red; }

/* ✅ body に ID があれば使う（0,1,0,1） */
#content .my-button { color: red; }

/* ✅ テーマクラスで囲む（0,1,1,0） */
.my-theme .my-button { color: red; }

/* ✅ CSS カスタムプロパティ（変数）でブランドカラーを管理 */
:root {
    --color-primary:   #0073aa;
    --color-secondary: #23282d;
    --font-size-base:  16px;
    --spacing-unit:    8px;
}

.my-button {
    background-color: var(--color-primary);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
}

/* ✅ メディアクエリでレスポンシブ対応 */
@media (max-width: 768px) {
    .my-button {
        width: 100%;
        font-size: 0.875rem;
    }
}

ステップ5：CSS最適化とパフォーマンス

// ✅ 不要な WordPress デフォルト CSS を除去
add_action('wp_enqueue_scripts', function(): void {
    // クラシックテーマのブロックスタイルが不要な場合
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('classic-theme-styles');

    // Gutenberg のグローバルスタイルが不要な場合
    wp_dequeue_style('global-styles');
}, 100);

// ✅ CSS を preload して読み込みを高速化
add_filter('style_loader_tag', function(string $html, string $handle): string {
    if ($handle === 'my-theme-style') {
        // as="style" を追加して preload
        $html = str_replace(
            "rel='stylesheet'",
            "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"",
            $html
        );
    }
    return $html;
}, 10, 2);

// ✅ CSS をインラインに埋め込む（小さいファイルのみ）
add_action('wp_head', function(): void {
    $critical_css_file = get_stylesheet_directory() . '/css/critical.css';
    if (file_exists($critical_css_file)) {
        $css = file_get_contents($critical_css_file);
        echo '<style id="critical-css">' . wp_strip_all_tags($css) . '</style>';
    }
}, 1);

注意事項

wp_enqueue_style()のバージョン引数（第4引数）にはファイルの更新日時filemtime()を使うとブラウザキャッシュを自動的にバストできます。nullを渡すとWordPressのバージョンがクエリ文字列として付加され、WPを更新するたびにキャッシュがクリアされます
style_loader_tagフィルターを使ってCSSをpreloadに変更する場合は、JavaScriptが無効なブラウザへの対応として