JOURNAL クリエイティブとマーケティングの話

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
}

まとめ

WordPressは日々アップデートされていますので、中には今回のようにせっかくの有益な情報がそのままでは使えなくなっているケースもあります。

そんなときは、Google ChromeのデベロッパーツールやFirefoxのFirebugなどを使って管理画面のソースを見ながら動かない原因を探してみましょう。