【WordPress】カスタム投稿のタクソノミーのタームをラジオボタンで選択出来るようにする方法

カスタム投稿のタームって1つしか選択できないようにラジオボタンにすることって出来る？

タームとは通常投稿のカテゴリーのようなもので、カスタムタクソノミーを作成する際に『入力式』か『チェックボックス』のどちらかを選択することが出来ます（プラグイン『Custom Post Type UI』を使用した場合）　

しかしどちらも複数選択可能なので、1つしか選択できないようにする為には『ラジオボタン』にする必要があります。

そして『Custom Post Type UI』の設定では出来ないので、今回はその方法を解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

カスタム投稿のタクソノミーのタームをラジオボタンで選択出来るようにする方法

今回の手順としては以下になります。

カスタム投稿タイプ作成
カスタムタクソノミー作成
タームをチェックボックスで選択できるようにする
タームをラジオボタンで選択できるようにする

②までは以下の記事で詳しく解説しています。

タームを『入力式』から『チェックボックス』にする方法

まずカスタム投稿の編集画面を見てみます。

デフォルトではタームは『入力式』になっています。

カスタム投稿編集画面：ターム（入力式）

そして設定画面は管理画面の『CPT UI → タクソノミーの追加と編集』をクリックします。

WordPress管理画面：CPT UI → タクソノミーの追加と編集

そしてタブを『タクソノミーを編集』にして、編集したいタクソノミーを選択します（今回は『地域』）

『タクソミーを編集』にして編集したいタクソノミーを選択

そしてスクロールしていくと『設定』という項目があり、『階層』が『偽』になっています。

タクソノミーを編集：編集 → 階層（偽）

デフォルトではこの状態となっていて、この設定だとタームは『入力式』となります。

そしてここを『真』にすると、タームは『入力式』から『チェックボックス』となります。

タクソノミーを編集：編集 → 階層（真）

もう一度カスタム投稿の編集画面を見てみます。

カスタム投稿編集画面：ターム（チェックボックス）

functions.phpにラジオボタンにする為のコードを追記

まずはタクソノミースラッグを確認します。

確認するには先ほどの設定画面『タクソノミーを編集』を開きます。

タクソノミースラッグを確認

今回のタクソノミースラッグは『area』です。

そしてfunctions.phpに追記するコードはこちらになります。

  add_action( 'admin_print_footer_scripts', 'select_to_radio_area' );
  function select_to_radio_area() {
?>
<script type="text/javascript">
jQuery(function($) {
  // 投稿画面
  $('#taxonomy-area input[type=checkbox]').each(function() {
    $(this).replaceWith($(this).clone().attr('type', 'radio'));
  });
  // 一覧画面
  var area_checklist = $('.area-checklist input[type=checkbox]');
  area_checklist.click(function() {
    $(this).parents('.area-checklist').find(' input[type=checkbox]').attr('checked', false);
    $(this).attr('checked', true);
  });
});
</script>
<?php
}

全部で7ヶ所『area』がありますが、ここをご自身で設定したタクソノミースラッグに書き換えればOKです。

そして最後にもう一度カスタム投稿の編集画面を見てみます。