OptionTree

Tag:

OptionTreeは、デザインやレイアウトなどに関するWebサイト固有のオプションを設定する際に便利なプラグインです。管理画面に設定画面を自分で作成し、オプションAPIを使って一つずつオプションを扱っていく方法よりも手軽なのでお勧めです。

ここでは、簡単な利用方法を紹介します。「設定内容を設定する」という、ちょっとややこしい表現もあるので、実際に利用しながら確認してみることをお勧めします。

インストール

OptionTreeをインストールします。
optiontree

プラグイン有効化

プラグインを有効化すると以下の変化を確認できるかと思います。

管理画面の変化

管理画面に「OptionTreeメニュー」が追加されます。外観メニューに「Theme Optionsサブメニュー」が追加されます。
optiontree2

OptionTreeメニュー
ThemeOptions画面で設定できる内容を設定します。
Theme Optionsサブメニュー
Webサイト固有のオプションを設定します。

wp_optionsテーブルの変化

wp_optionsテーブルに下記レコードが追加されます。
optiontree1

option_nameがoption_tree
ThemeOptions画面で設定した内容を保存するのに利用されます。
option_nameがoption_tree_settings
ThemeOptions画面で設定できる内容を保存するのに利用されます。

設定できるオプション内容を追加

OptionTreeメニューにて、ThemeOptions画面で設定できる内容を追加します。

OptionTreeメニューを開くと次のようになっているかと思います。
optiontree3

まず、「Add Section」をクリックし、設定する項目のカテゴライズを追加します。
optiontree4
ここでは、DN-Web64 TESTという設定カテゴリーを追加しました。

次に、「Add Setting」をクリックし、設定項目を追加します。
optiontree5
いろいろと設定できるのですが、ここでは、LabelとIDとTypeだけを設定しました。

設定項目を追加後、wp_optionsテーブルのoption_tree_settingsの値をみてみると次のように変化していました。

a:3:{s:8:"sections";a:2:{i:0;a:2:{s:5:"title";s:7:"General";s:2:"id";s:7:"general";}i:1;a:2:{s:5:"title";s:13:"DN-Web64 TEST";s:2:"id";s:13:"dn_web64_test";}}s:8:"settings";a:2:{i:0;a:13:{s:5:"label";s:23:"Sample Text Field Label";s:2:"id";s:11:"sample_text";s:4:"type";s:4:"text";s:4:"desc";s:38:"Description for the sample text field.";s:3:"std";s:0:"";s:4:"rows";s:0:"";s:9:"post_type";s:0:"";s:8:"taxonomy";s:0:"";s:12:"min_max_step";s:0:"";s:5:"class";s:0:"";s:9:"condition";s:0:"";s:8:"operator";s:3:"and";s:7:"section";s:7:"general";}i:1;a:13:{s:5:"label";s:12:"option test1";s:2:"id";s:12:"option_test1";s:4:"type";s:4:"text";s:4:"desc";s:0:"";s:3:"std";s:0:"";s:4:"rows";s:0:"";s:9:"post_type";s:0:"";s:8:"taxonomy";s:0:"";s:12:"min_max_step";s:0:"";s:5:"class";s:0:"";s:9:"condition";s:0:"";s:8:"operator";s:3:"and";s:7:"section";s:13:"dn_web64_test";}}s:15:"contextual_help";a:1:{s:7:"sidebar";s:0:"";}}

ThemeOptions画面でWebサイト固有のオプションを設定

ThemeOptions画面を開くと、さきほど追加した設定項目が追加されていることを確認できます。Typeで「Text」を設定したので入力フィールドはTextフィールドになっています。
optiontree6

試しに、「あいうえお」と入力し「Save Changes」をクリックします。
optiontree7

設定更新後、wp_optionsテーブルのoption_treeの値をみてみると次のように変化していました。

a:2:{s:11:"sample_text";s:0:"";s:12:"option_test1";s:15:"あいうえお";} 

設定内容の取得

設定した項目の内容をfunctions.phpなどのソース上で取得するには、ot_get_option関数を利用します。例えば、先ほど設定した「option test1」の内容を取得するには次のようにします。

echo ot_get_option( 'option_test1' );  // "あいうえお" と出力されます。

ot_get_optionの引数には、「option test1」設定のIDを指定します。

今回はwp_optionsの設定について取り上げていますが、wp_postmetaの設定も行えます。wp_postmetaの設定内容の取得は次のようにWordPressのコア関数を使います。

get_post_meta($post_id, $key, $single);

第3引数の$singleには、単一の値を取得する場合はtrue、複数の値を取得する場合(配列をシリアライズしてDBに保存している場合)はfalseを指定します。

テーマでの利用

OptionTreeをプラグインとして利用する方法を紹介してきましたが、テーマに付随する設定として利用する方法もあります。詳しくは省略しますが、テーマで利用する際は、利用しているテーマフォルダにoption-treeのフォルダを設置します。テーマ特有の設定を作成していくには、theme-modeディレクトリ配下にある「demo-functions.php」「demo-meta-boxes.php」「demo-theme-options.php」などを参考にしていきます。
optiontree8

最後に

Webサイト固有のオプションを管理画面から設定できるようにしておくと、作り方によってはソースをいじらなくてもWebサイトの処理内容や見た目を変更できるようになります。プログラマー以外の人でも、気軽にサイトをカスタマイズできるようになるので役立つことが多いかと思います。

スポンサーリンク