WordPress3.4から、外観→テーマ で「カスタマイズ」という項目（テーマカスタマイザー）があります。Twenty Eleven では特に使いやすくて、プレビューしながら外観を決められますね。
このテーマカスタマイザーには、function.php をいじることでオリジナルの項目を追加できます。
これについては下記のサイトが参考になります。
WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう | webOpixel
WordPress 3.4の新機能テーマカスタマイザーの最速レビュー | firegoby
WordPressのテーマカスタマイザーで画像と色のカスタマイズを可能にする方法 | モンキーレンチ
ただ今回、私がやりたかったのはテキストエリアの追加。そしてテキストエリアはそのままでは追加できません。
フックでは対応できそうもなかったので、WPのコアスクリプトをいじらなければならないかな…と思っていましたが、PHPのクラス拡張で対応している説明記事がありました。
via: Making a custom control for the Theme Customizer » Otto on WordPress
1. customize_register にアクションフック
ここは上記のサイトでも説明されていますので、すでに作ってあれば追加で作る必要はありません。
2. WP_Customize_Control の拡張クラスを作成
管理画面以外で WP_Customize_Control を宣言してもエラーになってしまうので、 if文で囲んだほうが良いでしょう。
WP_Customize_Control を拡張したクラスを作成し、render_content() を上書きします。これは上記 function には入れなくてOK。テキストエリアを使いたい場合は、WP_Customize_Control を拡張したクラスを使用するわけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if(class_exists('WP_Customize_Control')): class Example_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> <textarea rows="5" style="width:100%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea> </label> <?php } } endif; |
3. add_section + add_setting + add_control
customize_register をフックした function に、下記のようなコードを追加します。add_control では上記と同様、if文で囲んでおいたほうが良いです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// セクションを追加 $wp_customize->add_section( 'themedemo_demo_settings', array( 'title' => 'Demonstration Stuff', 'priority' => 100, ) ); // セクションの設定を追加 $wp_customize->add_setting( 'textarea_setting', array( 'default' => 'Some default text for the textarea', 'type' => 'option', ) ); // 管理画面で表示する設定 if(class_exists('Example_Customize_Textarea_Control')): $wp_customize->add_control( new Example_Customize_Textarea_Control( $wp_customize, 'textarea_setting', array( 'label' => 'Textarea Setting', 'section' => 'themedemo_demo_settings', 'settings' => 'textarea_setting', ) ) ); endif; |
そんなわけで、ちょっといじってできたソースが以下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
if(class_exists('WP_Customize_Control')): class EX_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> <textarea rows="5" style="width:100%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea> </label> <?php } } endif; add_action( 'customize_register', 'my_customize_register' ); function my_customize_register($wp_customize) { // セクションを追加 $wp_customize->add_section( 'my_textarea_section', array( 'title' => 'テキストエリア', // 新しいセクションを作った際のタイトル名です 'priority' => 100, // 表示順序に関係します ) ); // セクションの設定を追加 $wp_customize->add_setting( 'my_textarea_setting', array( 'default' => 'デフォルトで入れておく値です。なくてもOK！', 'type' => 'option', // これは入れておく ) ); // 管理画面で表示する設定 if(class_exists('EX_Customize_Textarea_Control')): $wp_customize->add_control( new EX_Customize_Textarea_Control( $wp_customize, 'my_textarea_setting', array( 'label' => 'テキストエリアの入力欄', // 入力欄の上に表示されます 'section' => 'my_textarea_section', // 表示するセクション 'settings' => 'my_textarea_setting', // 参照するセクションの設定 ) ) ); endif; } |
こんな感じで追加されました！
4. 設定した値の表示方法
値は下記の方法で取得できます。せっかくのテキストエリアなので、改行を有効（nl2br）にしてあります。
|
1 |
<?php echo nl2br(get_theme_mod( 'textarea_setting' )); ?> |
get_theme_mod についての参考ページ：
Function Reference/get theme mod « WordPress Codex
get_theme_mod:WordPress私的マニュアル
テーマ自体をカスタマイズしてしまえば特に必要ないかもしれない機能ですが、たとえばお客様に納品する際に、ページもある程度変更したいということがありますよね。
あとは、マルチサイトでご提供する際に、幾つかのサイトで表示したい項目が異なる場合。例えば住所とか連絡先とか。フッターで使うといい感じです。
WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作
PHPによるWordPressカスタマイズブック―3.x対応
マルチサイトにもどうぞ／http://t.co/e4fJ0GWm [WP] テーマカスタマイザーでテキストエリアを使う | @mekemoke