DAINASHI YESTERDAY

2016.08.07

WordPressのカテゴリー選択をカスタムメニューに影響させずに1つに制限する方法

27962129362_e409b46a2a_b

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

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

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

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

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 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つに制限されてしまいます。

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

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つに制限することができるようになります。

WordPressは日々アップデートされていますので、中には今回のようにせっかくの有益な情報がそのままでは使えなくなっているケースもあります。そんなときは、Google ChromeのデベロッパーツールやFirefoxのFirebugなどを使って管理画面のソースを見ながら動かない原因を探してみましょう。

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

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

?>

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

functions.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)

投稿者: