WPAlchemy MetaBox PHP Classとは
WordPressでカスタムフィールドを利用するときは、デフォルトのままだと使いづらいので、「Custom Field Template」や「Custom Field GUI Utility」を利用する方も多いと思います。
大抵のことはこれらのプラグインで思い通りに作成することが出来ると思うのですが、カスタムフィールドの入力フォームのデザインに手を加えようとしたり、プラグインにはない機能を実装しようとした際に、どうしてもプラグインだけでは対応が難しいときもあるかと思います。
かと言ってカスタムフィールドのフォームを１から実装しようとするとなかなか骨がいる作業です。
そういったときに便利なのが、WPAlchemy MetaBox PHP Classです。
これはプラグインではなく、テーマファイルのなかに設定データなどを置いて利用します。
フォーム部分はマークアップする必要が有るため、管理画面からポチポチ出来るプラグインと比べると少し面倒かもしれませんが、プラグインよりも使い勝手の良いカスタムフィールドを実装することが可能になります。
また一度テンプレートを作ってしまえば、他のテーマで再利用することも容易なので、サイトに必ず入るようなカスタムフィールドなどは都度管理画面からフォームを生成するより効率よく実装することが可能になります。
WPAlchemy MetaBox PHP Classの使用方法
1.ダウンロード
ファイルはgithubからダウンロードすることが出来ます。
Github:https://github.com/farinspace/wpalchemy
2.設置
ダウンロードしたファイルを解凍すると、下記のような構成になっているかと思います。
/wpalchemy-master/
└─ wp-content/
├─ themes/
│ └─ mytheme/・・・テーマファイル
│ ├─ functions.php・・・wpalchemyの設定ファイルを読みこむ設定を記述
│ └─ metaboxes/・・・wpalchemyの設定ファイル群
└─ wpalchemy/ ・・・クラスライブラリ群
├── MediaAccess.php
└── MetaBox.php
設置場所は自由に変更可能ですが、とりあえず上記の構成のまま設置すれば問題ないでしょう。
functions.phpはwpalchemyの設定ファイルを読みこむ記述が書いてあるのですが、テーマフォルダに元からあるfunctions.phpを上書きして消してしまわないように注意して下さい。
3.設定ファイル作成
設置が完了したら、wpalchemyの設定ファイルを作成していきます。
Metaboxesのなかを見ると、「setup.php」「○○-spec.php」「○○-meta.php」の3種類のファイルがあります。主に下記のように使い分けされています。
「setup.php」・・・クラスライブラリやCSSの読み込みなどの設定ファイル 「○○-spec.php」・・・カスタムフィールドの設定ファイル 「○○-meta.php」・・・カスタムフィールドの入力フォームテンプレートファイル
今回は下記のように、setup.phpと○○-spec.phpをまとめてひとつの設定ファイルに記述してしまいます。
setup.php
03 | include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php'; |
04 | include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php'; |
05 | $wpalchemy_media_access = new WPAlchemy_MediaAccess(); |
07 | if (is_admin()) add_action('admin_enqueue_scripts', 'metabox_style'); |
08 | function metabox_style() { |
09 | wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css'); |
12 | $custom_metabox = new WPAlchemy_MetaBox(array |
14 | 'id' => '_custom_meta', |
15 | 'title' => 'カスタムフィールド', |
16 | 'types' => array('post'), |
17 | 'mode' => WPALCHEMY_MODE_EXTRACT, |
18 | 'template' => get_stylesheet_directory() . '/metaboxes/custom-meta.php', |
1～10行目は、クラスライブラリとカスタムフィールドのフォームに使うCSSの読み込み設定を記述しています。パスは設置した場所に合わせて変更して下さい。
11行目～はカスタムフィールドの設定を記述しています。
例では投稿タイプにcustom-meta.php（フォームテンプレート）を読みこむ設定になっています。フォームのパターンが複数ある場合は、この設定を複数記述することになります。
1 | $custom_metabox = new WPAlchemy_MetaBox(array |
5 | $custom_metabox2 = new WPAlchemy_MetaBox(array |
設定に使用する主なプロパティは下記になります。この他にもプロパティがありますが、長くなるので省略します。詳しくは公式サイトを参照して下さい。
| プロパティ名 |
説明 |
| id |
meta_key名。
（※WPALCHEMY_MODE_ARRAYの場合） |
| title |
編集画面のカスタムフィールド上部に表示されるタイトルになります。 |
| types |
カスタムフィールドを表示させる投稿タイプを選択することができます。 |
| mode |
カスタムフィールドの値の保存方法です。
連想配列として一つにまとめて保存されるArrayModeと個別に保存されるExtractModeがあります。 |
| template |
編集画面に表示するカスタムフィールドのテンプレートを選択します。 |
| hide_editor |
デフォルトで表示されるWYSIWYGを非表示にします。 |
4.入力フォームテンプレートの作成
フォームテンプレートは、ページの一部に読み込まれるので、headタグやbodyタグなどの記述は不要です。入力フォーム部分だけマークアップし、inputやselectといった要素に決められたフォーマットでPHPを埋め込んでいきます。
フォーマットは基本的には下記のようになります。
テキストボックス
1 | <?php $mb->the_field('key'); ?> |
2 | <input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/> |
テキストエリア
1 | <?php $mb->the_field(' key '); ?> |
2 | <textarea name="<?php $mb->the_name(); ?>" col="3" rows="3"><?php $mb->the_value(); ?></textarea> |
セレクトボックス
1 | <?php $mb->the_field('key'); ?> |
2 | <select name="<?php $mb->the_name(); ?>"> |
3 | <option value="">Select...</option> |
4 | <option value="a"<?php $mb->the_select_state('a'); ?>>a</option> |
5 | <option value="b"<?php $mb->the_select_state('b'); ?>>b</option> |
6 | <option value="c"<?php $mb->the_select_state('c'); ?>>c</option> |
複数選択が可能なセレクトボックスの場合は、下記のようにkeyのあとに「WPALCHEMY_FIELD_HINT_SELECT_MULTI」を指定する。
1 | <?php $mb->the_field('s_single3', WPALCHEMY_FIELD_HINT_SELECT_MULTI); ?> |
ラジオボタン
1 | <?php $mb->the_field('key'); ?> |
2 | <input type="radio" name="<?php $mb->the_name(); ?>" value="a"<?php $mb->the_radio_state('a'); ?> id=”rb1” /><label for=”rb1”>a</label> |
3 | <input type="radio" name="<?php $mb->the_name(); ?>" value="b"<?php $mb->the_radio_state('b'); ?> id=”rb2” /><label for=”rb2”>b</label> |
4 | <input type="radio" name="<?php $mb->the_name(); ?>" value="c"<?php $mb->the_radio_state('c'); ?> id=”rb3” /><label for=”rb3”>c</label> |
チェックボックス
1 | <?php $mb->the_field('key'); ?> |
2 | <input type="checkbox" name="<?php $mb->the_name(); ?>" value="a"<?php $mb->the_checkbox_state('a'); ?> id=”ck” /><label for=”ck”>a</label> |
複数選択が可能なチェックボックスの場合は、下記のようにkeyのあとに、「WPALCHEMY_FIELD_HINT_CHECKBOX_MULTI」を指定する。
1 | <?php $mb->the_field('key', WPALCHEMY_FIELD_HINT_CHECKBOX_MULTI); ?> |
どの要素にも下記の記述がありますが、これがカスタムフィールドのキーの指定になります。
1 | <?php $mb->the_field('key'); ?> |
例：記事のメタ情報を入力できるカスタムフィールド
テンプレート
01 | <div class="customFieldBox"> |
03 | <?php $mb->the_field('title'); ?> |
04 | <input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>" /> |
07 | <?php $mb->the_field('keyword'); ?> |
08 | <textarea name="<?php $mb->the_name(); ?>" rows="3"><?php $mb->the_value(); ?></textarea> |
10 | <label>ディスクリプション</label> |
11 | <?php $mb->the_field('description'); ?> |
12 | <textarea name="<?php $mb->the_name(); ?>" rows="3"><?php $mb->the_value(); ?></textarea> |
表示例（※css未調整）
5.テンプレートでの利用方法
カスタムフィールドの値の取得には、通常通りget_post_meta()を使用すれば良いのですが、ここでひとつ注意があります。
Setup.phpのカスタムフィールドの設定でmodeの指定が「WPALCHEMY_MODE_ARRAY」になっている場合は、カスタムフィールドに入力された値がすべて一つにまとまって保存されるため、下記のように記述して取得します。
1 | $meta = get_post_meta(get_the_ID(), $custom_metabox->get_the_ID(), TRUE); |
カスタムフィールドがたくさんある場合などに、「WPALCHEMY_MODE_ARRAY」モードは便利です。
今回は、WPAlchemy MetaBox PHP Classの利用方法までをご説明いたしましたが、いかがでしたでしょうか？
