【WordPress】カテゴリ・タグ選択をモーダルで実装する方法

// 投稿編集画面にモーダル用HTMLとJSを追加（クラシックエディタ専用）
function add_category_modal_ui() {
  $screen = get_current_screen();
  if ($screen->post_type !== 'post') return;

  // ブロックエディタ（Gutenberg）では#categorydivが存在せず機能しないため対象外にする
  if (method_exists($screen, 'is_block_editor') && $screen->is_block_editor()) return;

  ?>
  <style>
    .category-modal { display: none; position: fixed; top: 10%; left: 50%; transform: translateX(-50%); width: 500px; max-height: 70%; overflow-y: auto; background: #fff; border: 1px solid #ccc; padding: 20px; z-index: 10000; }
    .category-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; }
  </style>

  <div class="category-modal-overlay"></div>
  <div class="category-modal">
    <h2>カテゴリを選択</h2>
    <ul>
      <?php
        $categories = get_categories(array('hide_empty' => false));
        foreach ($categories as $cat) {
          echo '<li><label><input type="checkbox" value="' . esc_attr($cat->term_id) . '" class="js-cat-check">' . esc_html($cat->name) . '</label></li>';
        }
      ?>
    </ul>
    <button type="button" class="button js-cat-modal-confirm">決定</button>
    <button type="button" class="button js-cat-modal-close">閉じる</button>
  </div>

  <script>
    jQuery(document).ready(function($) {
      // 元のカテゴリーUIを非表示
      $('#categorydiv').hide();
      // トリガーボタンを追加
      $('#categorydiv').before('<button type="button" class="button js-cat-modal-open">カテゴリを選択</button>');

      $('.js-cat-modal-open').on('click', function() {
        $('.category-modal, .category-modal-overlay').fadeIn();
      });

      $('.js-cat-modal-close, .category-modal-overlay').on('click', function() {
        $('.category-modal, .category-modal-overlay').fadeOut();
      });

      $('.js-cat-modal-confirm').on('click', function() {
        // チェックされたIDだけ反映
        const selectedIds = [];
        $('.js-cat-check:checked').each(function() {
          selectedIds.push($(this).val());
        });

        // 元のチェックボックスに反映
        $('#categorydiv input[type="checkbox"]').prop('checked', false);
        selectedIds.forEach(id => {
          $('#categorydiv input[value="' + id + '"]').prop('checked', true);
        });

        $('.category-modal, .category-modal-overlay').fadeOut();
      });
    });
  </script>
  <?php
}
add_action('admin_footer-post.php', 'add_category_modal_ui');
add_action('admin_footer-post-new.php', 'add_category_modal_ui');