Wordpress プラグインを使わずカスタムMetaBoxを作成する方法

metaboxはカスタムフィールドの強化版みたいな感じ。デフォルトのカスタムフィールドはkeyに対して値を入力するだけだが、metaboxを使うことでカレンダーや画像の選択、セレクトボックスなどのフォームを利用できるようになる。

一番簡単に実装するなら以下のようなプラグインを使う。ここではプラグインを使わず実装する方法をまとめる。

• Advanced Custom Fields
• Meta Box

カスタムMetaBoxの作り方

metaboxを作るのに必要なのは３つの関数。１つのmetaboxで複数のフォームを作成することも可能。

• add: metaboxの定義
• save: データの保存
• html: フォームの定義

function my_custom_meta_box_add()
{
  add_meta_box(
        'post_meta_box_id',          // Unique ID
        'メタボックスのタイトル',     // タイトル
        'my_custom_meta_box_html',   // フォーム関数の呼び出し
        'post',                 // 投稿タイプ
    'default'         // 表示する位置
    );
}

function my_custom_meta_box_save($post_id)
{
  if (array_key_exists('my_custom_meta_box_field', $_POST)) {
    update_post_meta(
      $post_id,
      'my_custom_meta_box_key',
      $_POST['my_custom_meta_box_field']
    );
  }
}

function my_custom_meta_box_html($post)
{
  $value = get_post_meta($post->ID, 'my_custom_meta_box_key', true);
  ?>
  <label for="my_custom_meta_box_field">メタボックスのラベル</label>
  <select name="my_custom_meta_box_field" id="my_custom_meta_box_field" class="postbox">
    <option value="">カラーの選択</option>
    <option value="red" <?php selected($value, 'red'); ?>>Red</option>
    <option value="green" <?php selected($value, 'green'); ?>>Green</option>
  </select>
  <?php
}

// metaboxの定義
add_action('add_meta_boxes', 'my_custom_meta_box_add');
// metaboxのデータ保存
add_action('save_post', 'my_custom_meta_box_save');

カスタムMetaBoxのフォームの表示と保存

add_meta_box()で定義した投稿タイプに自動的に表示される。

表示する位置はデフォルトでカスタムフィールドの下、sideに設定すると、カテゴリやアイキャッチのあるサイドバーに表示される。

データはfunctions.phpでsave_postのフックを入れておくことで、記事を保存したり更新したりした際に一緒に保存されるようになる。

カスタムMetaBoxのデータをテンプレートに表示

テンプレートにmetaboxのデータを表示するには、カスタムフィールドと同じ方法で良い。

get_post_meta($post->ID, 'my_custom_meta_box_key', true);

記事ページでの実装例

<ul class="nav">
  <li>投稿日: <?php echo get_the_date('Y-m-d'); ?></li>
  <li>カラー: <?php echo get_post_meta($post->ID, 'my_custom_meta_box_key', true); ?></li>
</ul>