【WordPress】カスタムフィールドの選択肢をカテゴリーによって動的に変更する方法

WordPressで投稿編集画面にカスタムフィールド（例：ACFのセレクトやチェックボックス）を導入する際、「選択肢をカテゴリーによって切り替えたい」というニーズは非常に多く見られます。本記事では、特定のカテゴリーが選択されたときに、対応する選択肢をAjaxで動的に変更する実装方法を紹介します。

実現したいこと
事前準備：ACFでカスタムフィールドを作成
JavaScriptでカテゴリー選択を検知
Ajax用JavaScriptの記述
Ajax処理（PHP側）
フィールドキーの取得方法
注意点と拡張アイデア
まとめ

実現したいこと

投稿編集画面にてカテゴリーを選択
選択されたカテゴリーに応じて、カスタムフィールドの選択肢（例：チェックボックスやセレクトボックス）を切り替える
ページ再読み込みなしに選択肢を更新（Ajax）

事前準備：ACFでカスタムフィールドを作成

Advanced Custom Fields（ACF）プラグインを使って、対象のカスタムフィールド（例：チェックボックスやセレクト）を作成します。

フィールドタイプは「チェックボックス」または「セレクト」
選択肢はダミーのものを適当に入力しておく（JavaScriptで書き換えるため）

JavaScriptでカテゴリー選択を検知

ACFが読み込まれる投稿編集画面に以下のJavaScriptを読み込みます。admin_enqueue_scriptsフックを使って追加しましょう。

add_action('admin_enqueue_scripts', 'enqueue_acf_category_script');
function enqueue_acf_category_script($hook) {
  if ($hook !== 'post.php' && $hook !== 'post-new.php') return;
  wp_enqueue_script('acf-category-switcher', get_template_directory_uri() . '/js/acf-category.js', array('jquery'), null, true);
  wp_localize_script('acf-category-switcher', 'acf_category_ajax', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('acf_category_nonce')
  ));
}

Ajax用JavaScriptの記述

acf-category.jsファイル内に、カテゴリーの変更を監視し、Ajaxで選択肢を取得・上書きする処理を記述します。

jQuery(document).ready(function ($) {
  $('#post').on('change', 'input[type=checkbox][name^="post_category"]', function () {
    const selectedCats = $('input[name="post_category[]"]:checked')
      .map(function () {
        return $(this).val();
      }).get();

    $.ajax({
      type: 'POST',
      url: acf_category_ajax.ajax_url,
      data: {
        action: 'get_custom_field_choices',
        categories: selectedCats,
        nonce: acf_category_ajax.nonce,
      },
      success: function (response) {
        if (response.success) {
          const fieldKey = 'field_XXXXXXXXXXXX'; // ACFのフィールドキーに置き換える
          const $select = $('select[data-key="' + fieldKey + '"]');

          $select.empty();
          $.each(response.data, function (key, label) {
            $select.append($('<option>').val(key).text(label));
          });
        }
      }
    });
  });
});

Ajax処理（PHP側）

選択されたカテゴリーに応じて、選択肢のリストを返す処理をサーバー側で記述します。

add_action('wp_ajax_get_custom_field_choices', 'get_custom_field_choices');
function get_custom_field_choices() {
  check_ajax_referer('acf_category_nonce', 'nonce');

  $categories = isset($_POST['categories']) ? array_map('intval', $_POST['categories']) : [];

  $choices = [];

  foreach ($categories as $cat_id) {
    $term = get_term($cat_id, 'category');
    if (!$term || is_wp_error($term)) continue;

    // カテゴリーごとの選択肢を定義
    switch ($term->slug) {
      case 'news':
        $choices += array(
          'top' => 'トップニュース',
          'local' => '地域',
        );
        break;
      case 'event':
        $choices += array(
          'seminar' => 'セミナー',
          'webinar' => 'ウェビナー',
        );
        break;
      default:
        $choices += array(
          'other' => 'その他',
        );
    }
  }

  wp_send_json_success($choices);
}