WordPressのカテゴリー選択部分はチェックボックスで表示されており、もちろんチェックボックスなのでひとつの記事に対して複数のカテゴリーを選択することができます。
ただ、場合によって複数選択されてほしくないということがあるので、カテゴリーを1つしか選択できないように制限する方法を備忘録兼ねて紹介します。
同じことを実装しようとする際、1つに制限するからラジオボタンに変更するというのをよく見かけます。
たしかにその方がわかりやすいので自分もその方法を使おうかと思ったのですが、投稿画面ではラジオボタンで問題なく実装できても、記事一覧のクイック編集部分がラジオボタンだと自分の知識不足もあって上手く実装できませんでした...。(正確にはとりあえず実装はできるけど、挙動が非常に怪しい)
投稿画面はラジオボタンで実装して、クイック編集に関してはいっそのこと非表示にするのも考えましたが気持ち悪い感じですし、同じく投稿画面はラジオボタンで実装して、クイック編集に関しては下記で紹介するのを用いてとかも考えたのですが、同じ機能なのに見た目がバラバラになるのも個人的に微妙でした。 なので、今回は投稿画面と投稿一覧のクイック編集ともにそのままチェックボックスを使用しつつ、jQueryを使ってカテゴリー選択を1つに制限します。
実装にはfunctions.php
を使用するので、テーマ内にない場合は作成して下記を記述してください。
function limit_category_select() {
?>
<script type="text/javascript">
jQuery(function($) {
// 投稿画面のカテゴリー選択を制限
var cat_checklist = $('.categorychecklist input[type=checkbox]');
cat_checklist.click( function() {
$(this).parents('.categorychecklist').find('input[type=checkbox]').attr('checked', false);
$(this).attr('checked', true);
});
// クイック編集のカテゴリー選択を制限
var quickedit_cat_checklist = $('.cat-checklist input[type=checkbox]');
quickedit_cat_checklist.click( function() {
$(this).parents('.cat-checklist').find('input[type=checkbox]').attr('checked', false);
$(this).attr('checked', true);
});
$('.categorychecklist>li:first-child, .cat-checklist>li:first-child').before('<p style="padding-top:5px;">カテゴリーは1つしか選択できません</p>');
});
</script>
<?php
}
add_action( 'admin_print_footer_scripts', 'limit_category_select' );
上記を記述することで見た目は変わらずチェックボックスのままですが、カテゴリーを1つしか選択できないようになっています。
このコードは投稿だけでなくカスタム投稿タイプでも問題なくカテゴリー選択が制限されるようになっているんですが、もし特定のカスタム投稿では制限したくないとかあれば、.categorychecklist
や.cat-checklist
の部分を制限したいもののみの記述へ変更してください。
自分が使うだけなら不要ではあるんですが、単純に制限しただけだとクライアントなどに「チェックボックスなのに1個しか選択できない!」とか言われるとアレなので、18行目では「カテゴリーは1つしか選択できません」という文言がイメージのように表示されるようにしています。
表示させる箇所を変更したい場合はclass指定の部分やjQueryの.before()
などを、表示させる文言を変更したい場合は「カテゴリーは1つしか選択できません」の箇所を任意でそれぞれ変更してください。