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

WordPressでは投稿編集画面でカテゴリやタグをチェックボックス・入力欄で選択できますが、選択肢が多くなると見づらく、操作性が低下します。特にタクソノミーの項目が大量にある場合、標準UIでは目的の項目を探すのが大変です。そこで本記事では、カテゴリやタグをモーダル（ポップアップ）で選択するUIに変更する実装方法を紹介します。

モーダル実装の概要
投稿編集画面にモーダルUIを追加する
タグ選択もモーダル対応にするには
まとめ

モーダル実装の概要

モーダルUIでは、投稿編集画面内にあるカテゴリ選択部分を非表示にし、「カテゴリを選択」ボタンをクリックしたときにポップアップウィンドウで選択肢を表示します。ユーザーはモーダル内でカテゴリをチェックし、「決定」ボタンで反映させることができます。

投稿編集画面にモーダルUIを追加する

以下のコードをテーマの functions.php に追加し、モーダル用のHTMLとJSを投稿編集画面に読み込みます。

// 投稿編集画面にモーダル用HTMLとJSを追加
function add_category_modal_ui() {
  $screen = get_current_screen();
  if ($screen->post_type !== 'post') 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');