CMB2を使ったWordPressのカスタムフィールド作成方法

Sena カレンダーアイコン 2024.08.16

はじめに

WordPressでカスタムフィールドを作る際、保存処理だけでは無く管理画面のUIを作る必要があるため、自力で書かずプラグインに頼っている開発者も多いと思います。

カスタムフィールドのプラグインと言えば、ACF（Advanced Custom Fields）が有名です。

https://www.advancedcustomfields.com/

ACFは管理画面から登録を行うプラグインで、誰でも簡単に登録することが可能です。ですが、ACFは一部機能が有料であったりや、初期段階の構築では向かない事が多いです。

そこで今回は、別プラグインのCMB2について紹介します。

CMB2

GitHub - CMB2/CMB2: CMB2 is a developer's toolkit for building metaboxes, custom fields, and forms for WordPress that will blow your mind.

CMB2 is a developer's toolkit for building metaboxes, custom fields, and forms for WordPress that will blow your mind. - CMB2/CMB2

https://github.com/CMB2/CMB2

CMB2は以下の特徴があります。

完全無料であること
管理画面にUIが追加されず、完全にコードベースで書くこと
WordPressコア以外に依存関係がほぼ無いこと

完全にコードベースというところがポイントで、普段PHPコードを触っている開発者にとっては慣れた方法では無いのでしょうか？

インストール

プラグインをインストールして有効化するだけでOKです。

https://ja.wordpress.org/plugins/cmb2/

使い方

functions.phpなどに以下のように書くだけです。

add_action('cmb2_admin_init', function () {
    $cmb_basic_specifications = new_cmb2_box([
        'id'           => 'basic-specifications',
        'title'        => esc_html__('基本仕様', 'cmb2'),
        'object_types' => ['post'],
    ]);
    $cmb_basic_specifications->add_field([
        'name' => esc_html__('サイズ', 'cmb2'),
        'id'   => 'size',
        'type' => 'text',
    ]);
    $cmb_basic_specifications->add_field([
        'name' => esc_html__('メールアドレス', 'cmb2'),
        'id'   => 'email',
        'type' => 'text_email',
    ]);
});

💡

その他のtypeは以下に書いてあります。

動的に増えるグループ項目も可能

add_action('cmb2_admin_init', function () {
		$cmb_link = new_cmb2_box([
        'id'           => 'link',
        'title'        => esc_html__('リンク設定', 'cmb2'),
        'object_types' => ['post'],
    ]);
    $group_field_id = $cmb_link->add_field(array(
        'id'          => 'link-group',
        'type'        => 'group',
        'description' => esc_html__('リンクを設定します（複数設定可）', 'cmb2'),
        'options'     => array(
            'group_title'   => esc_html__('リンク先 {#}', 'cmb2'),
            'add_button'    => esc_html__('追加する', 'cmb2'),
            'remove_button' => esc_html__('削除する', 'cmb2'),
            'sortable'      => true,
        ),
    ));
    $cmb_link->add_group_field($group_field_id, [
        'name' => esc_html__('リンク先', 'cmb2'),
        'id'   => 'url',
        'type' => 'text_url',
    ]);
    $cmb_link->add_group_field($group_field_id, [
        'name' => esc_html__('リンク先タイトル', 'cmb2'),
        'id'   => 'title',
        'type' => 'text',
    ]);
});