WordPress Bootstrapのテーマカスタマイズ機能を子テーマからカスタマイズしてみる

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

WordPress Bootstrapはテーマオプションで、読み込むスタイルシートを切り替える事ができる。
レイアウト情報などは(ほぼ)そのままに、フォントや背景、色などを切り替えられ、しかもなかなか格好いい。
この機能はぜひ子テーマでも実装したいと思うのだが、読み込むスタイルシートが動的に変わるとカスタマイズもなかなかやっかいになる。

例えばデフォルトのテーマではボーダーを黒にしたいが、別のテーマでは白にしたいと言うケース。
通常であれば、子テーマ側のstyle.cssにボーダーの定義を記述すればいいのだが、
(前回はそこでなやんだのだが・・)
設定されたテーマによって定義を切り替えるには・・と、考えた。

そこで、テーマオプションのテーマ(ややこしいので、以下オプションテーマとする)ごとに読み込むスタイルシートも上書きできるように、
子テーマ側でカスタマイズしてみた。

やる事は3つ。

1.子テーマ側に、オプションテーマを上書きするためのスタイルシートを用意する
2.子テーマのfunctions.phpに1で用意したスタイルシートを読み込むための関数を追加する
3.子テーマにもheader.phpを用意し、2で用意した関数を呼び出す機能を追加する

 

1.子テーマ側に、上書きするためのスタイルシートを用意する

WordPress Bootstrapのオプションテーマ用スタイルシートは
wordpress-bootstrap/admin/themesにテーマごとに格納されている。

余談だが、ここにテーマファイルを追加すれば、自動的に管理画面で変更可能なテーマとして表示される。
どこまでも柔軟な設計になってるなぁ。

そこで、子テーマも同じようにテーマごとのスタイルシートを格納できるように
子テーマのフォルダ/admin/thmemesにスタイルシートを用意する。
ちなみに、ここに用意するスタイルシートは、上書きしたい要素だけ記述すればOK。

 

2.子テーマのfunctions.phpに1で用意したスタイルシートを読み込むための関数を追加する

オプションテーマはfunctions.php内の関数によって読み込まれている。

wordpress-bootstrap/function.php (Ver.2.2)

      $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 '<link rel="stylesheet" href="' . get_template_directory_uri() . '/admin/themes/' . $bootstrap_theme . '.css">';
        }
      }

そこで、子テーマ側のfunctions.phpにもスタイルシートを読み込むための関数を追加する。
ただし、親テーマ側の処理と変えている部分がいくつか。

・選択されているテーマがデフォルトでも、子テーマ側のスタイルシートを読み込むようにする
・参照するスタイルシートのパスは「get_template_directory_uri」ではなく、「get_stylesheet_directory_uri」を使用する
・子テーマ側にスタイルシートが存在しなければ、読み込まないようにする

と、言うわけでこんな実装になった。

子テーマのfunctions.php

// 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 '<link rel="stylesheet" href="' . $cssuri . '">';
		}
	}
} // end get_child_theme_options function

ポイントは読み込む際のスタイルシートのパスと、存在チェック時のパスが異なる点。
存在チェック時はサーバ側のパスを取得する必要があるため、「get_stylesheet_directory」を使用している。

 

3.子テーマにもheader.phpを用意し、2で用意した関数を呼び出す機能を追加する

WordPress Bootstrapはオプションテーマを読み込むための処理をheader.phpから呼び出している。
本当は親テーマのアクションをフックして、子テーマのオプションテーマを読み込みたかったけど、これでは無理。
そこで、子テーマ側にもheader.phpを用意してオーバーライドする事に。
どうせレイアウトもいじりたいところがあったので、気にしない。
(faviconのパスがベタでかかれていやがるんだよね・・・)

子テーマのheader.php

	<!-- theme options from options panel -->
	<?php get_wpbs_theme_options(); ?>
	<?php get_child_theme_options(); ?>

これで、オプションテーマも好きにカスタマイズができるようになった・・・ハズ。


この投稿へのコメント

コメントはありません。

コメントを残す

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

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

トラックバックはありません。

トラックバック URL