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

久々にテーマを作ろうと思い、WordPress Bootstrapを親テーマにした子テーマを作成しようと思い立ったが、
どうも、子テーマに書かれたスタイルシートが反映されないと言う現象に陥った。
調べてみると、親テーマのstyle.cssがfunctions.phpから強制的に読み込まれている様子。

wordpress-bootstrap/style.css (Ver.2.2)
[code lang=”php” line=”451″]
// 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’);
[/code]

通常のテーマなら、子テーマのstyle.css内に
[code lang=”php” line=”1″]
@import url(‘../wordpress-bootstrap/style.css’);
[/code]
と書く事で、間接的に親テーマのスタイルシートが読み込まれるはずなのに、どうもそうなっていない様子。
表示されているHtmlソースを見てみると、直接親テーマのstyle.cssが読み込まれている。
しょうがないので、子テーマ側で上記の処理をオーバーライドする事にしてみた。
ただし、この「親テーマの処理をオーバーライドする」ってのが曲者である。

functions.phpは子テーマのfunctions.php -> 親テーマのfunction.phpの順で読み込まれる。
そのため、単純に子テーマに
[code lang=”php” line=”1″]
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’);
[/code]
と書いても、親テーマの処理で上書きされてしまう。

余談だが、子テーマで「get_template_directory_uri()」を使用すると、親テーマのパスが返されてしまう。
TEMPLATEPATH、 get_bloginfo("template_url") も同様。
子テーマのパスを取得したい場合は「get_stylesheet_directory_uri()」を使用する。
名前が紛らわしいよ。。。

そこで、フックするアクションを「after_setup_theme」に変更し、実行順序を親テーマより後にする事で、
親テーマで定義された「wp_enqueue_style( ‘wp-bootstrap’)」のパスを上書きする。

こんな感じ。
[code lang=”php” line=”1″]
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’);
[/code]

これで、無事子テーマのスタイルシートが読み込まれる。

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

コメント

  1. doop doop より:

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

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

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

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

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

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

タイトルとURLをコピーしました