【WordPress】投稿画面でタグをチェックボックスで選択する方法|add_meta_boxesで確実に置き換える

WordPressの投稿画面で、タグをもっと簡単に選択できるようにしたいことがあります。デフォルトではタグはテキストボックスに入力して選択しますが、多くのタグを使う場合、チェックボックス形式で表示できると非常に便利です。この記事では、デフォルトのタグ機能を確実に置き換える実装方法を解説します。

この記事でわかること

  • タグをチェックボックス形式で選択できるようにする実装
  • 正しいフック(add_meta_boxes)を使う理由
スポンサーリンク

タグをチェックボックスで選択するメリット

デフォルトのタグ入力は柔軟ですが、たくさんのタグを使っている場合には、探して入力するのが手間になることもあります。チェックボックス形式にすることで、既存のタグを簡単に見つけ、選択することができます。また、誤字を防ぐためにも役立ちます。

カスタマイズ方法の概要

このカスタマイズでは、WordPressの管理画面の投稿編集ページにおいて、タグをチェックボックス形式で表示するように変更します。テーマのfunctions.phpファイルにコードを追加するだけで実装できます。

実装手順

functions.phpファイルを開き、以下のコードを追加します。デフォルトのタグメタボックスを削除し、チェックボックス形式の新しいメタボックスを追加します。

functions.php:タグをチェックボックス形式に置き換える
function custom_tags_meta_box() {
    remove_meta_box( 'tagsdiv-post_tag', 'post', 'side' ); // デフォルトのタグメタボックスを削除
    add_meta_box( 'post_tagcheckbox', 'タグ', 'custom_tags_checkbox', 'post', 'side', 'default' );
}
add_action( 'add_meta_boxes', 'custom_tags_meta_box' );

function custom_tags_checkbox( $post ) {
    $taxonomy = 'post_tag';
    $terms = get_terms( $taxonomy, array( 'hide_empty' => 0 ) ); // すべてのタグを取得
    $postterms = get_the_terms( $post->ID, $taxonomy );
    $current = $postterms
        ? array_map( function ( $term ) { return $term->term_id; }, $postterms )
        : array(); // 現在の投稿に紐付いているタグIDを取得
    $name = 'tax_input[' . $taxonomy . '][]';

    echo '<div id="taxonomy-' . esc_attr( $taxonomy ) . '" class="categorydiv">';
    echo '<ul id="' . esc_attr( $taxonomy ) . 'checklist" class="categorychecklist form-no-clear">';

    foreach ( $terms as $term ) {
        $id = 'post_tag-' . $term->term_id;
        $checked = in_array( $term->term_id, $current, true ) ? 'checked="checked"' : '';

        echo '<li id="' . esc_attr( $id ) . '">';
        echo '<label class="selectit"><input type="checkbox" id="in-' . esc_attr( $id ) . '" '
            . 'name="' . esc_attr( $name ) . '" value="' . esc_attr( $term->term_id ) . '" '
            . $checked . ' /> ' . esc_html( $term->name ) . '</label>';
        echo '</li>';
    }

    echo '</ul></div>';
}
admin_menuフックでは正しく置き換わらない
add_meta_boxes の代わりに admin_menu フックを使う実装例がありますが、これでは正しく動作しません。本番WPコア(wp-admin/includes/meta-boxes.php)を確認したところ、デフォルトの tagsdiv-post_tag メタボックスは投稿編集画面がレンダリングされるタイミングで登録されます。これは admin_menu フックよりもずっと後のタイミングです。admin_menu の時点で remove_meta_box() を呼んでも、まだ登録されていないメタボックスを消そうとするため何も起こりません。その後デフォルトのタグ入力欄が追加されてしまい、新しいチェックボックスUIとデフォルトのタグ入力欄が両方表示されてしまいます。正しくは、デフォルトのメタボックス登録より後に発火するadd_meta_boxes フックを使ってください。

コードを追加したら、管理画面の投稿編集ページを開き、タグ選択がチェックボックス形式だけで表示されているかを確認してください(デフォルトのタグ入力欄が残っていないことも確認しましょう)。

関連するタグUIのカスタマイズ

タグの入力欄自体を非表示にしたい場合は投稿画面でタグをメニューから非表示にする方法も参考になります。

よくある質問(FAQ)

Qadmin_menuとadd_meta_boxes、どちらを使うべきですか?
Aメタボックスの追加・削除にはadd_meta_boxesフックを使ってください。admin_menuは管理メニューの追加用のフックで、デフォルトのメタボックスが登録されるより早いタイミングで発火するため、メタボックスの削除がうまくいきません。
Q管理画面の投稿一覧でカスタムフィールドをフィルタリングするUIを追加するには?
Arestrict_manage_postsアクションでセレクトボックスやチェックボックスを出力し、pre_get_postsでGETパラメーターに応じてクエリを変更します。タグの場合はtax_queryを使います。
Qフィルター選択状態を保持したままページネーションするには?
Aadd_query_arg()でGETパラメーターを現在のURLに維持させます。管理画面のページネーションリンクは自動的にGETパラメーターを保持するため、pre_get_postsで正しく設定すれば問題ありません。

まとめ

  • 正しいフックadd_meta_boxesadmin_menuでは失敗する)
  • 出力esc_html()/esc_attr()で必ずエスケープする
  • 確認:デフォルトのタグ入力欄が残っていないことも確認する

これにより、デフォルトのタグ機能をそのままに、より直感的な操作が可能になります。