WordPressのカテゴリー選択を1つに制限する方法

WordPressのカテゴリーは、通常は複数選択できるようになっています。

しかし納品物など、場合によってはカテゴリーの選択を一つに制限したいというときがあるかと思います。

本日はそんなときのために、WordPressのカテゴリー選択を1つに制限する方法をご紹介します。

WordPressのカテゴリー選択を1つに制限するソース

まずは完成したソースコードから。

お使いのテーマのfunctions.phpに追記してください。

functions.php

//カテゴリーの選択を1つに制限
add_action( 'admin_print_footer_scripts', 'limit_category_select' );
function limit_category_select() {
	?>
	<script type="text/javascript">
		jQuery(function($) {
			// 投稿画面のカテゴリー選択を制限
			var categorydiv = $( '#categorydiv input[type=checkbox]' );
			categorydiv.click( function() {
				$(this).parents( '#categorydiv' ).find( 'input[type=checkbox]' ).attr('checked', false);
				$(this).attr( 'checked', true );
			});
			// クイック編集のカテゴリー選択を制限
			var inline_edit_col_center = $( '.inline-edit-col-center input[type=checkbox]' );
			inline_edit_col_center.click( function() {
				$(this).parents( '.inline-edit-col-center' ).find( 'input[type=checkbox]' ).attr( 'checked', false );
				$(this).attr( 'checked', true );
			});
			
			$( '#categorydiv #category-pop > ul > li:first-child, #categorydiv #category-all > ul > li:first-child, .inline-edit-col-center > ul.category-checklist > li:first-child' ).before( '<p style="padding-top:5px;">カテゴリーは1つしか選択できません</p>' );

		});
	</script>
	<?php
}

上記の完成ソースは、以下で説明している問題点をすべて修正したものです。お急ぎの場合はサッとコピペしてお使いください。

カスタムメニューに影響してしまう……

WordPressのカテゴリー選択を一つに制限する方法は、ネットで探せばたくさん出てきます。

また、それらはすべて同じ情報源を参考にしているようで、紹介されているソースはほぼ同一のものでした↓

functions.php

//カテゴリーの選択を1つに制限
add_action( 'admin_print_footer_scripts', 'limit_category_select' );
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
}

WordPressの管理画面にチェックボックスの選択を一つに制限するJavaScriptを読み込ませることで、カテゴリー選択を1つに制限しています。

ほぼこのソースで問題ないのですが、実はこのままだと投稿画面とクイック編集だけでなく、カスタムメニュー編集画面のチェックボックスまで選択が1つに制限されてしまいます。

カスタムメニューでは、複数選択して追加するという操作ができた方が便利ですので、できればカスタムメニューのチェックボックスまでは制限しないで実装したいところです。

カスタムメニューとは、WordPressダッシュボードの「外観」→「メニュー」から入れるナビゲーションメニューなどを編集できる機能のことです。この機能はお使いのテーマによっては無効になっている場合もあります。

idとclassを修正

上記のソースがなぜカスタムメニューにまで影響してしまうかというと、カスタムメニューのチェックボックスの親要素となるulにも同じclass名「categorychecklist」が付けられているためです。

ですので、Google Chromeのデベロッパーツールなどでカスタムメニューの方に影響しないidまたはclass名を見つけて指定しなおしてやれば、投稿画面とクイック編集のみカテゴリー選択を1つに制限することができるようになります。

functions.php

//カテゴリーの選択を1つに制限
add_action( 'admin_print_footer_scripts', 'limit_category_select' );
function limit_category_select() {
	?>
	<script type="text/javascript">
		jQuery(function($) {
			// 投稿画面のカテゴリー選択を制限
			var categorydiv = $( '#categorydiv input[type=checkbox]' );
			categorydiv.click( function() {
				$(this).parents( '#categorydiv' ).find( 'input[type=checkbox]' ).attr('checked', false);
				$(this).attr( 'checked', true );
			});
			// クイック編集のカテゴリー選択を制限
			var inline_edit_col_center = $( '.inline-edit-col-center input[type=checkbox]' );
			inline_edit_col_center.click( function() {
				$(this).parents( '.inline-edit-col-center' ).find( 'input[type=checkbox]' ).attr( 'checked', false );
				$(this).attr( 'checked', true );
			});
			$( '#categorydiv #category-pop ul > li:first-child, #categorydiv #category-all ul > li:first-child, .inline-edit-col-center ul.category-checklist > li:first-child' ).before( '<p style="padding-top:5px;">カテゴリーは1つしか選択できません</p>' );
		});
	</script>
	<?php
}

ソースの大部分ははじめに紹介したソースと一緒です。

違うのは「投稿画面のカテゴリー選択を制限」の部分の「.categorychecklist」が「#categorydiv」に、「クイック編集のカテゴリー選択を制限」の部分の「.cat-checklist」が「.inline-edit-col-center」になっている点です。

クラス名「.categorychecklist」「.cat-checklist」はカスタムメニュー画面でも使われているため、投稿画面・クイック編集だけでなくカスタムメニューにまで上記のJavaScriptが影響してしまっていました。

そのため、投稿画面・クイック編集の方にのみ付与されているID・クラスを指定することで、カスタムメニューに影響することなく投稿・クイック編集のみでカテゴリー選択を1つに制限することができるようになります。

【2018/03/10 追記】投稿カテゴリーをネストしたときにテキストが重複するのを修正

上記のソースだと、投稿カテゴリーをネストした場合(子カテゴリーを作った場合)に「カテゴリーは1つしか選択できません」というテキストが重複して表示されることが分かりました。

以下で、修正したソースコードです(冒頭で紹介した完成ソースは修正済のものです)。

functions.phpに追記してください。

functions.php

//カテゴリーの選択を1つに制限
add_action( 'admin_print_footer_scripts', 'limit_category_select' );
function limit_category_select() {
	?>
	<script type="text/javascript">
		jQuery(function($) {
			// 投稿画面のカテゴリー選択を制限
			var categorydiv = $( '#categorydiv input[type=checkbox]' );
			categorydiv.click( function() {
				$(this).parents( '#categorydiv' ).find( 'input[type=checkbox]' ).attr('checked', false);
				$(this).attr( 'checked', true );
			});
			// クイック編集のカテゴリー選択を制限
			var inline_edit_col_center = $( '.inline-edit-col-center input[type=checkbox]' );
			inline_edit_col_center.click( function() {
				$(this).parents( '.inline-edit-col-center' ).find( 'input[type=checkbox]' ).attr( 'checked', false );
				$(this).attr( 'checked', true );
			});
			
			$( '#categorydiv #category-pop > ul > li:first-child, #categorydiv #category-all > ul > li:first-child, .inline-edit-col-center > ul.category-checklist > li:first-child' ).before( '<p style="padding-top:5px;">カテゴリーは1つしか選択できません</p>' );

		});
	</script>
	<?php
}