WordPressでカスタムフィールドを使うとき、デフォルトのものだと味気ないしわかりにくい。カスタムフィールドを使いやすくしたい、でもACFやSCFはどうなるかわからなくて不安、そういうときのベストプラクティスを見つけてしまいました。
Meta BoxというプラグインでカスタムフィールドのUIを改善できます！メタボックスという入力用UIを自動生成してくれて、あとはコピペするだけ、みたいにしてくれるプラグインです。
カスタムフィールドとは？という方は以前記事を書きましたのでこちらを参考にしてみてください。
Meta Boxインストール
Meta Box…そのままですが、メタボックスを簡単に作ってくれるし、普通のカスタムフィールドではできない、画像やグループ機能、繰り返し機能もついてる凄いプラグインです。
このプラグインは有効化すると右画像がでてきて、Online Generaterで作業することになります。このリンクからページ移動すると、Meta Boxのサイトに行きますのでそこでメタボックスを作成します
Meta Box作成
Settings
最初にSettingsタブを開き、グループの設定をします。
Field group title…編集画面にグループ名として出るので、わかりやすいように「商品カード」とかつけとくと良いと思います。
Field group ID…divタグのIDとして出ていました。このIDが無いとうまく機能しないのでIDはきちんと付けておきましょう。
Post types…Post: 投稿タイプの全てのページにメタボックスが表示されます。Page: 全ての固定ページにメタボックスが表示されます。細かく設定したいときは後でコードに追記する必要があります。
Position…メタボックス表示場所。タイトル下などの選択肢もありますがうまくいきませんでした。普通にAfter Contentを選択しておけば良い。（投稿画面の内容すぐ下に出ます）
Priority…優先順位、Lowにすると画面下のオプション欄のラスト近くに出てしまって良くないと思うので、Highにすべき
Autosave…メタボックスに入力し終わった時点でオートセーブになる機能？いらないと思う
Field ID prefix…そのグループのIDにつくprefixを設定できます。判別しやすくなるしID名が被らないように設定しておいた方がいいと思う
Text domain…使う翻訳ファイルを設定。翻訳ファイルがあるならそれを設定。作ってない人は、他の影響を受けないように自分の作ってるテーマ名や、使ってるテーマ名を入れておくといいです。
Fields
次は作りたいカスタムフィールドを設定していきます。左側の項目を選ぶと、そのカスタムフィールド設定タブが出てきます。
Basic…テキストやチェックボックスなど基礎的な入力項目
Advanced…カラーピッカー、グーグルマップなど多様な入力項目
Upload…画像やファイルなどの入力項目
他にもいろいろあります。
Label…入力項目のラベルとして投稿画面に出てくるので、わかりやすいラベル名をつけましょう
ID…入力欄のidやnameとしてhtmlタグに出ます。これがないとうまく機能しないので忘れずつける。prefixをSettingsで設定している場合は簡単な名前でOKです。
Description…入力欄に説明をつけることができます。投稿画面にでる。
Default value…初期値。ないなら放置
Placeholder…プレイスホルダー。
Size of the input box…文字数をいれる。その文字数が入る幅になるが、英字基準なので、日本語だと二倍換算して入れた方が良い
Cloneable…複製して複数の入力値を入れるかどうか。
テキストエリアや画像も同様に設定してきます。テキストエリアのColumsも英字基準なので日本語のときは2倍して入力した方が良かったです。画像の設定の中のForce deleteはチェックを入れると、削除した画像は即座にデータベースとサーバーから完全に消去され復元ができなくなるので入れない方がいいかと思います。
コード生成
SettingsでもFieldsのタブでも多分どっちでもいいんだけど、設定が終わったらGenerate Codeというボタンを押してコードを生成します。
コピーしてfunctions.phpにはりつけるだけです。
たくさんのメタボックスを生成するとコードが冗長化するので、自作テーマディレクトリの中に別のファイルを作ってそこにコードをコピペし、functions.phpに読み込むこともできます。
以下はmy-meta-box.phpというファイルを作ってfunctions.phpに読み込むコード
<?php
// Meta Box 関連のコードを読み込む
require_once get_template_directory() . '/my-meta-box.php';
〇どこのページに適用するか設定する
$meta_boxes[]の中の最初の設定項目の中に’post_types’ => [‘post’],などと設定することで、投稿タイプのどのタイプかを設定できます。
<?php
add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
function your_prefix_register_meta_boxes( $meta_boxes ) {
$prefix = 'myFirst_';
$meta_boxes[] = [
'title' => esc_html__( 'My First Meta Box Group', 'myOriginalTheme' ),
'id' => 'myFirstMetaBoxGroup',
'post_types' => ['post'],// 投稿タイプをここで指定
'context' => 'normal',
'fields' => [
[
'type' => 'text',
'name' => esc_html__( 'Text', 'myOriginalTheme' ),
'id' => $prefix . 'text',
........作成例
左図が上記の設定のメタボックスの作成例です。（上の方に別のカスタムフィールドが出来ていますが、無視してください）
テキスト入力欄が英字基準になってたので狭くなってしまいました。しかしこんなに簡単にすっきりしたUIのカスタムフィールドができるなんてすごい。
入力した値をページへの出力
カスタムフィールドと同様にWordPress関数のget_post_meta()で値を取得できます。
// MetaBoxプラグインのカスタムフィールド
$mb_text = get_post_meta(get_the_ID(), 'myFirst_text', true);
// 値が存在する場合のみ出力
if ($mb_text) {
echo '<p class="intro-text">' . esc_html($mb_text) . '</p>';
}MetaBoxプラグインの関数であるrwmb_metaやrwmb_get_valueなどを使っても値を取得できます。
$value = rwmb_meta( $field_id );
echo $value;<!-- MetaBox関数を使ってイメージ画像を出してみる -->
<?php $mb_image = rwmb_meta( 'myFirst_image', ['size' => 'full'], get_the_ID() ); ?>
<p>
<strong>MetaBoximage:</strong>
</p>
<p>
<?php
// 画像が存在する場合にのみ出力
if ( $mb_image ) {
// 画像のURLを取得して表示
foreach ( $mb_image as $image ) {
echo "<img src='" . esc_url( $image['url'] ) . "' alt='Image' />";
}
}
?>
</p> 上記はtypeがimageのものの出力コードです。
MetaBoxドキュメントのfierld typesのページで、それぞれのフィールドの出力の例などが載っているので参考にすると良いです。
※Meta Boxのフィールドタイプは似たようなものがいっぱいあり、例えば画像を投稿できるフィールドタイプだと[image, single image, image upload,…]など複数あります。imageは無料枠で使えますが配列で値が返ってくるなど、他のフィールドと間違えるとちゃんとデータが返ってきません。自分が設定したフィールドをきちんと参照して出力方法を調べましょう。（ちなみにsingle imageは一つのイメージの値が返ってくるため扱いやすいですが有料枠です。）
Cloneableにチェックをつけても配列で返ってくるようになるので、foreachなどでループ処理する必要がでてきます。
