WordPress　子テーマで親テーマのスタイルシートを読み込む２つの方法

最近WordPressをよくいじっています。

WordPressには様々な公開されているテーマがあり、サイトの構成や外観を変更することができます。
しかしどんな優れたテーマでも個人の好みがあるので、カスタマイズは必要になってきます。

私はStinger5というテーマを継承し子テーマを作成し、カスタマイズを行っています。
その子テーマを作成する際に、親テーマのスタイルシート(style.css)の読み込みで少しはまったので、記録として残しておきます。

親テーマのstyle.cssを読み込む方法

子テーマにおいて、親テーマのstyle.cssを読み込む方法は以下の2通りがあります。

子テーマのstyle.cssにおいて@importで読み込む方法

子テーマのstyle.cssの先頭で親テーマのstyle.cssを@importで読み込む方法です。以前はこの方法が主流だったようで、ネットで検索すると多く記事が出てきます。しかしcodexの子テーマのページを見ると現在は推奨されておらず、次の方法が紹介されています。

子テーマの functions.php で wp_enqueue_style()を使用し読み込む方法

子テーマのfunctions.phpにおいて、wp_enqueue_style()で親テーマのstyle.cssを読み込む関数を定義し、wp_enqueue_scriptsへのアクションフックを以下のように作成する方法です。wp_enqueue_styleで追加されたスタイルシートはキューに挿入され、順番に<?php wp_head(); ?>がある箇所にlinkタグが作成されます。

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

少し面倒なこちらの方法が推奨されているのは主に次のような理由からです。

ページ読み込みの速度に有利

@importで読み込むよりも、linkタグを複数指定して読み込んだ方が、ブラウザが早く処理できるそうです。特にIEでは顕著なようです。wp_enqueue_style()で読み込むと最終的にlinkタグが生成されるのでページ読み込みの面で@importよりも有利です。

スタイルシートの依存性の解決が容易

複数スタイルシートを扱っている場合、読み込む順序により、適用されるスタイルが変わってしまいます。wp_enqueue_style()では依存するスタイルシートを指定でき、その依存する順番にlinkタグが出力されます。特に親テーマでもwp_enqueue_style()を使用している場合は、子テーマでも必ず使用した方がよいです。

バージョンの出力でキャッシュ

linkタグにバージョンを出力することが出来るので、cssを更新したあともブラウザのキャッシュが残っていて、デザインが更新されないということを防ぐことができます。

どちらを使用すべきか

利点も多いし、推奨されているし、素直にwp_enqueue_styleを使用すればいい気がしますが、実は親テーマがどうスタイルシートを読み込んでいるかによって子テーマで使うべき方法も変わってきます

親テーマはwp_enqueue_styleでstyle.cssを読み込んでいる

親テーマのfunctions.phpでstyle.cssを読み込んでる場合、子テーマでもwp_enqueue_styleを使用し、style.cssを読み込むべきです。

functions.phpは子テーマのものが先に読み込まれるため、ここで親テーマのstyle.cssをキューに追加することで親テーマのstyle.cssの後に子テーマのstyle.cssへのリンクを出力できます。子テーマのstyle.cssは親テーマのfunctions.phpのstyle.cssの読み込む場所でキューされます。

子のfunctions.php(親のstyle.cssを読み込み)

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css')

親のfunctions.php(子のstyle.cssを読み込み)

wp_enqueue_style( 'main-style', get_stylesheet_uri())

注意点として、親テーマで複数スタイルシートを使っている場合は、親テーマのfunctions.phpをいじらない限り、依存性の指定だけでは完全な順序の制御はできません。

親のfunctions.phpで

wp_enqueue_style( 'A-style', get_template_directory_uri() . '/A.css')
wp_enqueue_style( 'main-style', get_stylesheet_uri())
wp_enqueue_style( 'B-style', get_template_directory_uri() . '/B.css')

という順番でスタイルシートが読み込まれる場合、依存関係を指定しない場合、親のstyle.css、A.css、子のstyle.css、B.cssという順番で読み込まれます。依存関係を子のfunctions.phpに指定することで、親のstyle.cssをA.cssの後に読み込ませることは可能ですが、子のstyle.cssをB.cssの後に読み込むことはできません。

wp_enqueue_styleはキューに追加するidが同じならば、後の追加は無効になるという仕様のようなので(4.1.1時点)、そのような場合は、親テーマのスタイルシートも全て同一のidで子のfunctions.phpでキューに追加します。

子のfunctions.php

wp_enqueue_style( 'A-style', get_template_directory_uri() . '/A.css')
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css')
wp_enqueue_style( 'B-style', get_template_directory_uri() . '/B.css')
wp_enqueue_style( 'main-style', get_stylesheet_uri())

これで親のfunctions.phpでのキューへの追加が無効になり、A.css、親のstyle.css、B.css、子のstyle.cssの順で読み込まれます。

親テーマはheader.phpでstyle.cssを読み込んでいる

親テーマがheader.phpのlinkタグstyle.cssを読み込んでいる場合は子テーマでwp_enqueu_styleで親テーマのstyle.cssを読み込むと、header.phpの<?php wp_head(); ?>に出力されるため、大抵の場合、子テーマのstyle.cssよりも後に読み込まれてしまいます。私がカスタマイズしようとしていたstinger5はこの方式であったため、子テーマでのカスタマイズが反映されずしばらく悩みました。この場合、@importを使用するか、親テーマをwp_enqueue_styleを使用するように編集するかどちらかになると思います。

親テーマを編集

親テーマのheader.phpとfunctions.phpを編集してスタイルシートの読み込みをwp_enqueue_styleで行うようにすれば子テーマでもwp_enqueue_styleが使用できるようになります。stinger5の場合style.cssの前に、css/normalize.cssを読み込んでいるのでnormalize.css、親style.css、子style.cssの順になるようにfunctions.phpを編集します。

子のfunctions.php

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css',array('normalize-style'))

親のfunctions.php

wp_enqueue_style('normalize-style',get_template_directory_uri() . '/css/normalize.css')
wp_enqueue_style('stinger-style',get_stylesheet_uri(),array('normalize-style'))

header.phpでスタイルシートを読み込んでいる箇所は削除します。

親テーマを変更しない

親テーマを変更しない場合、header.phpを子テーマで上書きするという手もありますが、おとなしく@importを使うのが楽でいいと思います。

今回codexで推奨されている方法で子テーマを作成しようとしたらはまってしまいました。WordPress公式テーマはwp_enqueue_styleを使用しているようですが、特にcssはwp_enqueue_styleで読み込むというガイドラインはありません。(javascriptはwp_enqueue_scriptで読み込むよう記述あり)もう少し具体的に記述しておいてもらえると混乱が少ないのではないかと思います。