[WordPress] 親テーマスタイルの後で子テーマスタイルを読み込ませたい

公開日:2021/12/18

親テーマを継承して子テーマを作る際、親テーマのスタイルに、子テーマのスタイルで上書きする形でカスタマイズするケースが多いです。

このとき、headタグ内でのスタイルの読み込みは、①親テーマのスタイル、②子テーマのスタイルという形にしておきたいです。

WordPress Codexで紹介されている下記のコードでは、親テーマで複数のスタイルを読み込んでいる場合にうまくいかないケースがあります。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

親テーマで用意されているすべてのスタイルシートを読み込んだ後で、子テーマのスタイルシートを読み込むやり方を調べてみました。

サンプルコード

function theme_enqueue_styles() {
    wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles', 11);

「add_action」関数の第3引数を指定するという単純な方法になります。

第3引数は、関数の優先順位を指定する引数になります。第1引数で指定されたフックに複数の関数が紐付けられている場合に、ここで指定した優先順位に従って関数が実行されます。

引数が無指定の場合、初期値の「10」が設定されます。サンプルコードでは「11」を指定し、初期値よりも優先順位が低い＝後で呼ばれるようにしています。

継承する親テーマの作り方次第では、「11」ではうまくいかない場合もあります。その場合は、親テーマのfunctions.phpで「wp_enqueue_scripts」に「add_action」している箇所を確認して、第3引数に指定されている値より大きい値を使うようにしてください。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。