2026年7月6日

2026年7月6日

CMB2でカスタムフィールドを実装する方法

はじめに

CMB2は、カスタムポストタイプやカスタムタクソノミー用の高度なフィールド機能を提供する強力なWordPressプラグインです。この記事では、CMB2を使用してカスタムフィールドを実装する方法について詳しく説明します。

症状・背景

このテーマが必要になる主な場面:

  • カスタム投稿タイプやタクソノミーに独自のフィールドを追加したい場合
  • メディアファイルにメタデータを追加する必要がある場合
  • 既存のカスタムフィールドAPIを使用せずに、より洗練された方法でフィールドを作成したい場合

手順・設定方法

ステップ1: CMB2プラグインのインストールとアクティベーション

# WordPress管理画面から「プラグイン」ページに移動し、CMB2を検索してインストールします。
# インストールが完了したら、プラグインを有効化してください。

# CMB2の最新版をWP-CLIを使ってダウンロードおよびインストールする
wp plugin install cmb2 --activate

ステップ2: 新しいメタボックスの定義ファイルを作成

# wp-content/plugins/ディレクトリに新しいPHPスクリプトファイルを作成します。
touch wp-content/plugins/my-custom-fields.php

# そのファイルを開き、CMB2のフレームワークを呼び出し、新しいメタボックスを定義するコードを追加します。

// ファイル: wp-content/plugins/my-custom-fields.php
<?php
/**
 * Plugin Name: My Custom Fields
 */
class My_Custom_Fields {
    public function __construct() {
        add_action( 'cmb2_init', array($this, 'my_custom_metabox') );
    }

    public function my_custom_metabox() {
        $prefix = 'my_';
        $metabox = new_cmb2_box( array(
            'id'           => $prefix . 'metadata',
            'title'        => esc_html__( 'Custom Metadata', 'my-custom-fields' ),
            'object_types' => array( 'post', ), // 設定したい投稿タイプの名前
            'context'      => 'normal',
            'priority'     => 'high',
            'show_names'   => true, // フィールドラベルを表示するか否か
        ) );

        $metabox->add_field( array(
            'name' => esc_html__( 'Text Field', 'my-custom-fields' ),
            'id'   => $prefix . 'text',
            'type' => 'text',
        ) );
    }
}

new My_Custom_Fields();

ステップ3: カスタムフィールドの応用例:複数選択リストボックス

# 複数選択リストボックスを追加するために、CMB2の「multicheck」タイプを使用します。

// ファイル: wp-content/plugins/my-custom-fields.php
$metabox->add_field( array(
    'name'       => esc_html__( 'Multiple Checkboxes', 'my-custom-fields' ),
    'id'         => $prefix . 'multi_check',
    'type'       => 'multicheck',
    'options'    => array(
        'option1' => esc_html__( 'Option 1 Label', 'my-custom-fields' ),
        'option2' => esc_html__( 'Option 2 Label', 'my-custom-fields' ),
        'option3' => esc_html__( 'Option 3 Label', 'my-custom-fields' ),
    ),
) );

ステップ4: カスタムフィールドの実践的なトラブルシューティング

# フィールドが表示されない場合、以下の点を確認します:
# - CMB2プラグインは有効化されているか?
# - 定義ファイルにエラーがないか?

// 以下のようなエラーメッセージが出力される場合があります。
echo 'CMB2 Field Error: ' . esc_html( $field->get_error_message() );

注意事項

  • フィールドを追加する際は、データの保存と表示のためにメタ情報を適切に管理することが重要です。
  • セキュリティ上の理由から、カスタムフィールドに入力される全てのデータに対して十分なエスケープ処理を行うこと。
  • パフォーマンスへの影響を最小限にするため、必要以上のフィールドは追加しないでください。

まとめ

1. CMB2プラグインのインストールとアクティベーション: WordPress管理画面またはWP-CLIを使ってCMB2をインストールします。

2. 新しいメタボックス定義ファイルの作成: cmb2_initアクションを使用してメタボックスを作成します。

3. カスタムフィールドの応用例: 複数選択リストボックスなどの高度なフィールドタイプを追加できます。

4. トラブルシューティング: フィールドが表示されない場合、プラグインや定義ファイルに問題がないか確認します。

関連記事:

お気軽にご相談ください

お見積りへ お問い合わせへ