WordPressで子カテゴリーにチェックを入れたら親カテゴリーにも自動でチェックが入るようにする方法

WordPressのカテゴリーで親子関係がある場合、デフォルトでは子カテゴリーにチェックを入れても親カテゴリーに自動でチェックは入りません。

カテゴリーは親子セットで選択するケースが多いので、子カテゴリーにチェックを入れたら親カテゴリーにも自動でチェックが入るようにする方法をご紹介したいと思います。

ちなみに、以前Parent Category Togglerというプラグインを紹介しましたが、今回はプラグインを使わずに実装する方法です。

子カテゴリーにチェックを入れたら親カテゴリーにも自動でチェックが入るようにする方法

今回紹介する方法は、Xakuro Systemさんの「WordPress 親カテゴリーを自動チェックする」という記事を参考にさせていただきました。より詳しい解説はXakuro Systemさんの記事をご参照ください。

パターン1. スクリプトファイルを別途作ってfunctions.phpから呼び出す

まずは、カテゴリーのチェックボックスを制御するためのJSファイルを別に作成し、functions.phpから呼び出す方法からご紹介いたします。

以下のコードをparent-check.jsというファイル名で保存し、テーマフォルダ内のjsフォルダにアップします。

jQuery(function($) {
  $('#taxonomy-category .children input').change(function() {
    function parentNodes(checked, nodes) {
      parents = nodes.parent().parent().parent().prev().children('input');
      if (parents.length != 0) {
        parents[0].checked = checked;
        parentNodes(checked, parents);
      }
    }
    var checked = $(this).is(':checked');
    $(this).parent().parent().siblings().children('label').children('input').each(function() {
      checked = checked || $(this).is(':checked');
    })
      parentNodes(checked, $(this));
  });
});

functions.phpに以下を追加して、投稿画面でparent-check.jsを呼び出します。

function category_parent_check_script() {
  wp_enqueue_script( 'parent-check', get_template_directory_uri().'/js/parent-check.js', array( 'jquery' ) );
}
add_action('admin_print_scripts-post-new.php', 'category_parent_check_script');
add_action('admin_print_scripts-post.php', 'category_parent_check_script');

parent-check.jsのファイル名は任意で変更してもらって大丈夫です。ファイル名を変更した場合は、functions.php内のparent-check.jsも変更してください。

パターン2. functions.php内にスクリプトを記述する

JSファイルを別途作成するのが面倒だという場合は、以下のようにfunctions.php内にスクリプトも記述してあげます。

function category_parent_check_script() {
?>
<script>
jQuery(function($) {
  $('#taxonomy-category .children input').change(function() {
    function parentNodes(checked, nodes) {
      parents = nodes.parent().parent().parent().prev().children('input');
      if (parents.length != 0) {
        parents[0].checked = checked;
        parentNodes(checked, parents);
      }
    }
    var checked = $(this).is(':checked');
    $(this).parent().parent().siblings().children('label').children('input').each(function() {
      checked = checked || $(this).is(':checked');
    })
      parentNodes(checked, $(this));
  });
});
</script>
<?php
}
add_action('admin_head-post-new.php', 'category_parent_check_script');
add_action('admin_head-post.php', 'category_parent_check_script');

パターン1もパターン2もやっていることは同じです。上述したコードを追加することで、子カテゴリーにチェックが入ったら、親カテゴリーにも自動でチェックが入るようになります。

また、すべての子カテゴリーからチェックを外すと、親カテゴリーのチェックも自動で外れます。

あとがき

カテゴリーに親子関係があって、親子セットで選択している場合は、上述した内容を実装してみてください。親カテゴリーを選択し忘れるというミスもなくなり、投稿時の煩わしさも軽減されますね。