By: Tim Mansfield
functions.phpを使ってスタイルシートを読み込む場合の覚え書きです。
functions.phpを使ってスタイルシートを読み込む場合、このように記述されてます。
[php]
function theme_name_scripts() {
wp_enqueue_style( ‘style-name’, get_stylesheet_uri() );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ );
[/php]
親テーマを有効化したときはそのまま親テーマのスタイルシートが読み込まれます。
しかし子テーマを使う場合、get_stylesheet_uri()は現状のテーマで使われているスタイルシートの URI を返すので、ここでは子テーマのスタイルシートが読み込まれてしまいます。
ですので、親テーマのスタイルシートを読み込ませたい場合は、子テーマの functions.php にこのように記述して、get_template_directory_uriで親テーマのスタイルシートを読み込ませます。
[php]
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
[/php]
こうすることにより、子テーマの functions.php が読み込まれた後、親テーマの functions.php が読み込まれますので、スタイルシートの記述順としては、親テーマのスタイルシートのあとに、子テーマのスタイルシートが読み込まれます。
親テーマのスタイルシートがひとつだけの場合はこれでいいのですが、スターターテーマ _sなどを親テーマにする場合、レイアウト用のスタイルシートを別に読み込ませる必要があります。
ですので、子テーマの functions.php にて次のように、レイアウト用スタイルシートを読み込みます。
[php]
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( ‘layouts-style’, get_template_directory_uri() .’/layouts/content-sidebar.css’ );
}
[/php]
これで、子テーマの functions.php で親テーマのスタイルシートとレイアウト用スタイルシートが読み込まれ、次に親テーマの functions.php で子テーマのスタイルシートが読み込まれます。
親テーマですでに複数のスタイルシートが読み込まれている場合は、このようにすれば良いようです。
注意点として、親テーマで複数スタイルシートを使っている場合は、親テーマのfunctions.phpをいじらない限り、依存性の指定だけでは完全な順序の制御はできません。親のfunctions.phpで
[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’)
[/php]
という順番でスタイルシートが読み込まれる場合、依存関係を指定しない場合、親の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
[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())
[/php]
これで親のfunctions.phpでのキューへの追加が無効になり、A.css、親のstyle.css、B.css、子のstyle.cssの順で読み込まれます。
