WordPressのテーマカスタマイザー、独自テーマに限らず、項目が管理画面から簡単に操作できるのは魅力ですね。

本サイトで配布しているテーマ【HABONE】も、WordPress?という初心者の方でも「ああなってたら．．」を実現できるようにすべく、実にたくさんの設定をテーマカスタマイザーでできるようにしています。

色関連の設定項目もたくさんあって、CSSの知識がなくても視覚的にいろいろな場所の色を細かく設定できるようにもしています（これが1つ【HABONE】テーマのウリでもあります）。

が、実際に真っ新のテーマを有効化して、色を設定していると．．．なんだか項目が多くて面倒な気が．．。

そこで考えたのが、スキン化。他のテーマのプログラムや仕様をあまりごにょごにょ参考にすることがないので、スキン機能のあるテーマが実際どんな風になっているのかは研究してませんけど、きっとそのスキン用のCSSをヘッダーの最後辺りに与えて、標準のCSSを上書きしてしまうという仕様が多いのではないかと推察しています。

でも、これだとスキンのCSSが優先されて、その後にテーマカスタマイザーから色の変更をしても適用されないし、テーマカスタマイザーの追加CSSへ書いたものすら適用されない．．なんてことになることもありそうで、せっかくテーマに色変更のオプションがあるのに機能しなくなるというもったいない状況が発生するのでは？と思います。

そこで現在考えているのが以下のような仕様。

• 色味のデザインパターンをいくつか用意してテーマカスタマイザーで選択できるようにする
• 選択した色はテーマカスタマイザー上の個々の色設定に反映され、後から自由に変更できるようにする

現在私の頭と能力の中で考えられる方法をメモとして残しておきますので、似たことをしたいと考えている方の参考になれば幸いです。

色味のデザインパターンをいくつか用意してテーマカスタマイザーで選択できるようにする

WordPressの組み込み関数に、theme_modを上書きする関数「set_theme_mod」というのがあるので、以下のコードで書き換えてみました。

function ha_theme_color_black_mods() {
    set_theme_mod('header_background_color', '#000000');
}

add_action( 'init', 'ha_theme_color_black_mods' );

ユーザー定義関数名は適当、「header_background_color」というコントロールは、【HABONE】テーマのヘッダー背景色設定の項目です

これでデータベース上のoptionsテーブルに書かれている設定が書き換えられて、ヘッダーの背景色が黒（#000000）になりました。これが使えそうです。

これをどうやって選択式にして反映させるかが次なる課題です。

テーマカスタマイザー上で上書きする

テーマの設定なので、テーマカスタマイザーで選択して上書きできるようにしてみます。

といってもテーマカスタマイザーのコントロールには、ボタンをクリックして．．というのがありません。

ググるとJSなどを使ってコントロールを追加する方法はあるようですが、そこまでする必要はなさそうという判断で、ラジオボタンを使って選択できるようにしてみます。

テーマカスタマイザーの設定項目の追加云々についてはこちらのページを参照ください

ラジオボタンを追加して、ひとまず設定項目をblackにして、上記コードを以下のように変え、設定項目がblackの時だけ（site_bulk_set_color_initというコントロールの選択がblackの時だけ）発火するようにすれば、適用されるようになりました。

function ha_theme_color_black_mods() {
    set_theme_mod('header_background_color', '#000000');
}
if(get_theme_mod('site_bulk_set_color_init') == 'black'){ 
add_action( 'init', 'ha_theme_color_black_mods' );
}

まあ、公開ボタンをクリックして、カスタマイザー画面をリロードする必要はあるものの、カスタマイザーのヘッダーの背景色部分にもきちんと反映されている（デフォルトは#ffffffでも、きちんと#000000に変わっている）ことから、動作的にはこれでよさそうな感じです。

．．．が、問題発生！

この状態で、テーマカスタマイザー上のヘッダー背景色を黒（#000000）から別の色へ変更しても、公開ボタンをクリックすると上記コードが発火して黒に戻ってしまうではありませんか．．。

これを回避する方法は．．．。

うーーん、得意の？なんちゃって更新しかなさそう（笑）。

上書きするためのカラーパターンしか選択肢がないから、どれかを選択する→どこかの色を変える→選択肢に基づいて上書きされてしまうという流れになってしまうんですね。

だったら、「なし」という選択肢を加えて、「なし」を選択して公開ボタンクリックしたら何も発火しない（つまり紐づく処理が何もない）ようにしたらよいのでは？というアイディアが浮かびました。

早速選択肢に「ブラック」と「なし」を作って、「なし」を選択して公開した後に部分的に色を変更したらうまくいきました。

これで冒頭に目標としていた

• 色味のデザインパターンをいくつか用意してテーマカスタマイザーで選択できるようにする
• 選択した色はテーマカスタマイザー上の個々の色設定に反映され、後から自由に変更できるようにする

という要件はクリアできそうです。

この機能、いつになるか分かりませんが、【HABONE】のどこかの更新バージョンで実装するべくコード追加中です。