WordPress

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

800部突破!※ 4月15日値上げ予定

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

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

  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です。

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

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

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

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

以上になります。

あわせて読みたい
【WordPress】投稿画面のタグをチェックボックスで選択出来るようにする方法
【WordPress】投稿画面のタグをチェックボックスで選択出来るようにする方法

続きを見る

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

続きを見る

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
800部以上販売し、レビューは430件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-WordPress
-