WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない
久々にテーマを作ろうと思い、WordPress Bootstrapを親テーマにした子テーマを作成しようと思い立ったが、
どうも、子テーマに書かれたスタイルシートが反映されないと言う現象に陥った。
調べてみると、親テーマのstyle.cssがfunctions.phpから強制的に読み込まれている様子。
wordpress-bootstrap/style.css (Ver.2.2)
// enqueue styles function theme_styles() { // This is the compiled css file from LESS - this means you compile the LESS file locally and put it in the appropriate directory if you want to make any changes to the master bootstrap.css. //wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '1.0', 'all' ); //wp_register_style( 'bootstrap-responsive', get_template_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' ); wp_register_style( 'wp-bootstrap', get_template_directory_uri() . '/style.css', array(), '1.0', 'all' ); //wp_enqueue_style( 'bootstrap' ); //wp_enqueue_style( 'bootstrap-responsive' ); wp_enqueue_style( 'wp-bootstrap'); } add_action('wp_enqueue_scripts', 'theme_styles');
通常のテーマなら、子テーマのstyle.css内に
@import url('../wordpress-bootstrap/style.css');
と書く事で、間接的に親テーマのスタイルシートが読み込まれるはずなのに、どうもそうなっていない様子。
表示されているHtmlソースを見てみると、直接親テーマのstyle.cssが読み込まれている。
しょうがないので、子テーマ側で上記の処理をオーバーライドする事にしてみた。
ただし、この「親テーマの処理をオーバーライドする」ってのが曲者である。
functions.phpは子テーマのfunctions.php -> 親テーマのfunction.phpの順で読み込まれる。
そのため、単純に子テーマに
if ( ! function_exists( 'child_theme_styles' ) ) { function child_theme_styles() { wp_register_style( 'wp-bootstrap', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' ); wp_enqueue_style( 'wp-bootstrap'); } } add_action('wp_enqueue_scripts', 'child_theme_styles');
と書いても、親テーマの処理で上書きされてしまう。
余談だが、子テーマで「get_template_directory_uri()」を使用すると、親テーマのパスが返されてしまう。 TEMPLATEPATH、 get_bloginfo("template_url") も同様。 子テーマのパスを取得したい場合は「get_stylesheet_directory_uri()」を使用する。 名前が紛らわしいよ。。。
そこで、フックするアクションを「after_setup_theme」に変更し、実行順序を親テーマより後にする事で、
親テーマで定義された「wp_enqueue_style( ‘wp-bootstrap’)」のパスを上書きする。
こんな感じ。
if ( ! function_exists( 'child_theme_styles' ) ) { function child_theme_styles() { wp_register_style( 'wp-bootstrap', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' ); wp_enqueue_style( 'wp-bootstrap'); } } add_action('after_setup_theme', 'child_theme_styles');
これで、無事子テーマのスタイルシートが読み込まれる。
ただWordPress Bootstrapって、設定でスタイルの切り替えができるんだよね。
スタイル切り替えた時とかも、標準のスタイルシートを読み込んでよいものか?
設定に合わせて、そこいら辺も切り替えた方がいいのかな?
もうちっと調査が必要。
この投稿へのトラックバック
-
-
[…] WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop […]
-
-
-
[…] 参考 WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop […]
-
-
-
[…] 動作を確認してみてください。 子テーマのstyle.cssが読まれるようになったかと思います。 【参考】 ・WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop […]
-
-
-
[…] 参考:WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop 参考:【注意】子テーマをつくってのカスタマイズ方法 -functoins.php篇-|ThePresentNote […]
-
-
-
[…] 前回の「WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない」の続き。 […]
-
- トラックバック URL
この投稿へのコメント
後日談。
WordPress Bootstrapのstyle.cssは主にレイアウトに関する指定があり、
各テーマのcssは主に、色やらフォントやらの指定がされているみたい。
うまくできてるわ。
カスタマイズするときも、その辺を意識して修正した方がいいみたいね。