aoyama

2014.12.22

WordPressでカスタムフィールドを使うならWPAlchemyがおすすめ（Advent Calendar 22日目）

ごあいさつ

どーも、aoyamaです。
前回は「長所から考えるCMS（MovableType、WordPress）の使いどころ」について書きました。
新しく他のCMSを触って、それについて書こうと思っていたら、あっという間に時間が経ってしまいました…。
そこで、今回は、「WPAlchemy」について書こうと思います。

こういう人には役に立たないと思います

・WordPressでやりたいことは、プラグインで楽々解決という方
・カスタムフィールドの再利用を考える必要のない方

次に記載しますが、そもそも、再利用を考えて、WPAlchemyを使うことにしたので、自分のブログでのみ利用される
方にはあまり役に立たない情報かと思います。

「WPAlchemy」について

なぜ「WPAlchemy」か？

カスタムフィールドといえば、よく「Advanced Custom Fields」が紹介されています。
とても高機能で、便利なのはわかるのですが、使わないのには理由があります。
・高機能すぎて、何が行われいるか把握しづらい
・プラグインで設定した内容を簡単に再利用しづらい
といったところです。

特に2番目の理由が大きく、WPのプラグインで設定した情報を一部だけ抜き出して再利用したり、
テスト環境で構築したWPをテストの記事だけ削除したいけど、設定だけは残したいといった時に不便です。

「WPAlchemy」の構成

WPAlchemyは以下の2つのファイル（それぞれに1つずつclassが定義されている）で構成されています。
・MetaBox.php
・MediaAccess.php

前者は、メタボックスの登録、メタボックスのテンプレートの登録、テンプレート内で定義したカスタムフィールドの値の値の登録、制御などを行っています。
後者は、その名の通り、メディアファイルを扱う際に使用するのもので、カスタムフィールドで画像などを扱わない場合は、使用しません。

「WPAlchemy」で出来る事

・メタボックス（カスタムフィールドを入力させる見た目）のHTMLとCSSの記述を自由にできる
・カスタムフィールドの設定、テンプレートはファイルで管理するため、再利用可能

ここら辺の話は作者のページにも詳しく書かれているので読んでみてください。

「WPAlchemy」の使い方 4つのステップ

WPAlchemy使ってカスタムフィールドを設定には、下記の4つのステップを踏むだけ。

1) WPAlchemyのファイルの設置
2) Meta Boxのテンプレートを用意
3) 設定ファイルの作成
4) 自身のテーマで入力された値の呼び出し

WPAlchemyの利用例

セミナーというカスタム投稿に、「新着アイコン」と「ステータス」表示を行う場合の例で記述してみます。

1) WPAlchemyのファイルの設置

「wp-content」フォルダの下にGitHubからダウンロードしてきた「wpalchemy」フォルダを配置します。
「wpalchemy」フォルダの中には、「MetaBox.php」と「MediaAccess.php」が含まれています。

自分のテーマフォルダの下に「metaboxes」フォルダを作ります。

2) Meta Boxのテンプレートを用意

次にメタボックスのテンプレートファイルを「template_seminar_mb.php」という名前で先ほど作成した「metaboxes」の下に配置します。
中身は下記のように記述します。

<div class="my_meta_control">
<label>新着表示</label>

<?php $mb->the_field('seminar_new_flag'); ?>
    <input type="checkbox" name="<?php $mb->the_name(); ?>" value="1"<?php $mb->the_checkbox_state('1'); ?>/> 新着表示<br/>
<span>新着の表示をする場合はチェックをいれてください。</span>

<label>ステータス表示</label>

<?php $mb->the_field('seminar_status'); ?>
    <input type="radio" name="<?php $mb->the_name(); ?>" value="open"<?php $mb->the_radio_state('open'); ?>/> 開催中<br/>
    <input type="radio" name="<?php $mb->the_name(); ?>" value="closed"<?php $mb->the_radio_state('closed'); ?>/> 終了<br/>
<span>セミナーのステータスを選択してください。</span>

</div>

<?php $mb->the_field('seminar_new_flag'); ?>

<input type="checkbox" name="<?php $mb->the_name(); ?>" value="1"<?php $mb->the_checkbox_state('1'); ?>/> 新着表示<br/>

<span>新着の表示をする場合はチェックをいれてください。</span>

