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

Tweet