WordPressのCocoonを使って子テーマを自分で作成し有効化したところ、大きなレイアウト崩れは起こらなかったが、メディアクエリが効かなくなりレスポンシブにならなくなってしまった、、
原因は子テーマのスタイルシートを適用するには、親でスタイルシートをどのように読みこんでいるかによって、子テーマのfunctions.phpの記述が変わること。
対処方法
今回の場合は、親テーマが親と子のスタイルシートを両方とも読み込む仕様になっているため、functions.phpに記述したwp_enqueue_styleとwp_enqueue_scriptsの記述が不要だった。
<?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( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
上記のコードをfunctions.phpから削除して保存したところ問題なく動いた。
子テーマのスタイルを適用するには、子テーマの中のstyle.cssに直接CSSを記述していけばOK。
/*
Theme Name: cocoon-my-child
Template: cocoon-master
Description: Cocoonのオリジナル子テーマ
Author: Proぐらし
Version: 1.0.0
*/
img{
max-width: 10%;
}上記のように、子テーマにテスト用のCSSを記載。functions.phpには特に何も記述していない。
この状態で保存してブラウザをリロードすると、画面幅に追従してスタイルが変わるようになり、かつ、子テーマのstyle.cssに記載した内容も正しく反映された。
日本語の公式サイトにはwp_enqueue_styleで親のスタイルシートを読み込んでから、子のスタイルシートを読み込むようにと記述があったのに、、
親テーマのスタイルシートの読み込み方によって子テーマの記述が異なる
英語のWordpress公式ドキュメントを確認したところ、親テーマでどのようにスタイルシートを読み込んでいるかによって、子テーマのfunctions.phpの記述が異なることがわかった。
- 親テーマが両方とも読み込む場合
- 親テーマがget_templatemで読み込んでいる場合
- 親テーマがget_stylesheetで読み込んでいる場合
親テーマが両方とも読み込む場合
親テーマが両方とも読み込む場合は、子テーマのfunctions.phpに何も記述する必要がない。子テーマのstyle.cssに記述すれば、親テーマのスタイルに追加して子テーマのスタイルが読み込まれる。同セレクタを指定した場合は上書きになる。
今回はこの場合に該当。
親テーマがget_templatemで読み込んでいる場合
親テーマがget_template_directory() や get_template_directory_uri()などの、get_templatemでスタイルシートを読み込んでいる場合、子テーマのfunctions.phpで子テーマのスタイルシートのみを読み込む必要がある。
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}親テーマがget_stylesheetで読み込んでいる場合
親テーマがget_stylesheet_directory() や get_stylesheet_directory_uri()などの、get_stylesheetでスタイルシートを読み込んでいる場合、子テーマのfunctions.phpで子テーマのスタイルシートのみを読み込む必要がある。
その際の注意点は２つ。
- 親のスタイルシートは親で指定しているハンドルネームを使用する
- 親のスタイルシートを読み込んでから、子のスタイルシートを読み込む
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style';
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}うーん、なかなかに奥が深い。無事解決したのでなにより。
