WordPressで制作を進めていると、「子テーマのCSSが反映されない！」という状況に遭遇することはないでしょうか？

その原因は、子テーマのCSSよりも、親テーマのCSSが後に読み込まれていることにあるかもしれません。

この記事では、wp_enqueue_style()関数を使って、親テーマと子テーマのCSSの順番を変更することで子テーマのCSSを反映させる方法についてお伝えします。

1. wp_enqueue_style()関数で依存関係を明示する

fucntions.phpに次のコードを記述します。

function enqueue_child_theme_styles() {
    // 親テーマのCSSを読み込む
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');

    // 子テーマのCSSを読み込む
    wp_enqueue_style(
        'child-theme-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-theme-style')  // 依存関係を指定
    );
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles');

wp_enqueue_style()で、親テーマと子テーマのそれぞれのCSSを読み込み、wp_enqueue_scriptsフックで反映しています。

子テーマのほうに array(‘parent-theme-style’) というパラメーターを指定することで子テーマのスタイルシートが、親テーマに依存していることを明示しています。

これにより、子テーマのCSSが親テーマの後に読み込まれるようになります。

2. wp_enqueue_style()のパラメーター

wp_enqueue_style()は下記のパラメーターを取ることができます。

wp_enqueue_style(
    string $handle,          // スタイルの識別子（ハンドル）
    string $src = '',         // CSSファイルのURL
    array $deps = array(),    // 依存する他のスタイルのハンドル
    string|bool|null $ver = false,  // バージョン番号（キャッシュ制御用）
    string $media = 'all'     // メディアタイプ（'all', 'print', 'screen'など）
);

$handle（必須）

CSSファイルを識別するための一意のハンドル名です。
例：'child-theme-style' や 'custom-css' など。

$src（必須）

CSSファイルへのURLを指定します。テーマの場合、get_template_directory_uri() や get_stylesheet_directory_uri() を使います。

$deps（任意）

このスタイルが依存する他のスタイルのハンドル名を配列で指定します。指定されたスタイルが先に読み込まれます。
例：array('parent-theme-style') など。

$ver（任意）

CSSのバージョン番号を指定します。これを設定することで、キャッシュの問題を防ぎます。デフォルトは false で、WordPressはテーマのバージョン番号などを使います。

$media（任意）

CSSが適用されるメディアタイプを指定します。
デフォルトは 'all' で、他にも 'print' や 'screen' などが指定可能です。

3. 他にも優先されるCSSがある場合

親テーマにstyle.css以外にも、子テーマのCSSに優先されて読み込まれるものがある場合、同様にwp_enqueue_style()で読み込む順序を変更できます。

例えば、親テーマにmain.cssというCSSがある場合、次のように記述します。

function enqueue_child_theme_styles() {
    // 親テーマのCSSを読み込む
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');

    //親テーマのmain.cssを読み込む
　　wp_enqueue_style('main-theme-style', get_template_directory_uri() . '/main.css');

    // 子テーマのCSSを読む込む
    wp_enqueue_style(
        'child-theme-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-theme-style', 'main-theme-style')  // 依存関係を指定
    );
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles');

array(‘parent-theme-style’, ‘main-theme-style’) と依存関係を複数指定することで、複数の親テーマのCSSの後に、子テーマのCSSを読み込むことができます。

参考）
・WordPress Developer Resources
・Chat GPT 4o