カスタムフィールドをプラグインなしで自作する(1)

カスタムフィールドをプラグインなしで自作する(1)
syjantarによるPixabayからの画像

2025.02.13(更新日:2025.02.16)

カスタムフィールドを自作でメジャープラグインの様な繰り返しや自作メニューに機能を持たしてみたい。これによりプラグインに頼らなくとも実装出来るスキルを身につけ、プラグインのアップデートにヤキモキしなくとも済むようにしたい。今回はテキストフィールドを実装してみる、

この記事は1年以上経過しています。内容的に古い場合があります。

プラグインなし自作にトライ

最高に便利だった「Smart Custom Fields」が開発終了となった。代替えを考えた場合「Advanced Custom Fields」になるのだが、何やら揉め事があるようで「Secure Custom Field」に名称変更されたとかしないとか。ただ有料にしないとイマイチの部分があったり、たまに脆弱性の報告もあったりなので躊躇する。

なので思い腰を上げて「完全自作」してみようと言う内容。

カスタムフィールドを自作する上で必要な機能

単純にテキストフィールドを設置するだけならいろんなサイトで公開されているはずだがオサライ兼ねていくけど、本当に欲しい機能は以下になる。

  • 繰り返しフィールド
  • 自作のカスタムメニューにフィールド設置

いきなり上記をやるとゴチャゴチャするので段階を追ってまとめて行く。

カスタムフィールド機能追加の流れ(基本)

  1. 「add_meta_box」を使い表示する投稿等を指定する関数を自作
  2. メタボックスのHTMLを処理する関数を自作
  3. メタボックスの値を保存処理するコードを関数を自作

functions.phpに上記の流れでコードを追加することで自作カスタムフィールドが使えるようになる。

1.「add_meta_box」を使い表示する投稿等を指定する関数を自作

function add_custom_text_metabox() {
  add_meta_box(
    'custom_text_metabox', // メタボックスID
    'テキストフィールド', // メタボックスのタイトル
    'custom_text_fields_callback', // コールバック関数(2のメタボックスのHTMLを処理する関数名)
    'post', // 投稿タイプ
    'normal', // 表示場所('normal', 'side', 'advanced')
    'default' // 優先順位('high', 'core', 'default', 'low')
  );
}
add_action('add_meta_boxes', 'add_custom_text_metabox');

add_actionの第1引数には「add_meta_boxes」第2引数にはadd_meta_boxを指定した関数名を入れる。

2. メタボックスのHTMLを処理する関数を自作

function custom_text_fields_callback($post) {
  // ノンスのフィールドを追加 
  wp_nonce_field('my_custom_field_nonce_action', 'my_custom_field_nonce');
  // 投稿IDを使ってカスタムフィールドの値を取得
  $custom_value = get_post_meta($post->ID, 'my_custom_field', true);
  echo '<div class="postbox">';
  echo '<label for="my_custom_field">カスタムテキスト:</label>';
  echo '<input type="text" id="my_custom_field" name="my_custom_field" value="' . $custom_value . '">';
  echo '</div>';
}

wp_nonce_fieldを入れCSRF保護。必要があればCSSを付加出来るのでHTMLは好みのものでOK。

3. メタボックスの値を保存処理するコードを関数を自作

function save_my_custom_field($post_id) {
    // 投稿が自動保存でないか確認
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;

    // ノンスの検証
    if (!isset($_POST['my_custom_field_nonce']) || !wp_verify_nonce($_POST['my_custom_field_nonce'], 'my_custom_field_nonce_action')) {
        return $post_id; // 無効なノンス
    }

    // 投稿の権限を確認(必要あれば)
    if (!current_user_can('edit_post', $post_id)) {
        return $post_id; // 権限がない
    }

    // カスタムフィールドの値を保存
    if (isset($_POST['my_custom_field'])) {
        $custom_value = sanitize_text_field($_POST['my_custom_field']);
        update_post_meta($post_id, 'my_custom_field', $custom_value);
    }
}
add_action('save_post', 'save_my_custom_field');

これが1パッケージとなる。各ID等々の名称は適当に変更して下さい。
さらに踏み込んだ自作カスタムフィールドを気力を絞って第2段を書く予定。