前回の「WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない」の続き。
WordPress Bootstrapはテーマオプションで、読み込むスタイルシートを切り替える事ができる。
レイアウト情報などは（ほぼ）そのままに、フォントや背景、色などを切り替えられ、しかもなかなか格好いい。
この機能はぜひ子テーマでも実装したいと思うのだが、読み込むスタイルシートが動的に変わるとカスタマイズもなかなかやっかいになる。
例えばデフォルトのテーマではボーダーを黒にしたいが、別のテーマでは白にしたいと言うケース。
通常であれば、子テーマ側のstyle.cssにボーダーの定義を記述すればいいのだが、
（前回はそこでなやんだのだが・・）
設定されたテーマによって定義を切り替えるには・・と、考えた。
そこで、テーマオプションのテーマ（ややこしいので、以下オプションテーマとする）ごとに読み込むスタイルシートも上書きできるように、
子テーマ側でカスタマイズしてみた。
やる事は３つ。
１．子テーマ側に、オプションテーマを上書きするためのスタイルシートを用意する
２．子テーマのfunctions.phpに１で用意したスタイルシートを読み込むための関数を追加する
３．子テーマにもheader.phpを用意し、２で用意した関数を呼び出す機能を追加する
１．子テーマ側に、上書きするためのスタイルシートを用意する
WordPress Bootstrapのオプションテーマ用スタイルシートは
wordpress-bootstrap/admin/themesにテーマごとに格納されている。
余談だが、ここにテーマファイルを追加すれば、自動的に管理画面で変更可能なテーマとして表示される。 どこまでも柔軟な設計になってるなぁ。
そこで、子テーマも同じようにテーマごとのスタイルシートを格納できるように
子テーマのフォルダ/admin/thmemesにスタイルシートを用意する。
ちなみに、ここに用意するスタイルシートは、上書きしたい要素だけ記述すればOK。
２．子テーマのfunctions.phpに１で用意したスタイルシートを読み込むための関数を追加する
オプションテーマはfunctions.php内の関数によって読み込まれている。
wordpress-bootstrap/function.php (Ver.2.2)
[code lang=”php” line=”659″]
$bootstrap_theme = of_get_option(‘wpbs_theme’);
$use_theme = of_get_option(‘showhidden_themes’);
if( $bootstrap_theme && $use_theme ){
if( $bootstrap_theme == ‘default’ ){}
else {
echo ‘‘;
}
}
[/code]
そこで、子テーマ側のfunctions.phpにもスタイルシートを読み込むための関数を追加する。
ただし、親テーマ側の処理と変えている部分がいくつか。
・選択されているテーマがデフォルトでも、子テーマ側のスタイルシートを読み込むようにする
・参照するスタイルシートのパスは「get_template_directory_uri」ではなく、「get_stylesheet_directory_uri」を使用する
・子テーマ側にスタイルシートが存在しなければ、読み込まないようにする
と、言うわけでこんな実装になった。
子テーマのfunctions.php
[code lang=”php” line=”1″]
// Get theme options
function get_child_theme_options(){
/* 子テーマにもオプションテーマ用スタイル用のスタイルシートがあれば、読み込む */
$bootstrap_theme = of_get_option(‘wpbs_theme’);
$use_theme = of_get_option(‘showhidden_themes’);
if( $bootstrap_theme && $use_theme ){
$cssuri = get_stylesheet_directory_uri() . ‘/admin/themes/’ . $bootstrap_theme . ‘.css’;
$csspath = get_stylesheet_directory() . ‘/admin/themes/’ . $bootstrap_theme . ‘.css’;
// ファイル存在チェック
if( file_exists( $csspath ) ){
echo ‘‘;
}
}
} // end get_child_theme_options function
[/code]
ポイントは読み込む際のスタイルシートのパスと、存在チェック時のパスが異なる点。
存在チェック時はサーバ側のパスを取得する必要があるため、「get_stylesheet_directory」を使用している。
３．子テーマにもheader.phpを用意し、２で用意した関数を呼び出す機能を追加する
WordPress Bootstrapはオプションテーマを読み込むための処理をheader.phpから呼び出している。
本当は親テーマのアクションをフックして、子テーマのオプションテーマを読み込みたかったけど、これでは無理。
そこで、子テーマ側にもheader.phpを用意してオーバーライドする事に。
どうせレイアウトもいじりたいところがあったので、気にしない。
（faviconのパスがベタでかかれていやがるんだよね・・・）
子テーマのheader.php
[code lang=”php” line=”48″]
[/code]
これで、オプションテーマも好きにカスタマイズができるようになった・・・ハズ。
コメント