[WP] テーマカスタマイザーでテキストエリアを使う

2012年10月1日 Categories: WEB制作Tags: , , Hijili Kosugi

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 を拡張したクラスを使用するわけです。

3. add_section + add_setting + add_control

customize_register をフックした function に、下記のようなコードを追加します。add_control では上記と同様、if文で囲んでおいたほうが良いです。

そんなわけで、ちょっといじってできたソースが以下。

こんな感じで追加されました!

4. 設定した値の表示方法

値は下記の方法で取得できます。せっかくのテキストエリアなので、改行を有効(nl2br)にしてあります。

get_theme_mod についての参考ページ:
Function Reference/get theme mod « WordPress Codex
get_theme_mod:WordPress私的マニュアル

テーマ自体をカスタマイズしてしまえば特に必要ないかもしれない機能ですが、たとえばお客様に納品する際に、ページもある程度変更したいということがありますよね。
あとは、マルチサイトでご提供する際に、幾つかのサイトで表示したい項目が異なる場合。例えば住所とか連絡先とか。フッターで使うといい感じです。





1件のコメント

  1. マルチサイトにもどうぞ/http://t.co/e4fJ0GWm [WP] テーマカスタマイザーでテキストエリアを使う | @mekemoke

    Reply

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt=""> <pre class="" title="" data-url=""> <span class="" title="" data-url="">