WordPress

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

2022年10月10日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

じゅんぺいブログは、Web制作コーディングWordPress制作)の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください!
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

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

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

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

あわせて読みたい
WordPressオリジナルテーマの作り方⑩(カスタム投稿編)
WordPressオリジナルテーマの作り方⑩(カスタム投稿編)

続きを見る

今回はタームをラジオボタンで選択できるようにする方法を解説しますが、その前にタームをデフォルトの『入力式』から『チェックボックス』にする必要があります。

今回は以下のような設定で解説します。

  • プラグイン『Custom Post Type UI』使用
  • カスタム投稿タイプ『ニュース』
  • カスタム投稿タイプスラッグ『news』
  • カスタムタクソノミー『地域』
  • タクソノミースラッグ『area』
  • ターム『東京・神奈川・埼玉・千葉』

 

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

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

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

カスタム投稿編集画面:ターム(入力式)

カスタム投稿編集画面:ターム(入力式)

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

WordPress管理画面: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です。

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

カスタム投稿編集画面:ターム(ラジオボタン)

カスタム投稿編集画面:ターム(ラジオボタン)

チェックボックスでは四角でしたが、今度は丸になっていてラジオボタンになったのが分かると思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!
あわせて読みたい
【WordPress】投稿画面のタグをチェックボックスで選択出来るようにする方法
【WordPress】投稿画面のタグをチェックボックスで選択出来るようにする方法

続きを見る

あわせて読みたい
【WordPress】投稿画面のカテゴリー選択をラジオボタンに変更する方法
【WordPress】投稿画面のカテゴリー選択をラジオボタンに変更する方法

続きを見る

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-WordPress
-