【WordPress】カテゴリーごとにカスタムフィールドの選択肢を動的に変える方法

WordPressで投稿画面にカスタムフィールドを追加する際、カテゴリーごとに選択肢を動的に切り替えたいというニーズは多くあります。特にAdvanced Custom Fields（ACF）を使用しているケースでは、投稿タイプに紐づく柔軟なUIを求める場面が増えています。

この記事では、選択されたカテゴリーに応じてカスタムフィールドの選択肢を動的に変更する方法を、ACFとJavaScript（Ajax）を活用して実装する方法を紹介します。

カスタムフィールドの選択肢がカテゴリーに依存するケースとは
基本的な仕組みの流れ
JavaScriptによるカテゴリー変更の検知とAjax送信
Ajaxを受け取るPHP側の処理
ACFのセレクトフィールドをあらかじめ作成しておく
注意点と拡張のヒント
まとめ

カスタムフィールドの選択肢がカテゴリーに依存するケースとは

たとえば「製品レビュー」という投稿タイプで、「カテゴリ：パソコン」では「CPU」「メモリ」「GPU」といった項目が必要になる一方、「カテゴリ：スマホ」では「画面サイズ」「バッテリー容量」「カメラ性能」といった項目が必要になるとします。

このように投稿のカテゴリーに応じて異なる選択肢や項目を表示したい場合、標準のACFだけでは実現が難しいため、動的な制御が必要になります。

基本的な仕組みの流れ

投稿編集画面でカテゴリーが変更されるのを検知
選択されたカテゴリーIDをAjaxで送信
PHPでカテゴリーに対応した選択肢を生成して返す
JavaScriptで該当するセレクトボックスの中身を差し替える

この4ステップで動的な切り替えを実現します。

JavaScriptによるカテゴリー変更の検知とAjax送信

管理画面の投稿編集ページでカテゴリー変更を検知し、Ajax通信を行うJavaScriptを以下のように記述します。これはadmin_enqueue_scriptsで読み込んでおきます。

jQuery(document).ready(function ($) {
  $('#categorychecklist input[type="checkbox"]').on('change', function () {
    const checked = $('#categorychecklist input[type="checkbox"]:checked');
    if (checked.length > 0) {
      const categoryId = checked.first().val(); // 最初にチェックされたカテゴリID

      $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
          action: 'get_dynamic_acf_options',
          category_id: categoryId,
        },
        success: function (response) {
          // 選択肢を動的に置き換える
          const selectField = $('select[name="acf[field_123456789abc]"]'); // ACFフィールドのname属性を正確に指定
          selectField.empty();
          $.each(response.data, function (index, value) {
            selectField.append($('<option>', {
              value: value,
              text: value,
            }));
          });
        },
      });
    }
  });
});

Ajaxを受け取るPHP側の処理

次に、Ajaxリクエストを受けてカテゴリーに対応する選択肢を返す処理をfunctions.phpに記述します。

add_action('wp_ajax_get_dynamic_acf_options', 'get_dynamic_acf_options');
function get_dynamic_acf_options() {
  $category_id = isset($_POST['category_id']) ? intval($_POST['category_id']) : 0;
  $options = [];

  // カテゴリIDに応じた選択肢を定義（動的にDBから取得してもOK）
  if ($category_id === 5) {
    $options = ['CPU', 'メモリ', 'GPU'];
  } elseif ($category_id === 7) {
    $options = ['画面サイズ', 'バッテリー容量', 'カメラ性能'];
  }

  wp_send_json_success($options);
}

ACFのセレクトフィールドをあらかじめ作成しておく

管理画面でACFのフィールドグループにセレクトボックスを作成し、選択肢を仮でもいいので登録しておきます。JavaScriptで中身を上書きするため、初期値は後で上書かれて問題ありません。

注意点と拡張のヒント

カテゴリーが複数選択される場合は、どのIDを優先するか設計方針を決める必要があります。
カテゴリーではなく、カスタムタクソノミーや他のフィールドによって選択肢を制御する応用も可能です。
サーバー側の選択肢をDBから動的に取得するようにすれば、さらに柔軟な運用ができます。

まとめ

WordPressの投稿画面で、カテゴリーに応じてACFの選択肢を動的に切り替えることで、より直感的で柔軟な管理UIが実現できます。本記事のようにJavaScript（Ajax）＋PHP＋ACFを組み合わせることで、用途に応じた高度なカスタマイズが可能になります。

開発効率を高めたい、入力ミスを減らしたいという管理画面の改善に、ぜひ取り入れてみてください。