親子カテゴリーのチェックボックス連動プラグインを制作【wordpressプラグイン】

wordpressの親子関係があるカテゴリーって子供をチェックしても親がチェックされないんですよね。

親子の階層が増えれば増えるほど、全部を選択するのがめんどくさくなります。

しかも、階層構造をチェックしないで、保存してしまうと階層の入れ子がくずれてしまいます。

カテゴリーの親子関係のチェックボックス連動・階層構造の保持プラグイン

カテゴリーの親子関係のチェックボックス連動・階層構造の保持プラグイン

今回作成したのは、上記の２つの問題を両方解決させるプラグインです。カテゴリーの見栄えをわかりやすくしたい方はぜひご利用下さい。

wp_terms_checklist_argsで階層構造を維持

カテゴリーボックスのカスタマイズはフックが用意されてるので、こちらを利用するだけ。

function custom_wp_terms_checklist_args( $args, $post_id = null ) {
    $args['checked_ontop'] = false;
    return $args;
}
add_action( 'wp_terms_checklist_args', 'custom_wp_terms_checklist_args' );

jsで親要素・子要素のカテゴリを連動

階層がどのくらい深くなるかはユーザー次第なので、指定の親要素の全てを配列として取得できるparents()と、指定の子要素全てを取得するfind()が当てはまる。

(function($){
	$(document).on('change', '#categorychecklist li input[type="checkbox"]', function(){
		var _this = $(this);
		category_check_linkage(_this);
	});	

	/*
	 * カテゴリーボックスのチェック連動
	 */
	function category_check_linkage(_this) {
		var prop_checked = _this.prop('checked');
		if(prop_checked){
			$(_this.parents('li[id^="category-"]')).each(function(){
				$(this).children('.selectit').children('input[type="checkbox"]').prop('checked', prop_checked);
			});
		} else {
			$(_this.closest('li[id^="category-"]').find('li[id^="category-"]')).each(function(){
				$(this).children('.selectit').children('input[type="checkbox"]').prop('checked', prop_checked);
			});
		}
	}
})(jQuery);