Title: カスタム・メタボックス
Author: Aki Hamano
Published: 2025年5月9日
Last modified: 2025年5月11日

---

# カスタム・メタボックス

## この投稿内

 * [メタボックスとは ?](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%a8%e3%81%af)
 * [なぜメタボックスを使うのですか ?](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%81%aa%e3%81%9c%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e4%bd%bf%e3%81%86%e3%81%ae%e3%81%a7%e3%81%99%e3%81%8b)
 * [メタボックスの追加](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e8%bf%bd%e5%8a%a0)
    - [値の取得](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e5%80%a4%e3%81%ae%e5%8f%96%e5%be%97)
    - [値の保存](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e5%80%a4%e3%81%ae%e4%bf%9d%e5%ad%98)
 * [舞台裏](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e8%88%9e%e5%8f%b0%e8%a3%8f)
 * [メタボックスの削除](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e5%89%8a%e9%99%a4)
 * [実装のバリエーション](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e5%ae%9f%e8%a3%85%e3%81%ae%e3%83%90%e3%83%aa%e3%82%a8%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3)
    - [OOP (オブジェクト指向プログラミング)](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#oop-%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0)
    - [AJAX (非同期の JavaScript と XML)](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#ajax-%e9%9d%9e%e5%90%8c%e6%9c%9f%e3%81%ae-javascript-%e3%81%a8-xml)
 * [詳細情報](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e8%a9%b3%e7%b4%b0%e6%83%85%e5%a0%b1)

[↑ ページの先頭へ戻る](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#wp--skip-link--target)

## 󠀁[メタボックスとは ?](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%a8%e3%81%af)󠁿

ユーザーが投稿を編集する際、編集画面はいくつかのデフォルトボックスで構成されます:
エディター、投稿、カテゴリー、タグ等です。これらのボックスはメタボックスです。プラグ
インは、任意の投稿タイプの編集画面にカスタムメタボックスを追加できます。

カスタム・メタボックスの内容は、通常、プラグインの目的に関連したデータをユーザー
が入力する HTML フォーム要素ですが、実質的にはどんな HTML でもかまいません。

## 󠀁[なぜメタボックスを使うのですか ?](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%81%aa%e3%81%9c%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e4%bd%bf%e3%81%86%e3%81%ae%e3%81%a7%e3%81%99%e3%81%8b)󠁿

メタボックスは、編集中の投稿に関連する情報を収集するために使用できる、便利で柔軟
なモジュール式の編集画面要素です。カスタム・メタボックスは、他のすべての投稿関連
情報と同じ画面に表示されるため、明確な関係が確立されます。

メタボックスは、見る必要のないユーザーには簡単に非表示にでき、見る必要のあるユーザー
には表示されます。メタボックスは編集画面上でユーザーが配置できます。ユーザーは自分
に合った方法で編集画面を自由に配置でき、編集環境をコントロールできます。

このページに掲載されている例はすべて、説明のためのものです。コードは本番環境には
適していません。

[入力の安全確保](https://developer.wordpress.org/apis/security/sanitizing/)、[ユーザー権限](https://ja.wordpress.org/team/handbook/plugin-development/security/checking-user-capabilities/)、
[nonce](https://developer.wordpress.org/apis/security/nonces/)、[国際化](https://ja.wordpress.org/team/handbook/plugin-development/internationalization/)
などの操作は、意図的に省略されています。これらの重要な操作には必ず対処してください。

## 󠀁[メタボックスの追加](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e8%bf%bd%e5%8a%a0)󠁿

メタボックスを作成するには、[`add_meta_box()`](https://developer.wordpress.org/reference/functions/add_meta_box/)
関数を使用し、その実行を [`add_meta_boxes`](https://developer.wordpress.org/reference/hooks/add_meta_boxes/)
アクションフックに接続します。

次の例は、`post` 編集画面と `wporg_cpt` 編集画面にメタボックスを追加するものです。

    ```notranslate
    function wporg_add_custom_box() {
      $screens = [ 'post', 'wporg_cpt' ];
      foreach ( $screens as $screen ) {
        add_meta_box(
          'wporg_box_id',                 // Unique ID
          'Custom Meta Box Title',      // Box title
          'wporg_custom_box_html',  // Content callback, must be of type callable
          $screen                            // Post type
        );
      }
    }
    add_action( 'add_meta_boxes', 'wporg_add_custom_box' );
    ```

`wporg_custom_box_html` 関数は、メタボックス用の HTML を保持します。

次の例では、フォーム要素、ラベル、その他の HTML 要素を追加しています。

    ```notranslate
    function wporg_custom_box_html( $post ) {
      ?>
      <label for="wporg_field">Description for this field</label>
      <select name="wporg_field" id="wporg_field" class="postbox">
        <option value="">Select something...</option>
        <option value="something">Something</option>
        <option value="else">Else</option>
      </select>
      <?php
    }
    ```

**メタボックスには、送信ボタンがないことに注意してください。** メタボックスの HTML
は編集画面のフォームタグの中に含まれ、ユーザーが公開または更新ボタンをクリックすると、
メタボックスの値を含むすべての投稿データが `POST` 経由で転送されます。

ここに示した例には、1つのフォームフィールド、1つのドロップダウンリストしかありま
せん。メタボックスには必要な数だけフィールドを作成できます。大量の表示フィールド
がある場合は、複数のメタボックスを使用し、各メタボックスで類似のフィールドをグループ
化することを検討してください。ページはより整理され、より視覚的にアピールできます。

### 󠀁[値の取得](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e5%80%a4%e3%81%ae%e5%8f%96%e5%be%97)󠁿

保存したユーザーデータを取得して利用するには、最初に保存した場所から取得する必要
があります。`postmeta` テーブルに保存されている場合は、[`get_post_meta()`](https://developer.wordpress.org/reference/functions/get_post_meta/)
でデータを取得できます。

次の例では、保存されたメタ・ボックスの値にもとづいてあらかじめ入力されたデータで、
以前のフォーム要素を拡張しています。メタボックスの値を保存する方法については、次
のセクションで説明します。

    ```notranslate
    function wporg_custom_box_html( $post ) {
      $value = get_post_meta( $post->ID, '_wporg_meta_key', true );
      ?>
      <label for="wporg_field">Description for this field</label>
        <select name="wporg_field" id="wporg_field" class="postbox">
          <option value="">Select something...</option>
          <option value="something" <?php selected( $value, 'something' ); ?>>Something</option>
          <option value="else" <?php selected( $value, 'else' ); ?>>Else</option>
        </select>
        <?php
    }
    ```

[`selected()`](https://developer.wordpress.org/reference/functions/selected/) 関数
について。

### 󠀁[値の保存](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e5%80%a4%e3%81%ae%e4%bf%9d%e5%ad%98)󠁿

投稿タイプが保存または更新されると、いくつかのアクションが発生します。入力された
値を保存するには、そのどれかにフックするのが適切でしょう。この例では `save_post`
アクションフックを使用していますが、状況によっては他のフックの方が適切かもしれま
せん。一つの更新イベントに対して複数回 `save_post` が発生する可能性があることに注意
してください。こうした条件を念頭に、データを保存する方法を構築してください。

入力されたデータは、WordPress の外であっても、好きな場所に保存できます。おそらく
投稿に関連するデータを扱うので、`postmeta` テーブルはデータを格納するのに都合の良い
場所になることが多いです。

次の例は、非表示の `_wporg_meta_key` メタキーの `wporg_field` フィールドの値を保存
します。

    ```notranslate
    function wporg_save_postdata( $post_id ) {
      if ( array_key_exists( 'wporg_field', $_POST ) ) {
        update_post_meta(
          $post_id,
          '_wporg_meta_key',
          $_POST['wporg_field']
        );
      }
    }
    add_action( 'save_post', 'wporg_save_postdata' );
    ```

実運用コードでは、情報ボックスに概説されているセキュリティ対策に従うことを忘れない
でください !

## 󠀁[舞台裏](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e8%88%9e%e5%8f%b0%e8%a3%8f)󠁿

通常、舞台裏で何が起こっているのかを気にする必要はありません。このセクションは完全
を期すために追加されました。

投稿編集画面が、追加されたすべてのメタボックスを表示したい場合、[`do_meta_boxes()`](https://developer.wordpress.org/reference/functions/do_meta_boxes/)
関数を呼び出します。この関数はすべてのメタボックスをループし、それぞれに関連付け
られた `callback` を呼び出します。

それぞれの呼び出しの間に、(div やタイトルなどの) 付随するマークアップが追加されます。

## 󠀁[メタボックスの削除](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%a1%e3%82%bf%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e5%89%8a%e9%99%a4)󠁿

編集画面から既存のメタボックスを削除するには、[`remove_meta_box()`](https://developer.wordpress.org/reference/functions/remove_meta_box/)
関数を使用します。渡されるパラメータは、[`add_meta_box()`](https://developer.wordpress.org/reference/functions/add_meta_box/)
でメタボックスを追加する際に使用したパラメータと完全に一致しなければなりません。

デフォルトのメタボックスを削除するには、使用されているパラメータのソースコードを
確認してください。デフォルトの [`add_meta_box()`](https://developer.wordpress.org/reference/functions/add_meta_box/)
呼び出しは、`wp-includes/edit-form-advanced.php` から行われます。

## 󠀁[実装のバリエーション](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e5%ae%9f%e8%a3%85%e3%81%ae%e3%83%90%e3%83%aa%e3%82%a8%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3)󠁿

これまで、メタボックスの実装には手続き的なテクニックを使ってきました。多くのプラグ
イン開発者は、他のさまざまなテクニックを使ってメタボックスを実装する必要性を感じ
ています。

### 󠀁[OOP (オブジェクト指向プログラミング)](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#oop-%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0)󠁿

OOP (オブジェクト指向プログラミング) を使ったメタボックスの追加は簡単で、グローバル
名前空間での名前の衝突を心配する必要もありません。

メモリを節約し、実装を容易にするために、以下の例では静的メソッドを持つ抽象クラス
を使用しています。

    ```notranslate
    abstract class WPOrg_Meta_Box {

      /**
       * Set up and add the meta box.
       */
      public static function add() {
        $screens = [ 'post', 'wporg_cpt' ];
        foreach ( $screens as $screen ) {
          add_meta_box(
            'wporg_box_id',          // Unique ID
            'Custom Meta Box Title', // Box title
            [ self::class, 'html' ],   // Content callback, must be of type callable
            $screen                  // Post type
          );
        }
      }

      /**
       * Save the meta box selections.
       *
       * @param int $post_id  The post ID.
       */
      public static function save( int $post_id ) {
        if ( array_key_exists( 'wporg_field', $_POST ) ) {
          update_post_meta(
            $post_id,
            '_wporg_meta_key',
            $_POST['wporg_field']
          );
        }
      }

      /**
       * Display the meta box HTML to the user.
       *
       * @param WP_Post $post   Post object.
       */
      public static function html( $post ) {
        $value = get_post_meta( $post->ID, '_wporg_meta_key', true );
        ?>
        <label for="wporg_field">Description for this field</label>
        <select name="wporg_field" id="wporg_field" class="postbox">
          <option value="">Select something...</option>
          <option value="something" <?php selected( $value, 'something' ); ?>>Something</option>
          <option value="else" <?php selected( $value, 'else' ); ?>>Else</option>
        </select>
        <?php
      }
    }

    add_action( 'add_meta_boxes', [ 'WPOrg_Meta_Box', 'add' ] );
    add_action( 'save_post', [ 'WPOrg_Meta_Box', 'save' ] );
    ```

### 󠀁[AJAX (非同期の JavaScript と XML)](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#ajax-%e9%9d%9e%e5%90%8c%e6%9c%9f%e3%81%ae-javascript-%e3%81%a8-xml)󠁿

メタボックスの HTML 要素は編集画面の `form` タグの中にあるので、デフォルトの挙動
としては、**ユーザーがページを投稿した後** に、`$_POST` スーパーグローバルからメタ
ボックスの値をパース (解析) します。

AJAX を使ってデフォルトの体験を向上させることができます。これにより、(ユーザーが
ページを送信したかどうかに関係なく) ユーザーの入力と行動にもとづいてアクションを
起こすことができます。

#### 󠀁[トリガーの定義](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%83%88%e3%83%aa%e3%82%ac%e3%83%bc%e3%81%ae%e5%ae%9a%e7%be%a9)󠁿

まず、トリガーを定義する必要があります。これは、リンクのクリック、値の変更、または
他の JavaScript イベントでもかまいません。

以下の例では、AJAX リクエストを実行するトリガーとして `change` を定義します。

    ```notranslate
    /*jslint browser: true, plusplus: true */
    (function ($, window, document) {
      'use strict';
      // execute when the DOM is ready
      $(document).ready(function () {
        // js 'change' event triggered on the wporg_field form field
        $('#wporg_field').on('change', function () {
          // our code
        });
      });
    }(jQuery, window, document));
    ```

#### 󠀁[クライアントサイドのコード](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%82%af%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%83%89%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89)󠁿

次に、トリガーに何をさせたいかを定義する必要があります。つまり、クライアントサイド
のコードを書く必要があります。

以下の例では `POST` リクエストを行い、レスポンスは成功か失敗のどちらかで、`wporg_field`
の値が有効か否かを示します。

    ```notranslate
    /*jslint browser: true, plusplus: true */
    (function ($, window, document) {
      'use strict';
      // execute when the DOM is ready
      $(document).ready(function () {
        // js 'change' event triggered on the wporg_field form field
        $('#wporg_field').on('change', function () {
          // jQuery post method, a shorthand for $.ajax with POST
          $.post(wporg_meta_box_obj.url,                        // or ajaxurl
            {
              action: 'wporg_ajax_change',                // POST data, action
              wporg_field_value: $('#wporg_field').val(), // POST data, wporg_field_value
              post_ID: jQuery('#post_ID').val()           // The ID of the post currently being edited
            }, function (data) {
              // handle response data
              if (data === 'success') {
                // perform our success logic
              } else if (data === 'failure') {
                // perform our failure logic
              } else {
                // do nothing
              }
            }
          );
        });
      });
    }(jQuery, window, document));
    ```

WordPress の AJAX ファイルの URL は、次のステップで作成する JavaScript カスタムオブジェクト`
wporg_meta_box_obj` から動的に取得します。

メタボックスが WordPress の AJAX ファイル URL のみを必要とする場合、新しいカスタム
JavaScript オブジェクトを作成する代わりに、定義済みの JavaScript 変数 `ajaxurl` 
を使用できます。

**WordPress の管理画面でのみ利用可能です。** ロジックを実行する前に、空でないこと
を確認してください。

#### 󠀁[クライアントサイドのコードをエンキューする](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%82%af%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%83%89%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e3%82%a8%e3%83%b3%e3%82%ad%e3%83%a5%e3%83%bc%e3%81%99%e3%82%8b)󠁿

次のステップは、コードをスクリプト・ファイルに入れ、編集画面でそれをエンキューする
ことです。

以下の例では、右記の投稿タイプの編集画面に AJAX 機能を追加します: post、`wporg_cpt`。

スクリプトファイルは `/plugin-name/admin/meta-boxes/js/admin.js` に置かれ、`plugin-
name` はメインのプラグインフォルダー、`/plugin-name/plugin.php` は関数を呼び出す
ファイルです。

    ```notranslate
    function wporg_meta_box_scripts() {
      // get current admin screen, or null
      $screen = get_current_screen();
      // verify admin screen object
      if (is_object($screen)) {
        // enqueue only for specific post types
        if (in_array($screen->post_type, ['post', 'wporg_cpt'])) {
          // enqueue script
          wp_enqueue_script('wporg_meta_box_script', plugin_dir_url(__FILE__) . 'admin/meta-boxes/js/admin.js', ['jquery']);
          // localize script, create a custom js object
          wp_localize_script(
            'wporg_meta_box_script',
            'wporg_meta_box_obj',
            [
              'url' => admin_url('admin-ajax.php'),
            ]
          );
        }
      }
    }
    add_action('admin_enqueue_scripts', 'wporg_meta_box_scripts');
    ```

#### 󠀁[サーバーサイドのコード](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc%e3%82%b5%e3%82%a4%e3%83%89%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89)󠁿

最後のステップは、リクエストを処理するサーバーサイドのコードを書くことです。

    ```notranslate
    // The piece after `wp_ajax_`  matches the action argument being sent in the POST request.
    add_action( 'wp_ajax_wporg_ajax_change', 'my_ajax_handler' );

    /**
     * Handles my AJAX request.
     */
    function my_ajax_handler() {
      // Handle the ajax request here
      if ( array_key_exists( 'wporg_field_value', $_POST ) ) {
        $post_id = (int) $_POST['post_ID'];
        if ( current_user_can( 'edit_post', $post_id ) ) {
          update_post_meta(
            $post_id,
            '_wporg_meta_key',
            $_POST['wporg_field_value']
          );
        }
      }

      wp_die(); // All ajax handlers die when finished
    }
    ```

最後の注意点として、このページで説明されているコードには、セキュリティに配慮した
重要な操作が欠けています。本番のコードには、そのような操作が含まれていることを確認
してください。

AJAX については、[ハンドブックの AJAX の章](https://ja.wordpress.org/team/handbook/plugin-development/javascript/ajax/)
と [Codex](https://codex.wordpress.org/AJAX_in_Plugins) を参照してください。

## 󠀁[詳細情報](https://ja.wordpress.org/team/handbook/plugin-development/metadata/custom-meta-boxes/?output_format=md#%e8%a9%b3%e7%b4%b0%e6%83%85%e5%a0%b1)󠁿

 * [WordPress における複雑なメタボックス](https://www.wproots.com/complex-meta-boxes-in-wordpress/)
 * [WordPress でカスタム投稿メタボックスを作成する方法](https://www.smashingmagazine.com/2011/10/create-custom-post-meta-boxes-wordpress/)
 * [WordPress メタボックス: 包括的な開発者ガイド](https://themefoundation.com/wordpress-meta-boxes-guide/)

[原文](https://developer.wordpress.org/plugins/metadata/custom-meta-boxes/) / [日本語訳](https://github.com/jawordpressorg/developer-plugins-handbook/blob/main/metadata/custom-meta-boxes/index.md)

公開日

2025年5月9日

最終更新

2025年5月11日

[  前へ: 投稿メタデータの管理](https://ja.wordpress.org/team/handbook/plugin-development/metadata/managing-post-metadata/)

[  次へ: 投稿メタデータのレンダリング](https://ja.wordpress.org/team/handbook/plugin-development/metadata/rendering-post-metadata/)