低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

「WPAlchemy MetaBox PHP Class」を用いたカスタムフィールドの実装(1)

WPAlchemy MetaBox PHP Classとは

WordPressでカスタムフィールドを利用するときは、デフォルトのままだと使いづらいので、「Custom Field Template」や「Custom Field GUI Utility」を利用する方も多いと思います。
大抵のことはこれらのプラグインで思い通りに作成することが出来ると思うのですが、カスタムフィールドの入力フォームのデザインに手を加えようとしたり、プラグインにはない機能を実装しようとした際に、どうしてもプラグインだけでは対応が難しいときもあるかと思います。
かと言ってカスタムフィールドのフォームを1から実装しようとするとなかなか骨がいる作業です。

そういったときに便利なのが、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

01<?php
02//クラスライブラリの読み込み・インスタンス化
03include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';
04include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php';
05$wpalchemy_media_access = new WPAlchemy_MediaAccess();
06//CSS読み込み
07if (is_admin()) add_action('admin_enqueue_scripts', 'metabox_style');
08function metabox_style() {
09    wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css');
10}
11//カスタムフィールド設定
12$custom_metabox  = new WPAlchemy_MetaBox(array
13(
14    'id' => '_custom_meta',
15    'title' => 'カスタムフィールド',
16    'types' => array('post'),
17    'mode' => WPALCHEMY_MODE_EXTRACT,
18    'template' => get_stylesheet_directory() . '/metaboxes/custom-meta.php',
19));

1~10行目は、クラスライブラリとカスタムフィールドのフォームに使うCSSの読み込み設定を記述しています。パスは設置した場所に合わせて変更して下さい。

11行目~はカスタムフィールドの設定を記述しています。
例では投稿タイプにcustom-meta.php(フォームテンプレート)を読みこむ設定になっています。フォームのパターンが複数ある場合は、この設定を複数記述することになります。

1$custom_metabox  = new WPAlchemy_MetaBox(array
2(
3・・・省略
4));
5$custom_metabox2  = new WPAlchemy_MetaBox(array
6(
7・・・省略
8));

設定に使用する主なプロパティは下記になります。この他にもプロパティがありますが、長くなるので省略します。詳しくは公式サイトを参照して下さい。

プロパティ名 説明
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>
7</select>

複数選択が可能なセレクトボックスの場合は、下記のように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">
02    <label>タイトル</label>
03    <?php $mb->the_field('title'); ?>
04    <input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>" />
05     
06    <label>キーワード</label>
07    <?php $mb->the_field('keyword'); ?>
08    <textarea name="<?php $mb->the_name(); ?>" rows="3"><?php $mb->the_value(); ?></textarea>
09     
10    <label>ディスクリプション</label>
11    <?php $mb->the_field('description'); ?>
12    <textarea name="<?php $mb->the_name(); ?>" rows="3"><?php $mb->the_value(); ?></textarea>
13</div>

表示例(※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の利用方法までをご説明いたしましたが、いかがでしたでしょうか?

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