そろそろWordPress3.4の足音が聞こえてきたということで、プラグインの動作チェックなどを行なっていたところ気になる新機能が目につきました。
その名はテーマカスタマイザー！！
なにそれ？もう名前だけで、めっちゃ面白そうじゃんということで早速このテーマカスタマイザーを使ってtwentyelevenでロゴ画像を設定できるようにしてみました。
テストした環境
テストした環境は以下のとおりです。
- WordPressのバージョン： 3.4-beta4-20800
- 使用テーマ： twentyeleven
今回はとりあえず動作確認ということでtwentyelevenのfunctions.phpを直接ゴリゴリいじってますが、たぶん子テーマでも使えるはずですよ。^^
テーマカスタマイザーの概要
超かいつまんで説明すると、テーマカスタマイザーとは、テーマを独自にカスタマイズするための項目をUIも含めてとても簡単に実装することができるAPIです。
すごく簡単にできちゃったので早速サンプルを紹介しちゃいましょう。
今からやること
テーマカスタマイザーに画像をアップロードするインターフェースを追加してtwentyelevenのヘッダーにあるブログ名の位置にロゴ画像をアップロードして表示できるようにしちゃいましょう。
これは使えますよ！
テーマカスタマイザーのコールバック関数を実装する。
とりあえず今回はtwentyelevenを使用しますので、twentyelevenのfunctions.phpに以下の記述を入れましょう。
コールバック関数名は適当に。ここまではこういうもんだということで。笑
コールバック関数にセクションを追加するための記述を入れる。
先ほど追加したコールバック関数で項目をつかするためのメソッドadd_section()を実行するための記述を入力します。
- セクションのID （twentyeleven_logo_imageの部分） – この部分はWordPress全体でユニークである必要があるようなので、他のテーマに変えた際に悪影響を及ぼさないように先頭にテーマ名を入れたほうがいいようです。
- title – これはテーマカスタマイザーで表示するためのタイトルです。
- priority – 優先順位。数字が小さいほど上に表示されます。
セクションの権限や保存先などの設定を行う。
セクションを追加したら、そのセクションを操作できる権限やどこに保存するかなどをadd_settingメソッドで設定します。
ここは説明がめんどくさいので自分で調べてください。笑
画像をアップロードするためのUIを作成する。
これって普通にphpでゴリゴリ実装しようと思うとかなり大変なんですが、テーマカスタマイザーを使用すると拍子抜けするぐらい簡単でちょっと感動しました。
テーマカスタマイザーでUIを作成するには以下のようにadd_control()を使用します。
テーマカスタマイザーのUIでは他にもoptionやcheckboxなどのフォームも使用できますが、詳しい解説を書くのは大変なので、Codexを待っていただくということで。笑
画面の確認
ここまでできたら一度テーマカスタマイザーを確認してみましょう。
テーマに反映する
ここまでできたら後はロゴ画像がテーマに表示されるようにしましょう。
ここから先は見慣れたテンプレートタグを使用するだけなので簡単です。
テーマカスタマイザーで保存された値はadd_setting()で指定された値に従って保存されます。
今回はoptionテーブルのtwentyeleven_logo_imageというキーに保存されるようにしましたので、header.phpの<hgroup>〜<hgroup>に以下のような記述を入れれば。ロゴ画像のカスタマイズが可能になります。
参考サイト
まだ正式リリース前の機能だけに情報量は少ないのですが、テーマカスタマイザーに関しては以下のページで詳しく解説されています。
How to leverage the Theme Customizer in your own themes » Otto on WordPress
ぜひぜひお試しあれ！