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

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

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

しかし納品物など、場合によってはカテゴリーの選択を一つに制限したいというときがあるかと思います。本日はそんなときのために、WordPressのカテゴリー選択を1つに制限する方法をご紹介します。

WordPressのカテゴリー選択を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
}
この完成ソースは、以下で説明している問題点をすべて修正したものです。お急ぎの場合はサッとコピペしてお使いください。

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

WordPressのカテゴリー選択を一つに制限する方法は、ネットで探せばたくさん出てきます。また、それらはすべて同じ情報源を参考にしているようで、紹介されているソースはほぼ同一のものでした↓

//カテゴリーの選択を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つに制限することができるようになります。

//カテゴリーの選択を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に追記してください。

//カテゴリーの選択を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などを使って管理画面のソースを見ながら動かない原因を探してみましょう。

functions.phpを編集したら画面が真っ白になる原因

ちなみに、WordPressのテーマによっては今回紹介したソースをそのままfunctions.phpの末尾に貼り付けて「ファイルを更新」とやると画面が真っ白になる場合があります。

これはおそらくお使いのテーマのfunctions.phpの末尾にPHPの閉じタグ

?>

が付けられているためではないかと思います。その場合は、下記のような形で最初にPHPの開始タグを追加してみてください。

PHPではソースの終わりに閉じタグはなくて大丈夫です。むしろ、閉じタグのあとに改行やスペースが入っているとエラーの原因になったりしますので、必要なければ閉じタグは書かない方がいいと思います。
<?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を編集するときには必ずバックアップを取るようにしましょう。そうすることで、万が一更新後に画面が真っ白になってもすぐ復旧することができます。

photo credit: SimplePix – Responsive WordPress Blog Magazine Theme #2 via photopin (license)

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら