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って、設定でスタイルの切り替えができるんだよね。
スタイル切り替えた時とかも、標準のスタイルシートを読み込んでよいものか?
設定に合わせて、そこいら辺も切り替えた方がいいのかな?
もうちっと調査が必要。


この投稿へのコメント

  1. doop said on 2012年9月22日 at 15:25

    後日談。
    WordPress Bootstrapのstyle.cssは主にレイアウトに関する指定があり、
    各テーマのcssは主に、色やらフォントやらの指定がされているみたい。
    うまくできてるわ。
    カスタマイズするときも、その辺を意識して修正した方がいいみたいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. 子テーマでのCSSカスタマイズ | neglog said on 2013年6月29日 at 19:53

    […]  WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop […]

  2. WordStrap子テーマの問題解決 | neglog said on 2013年6月30日 at 00:51

    […] 参考 WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop […]

  3. […] 動作を確認してみてください。 子テーマのstyle.cssが読まれるようになったかと思います。 【参考】 ・WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop […]

  4. […] 参考:WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop 参考:【注意】子テーマをつくってのカスタマイズ方法 -functoins.php篇-|ThePresentNote […]

  5. […] 前回の「WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない」の続き。 […]

トラックバック URL