<label>ステータス表示</label>

<?php $mb->the_field('seminar_status'); ?>

<input type="radio" name="<?php $mb->the_name(); ?>" value="open"<?php $mb->the_radio_state('open'); ?>/> 開催中<br/>

<input type="radio" name="<?php $mb->the_name(); ?>" value="closed"<?php $mb->the_radio_state('closed'); ?>/> 終了<br/>

<span>セミナーのステータスを選択してください。</span>

</div>

3) 設定ファイルの作成

設定ファイルを「setup.php」という名前で作成し、1）で作成した「metaboxes」の下に配置します。
また、利用するテーマの「functions.php」でこのファイルを呼び出します。

setup.php

<?php
//クラスファイルの読み込み
include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';
include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php';

//CSS読み込み
if (is_admin()) add_action('admin_enqueue_scripts', 'metabox_style');
function metabox_style() {
    wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css');
}

$custom_checkbox_mb = new WPAlchemy_MetaBox(array
(
    'id' => '_custom_seminar_meta',
    'title' => 'セミナー用設定',
    'template' => get_stylesheet_directory() . '/metaboxes/template_seminar_mb.php',
    'types' => array('seminar')
));

<?php

//クラスファイルの読み込み

include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';

include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php';

//CSS読み込み

if (is_admin()) add_action('admin_enqueue_scripts', 'metabox_style');

function metabox_style() {

wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css');

}

$custom_checkbox_mb = new WPAlchemy_MetaBox(array

(

'id' => '_custom_seminar_meta',

'title' => 'セミナー用設定',

'template' => get_stylesheet_directory() . '/metaboxes/template_seminar_mb.php',

'types' => array('seminar')

));

functions.phpに下記を追記

// 設定ファイルの読み込み
include_once 'metaboxes/setup.php';

1 2	// 設定ファイルの読み込み include_once 'metaboxes/setup.php';

4) 自身のテーマで入力された値の呼び出し

<?php   
$seminarMeta = get_post_meta($post->ID, '_custom_seminar_meta', true);
if (isset($seminarMeta['seminar_new_flag']) && $seminarMeta['seminar_new_flag']) {
    echo '新着！';
}
if (isset($seminarMeta['seminar_status']) && $seminarMeta['seminar_status'] == 'open') {
    echo '開催中！';
} elseif (isset($seminarMeta['seminar_status']) && $seminarMeta['seminar_status'] == 'closed') {
    echo '終了！';
}
?>

<?php

$seminarMeta = get_post_meta($post->ID, '_custom_seminar_meta', true);

if (isset($seminarMeta['seminar_new_flag']) && $seminarMeta['seminar_new_flag']) {

echo '新着！';

}

if (isset($seminarMeta['seminar_status']) && $seminarMeta['seminar_status'] == 'open') {

echo '開催中！';

} elseif (isset($seminarMeta['seminar_status']) && $seminarMeta['seminar_status'] == 'closed') {

echo '終了！';

}

登録された値は、「get_post_meta」関数を使って呼び出します。
今回は、カスタム投稿「seminar」のカスタムフィールドとして設定しているので、カスタム投稿を呼び出すテンプレートで、
上記の記述をします。

その他

上記はあくまでも一例で、メタボックスをサイドに表示したり、保存時にフィルターをかけたりなど機能は豊富です。
GitHubからダウンロードしたサンプルや作者のページを見て色々試してみてください。

WPAlchemy利用時の注意点

WPAlchemyで作成したカスタムフィールドの値の保存形式に注意してください。
上記の例ですと、シリアライズされた配列として保存されています。
そのため、カスタムフィールドの値が文字列として保存されていることを前提にしているプラグインでは
想定した動作をしない場合があります。
また、カスタムフィールドにドメインの文字列が含まれている場合、DBの操作でドメインの文字列を置換しても
期待する結果が得られない場合があります。

まとめ

WPAlchemyを使えば、自分でメタボックスを作成してカスタムフィールドの入力欄の見た目を自由にできます。
作成したテンプレートは再利用もでき、便利なのでおすすめです。
ただし、他プラグインとの相性は要注意なので、カスタムフィールドの値を操作する既に利用しているプラグインで
問題がないかは個別に確認してください。

最後まで読んでいただき、ありがとうございました。

明日は関根さんの番です。