メニュー 閉じる

カテゴリー(子カテゴリー)を開閉式にする

functions.phpに下記を追加

//カテゴリー開閉

//js・cssファイルを読み込めるようにするコード
function add_editor_css_js( ) {
    wp_enqueue_style( 'admin_cat_toggler_style', get_template_directory_uri() . '/common/css/cat-toggler.css' );
    wp_enqueue_script( 'admin_cat_toggler_script', get_template_directory_uri() . '/common/js/cat-toggler.js', array('jquery'), '1.0.0', true );
}
add_action( 'enqueue_block_editor_assets', 'add_editor_css_js' );


//選択中のカテゴリーが上にきてみづらくなるのを修正する
function keep_category_order( $args, $post_id ) {
$args['checked_ontop'] = false;


return $args;
}
add_action( 'wp_terms_checklist_args', 'keep_category_order', 10, 2 );
JSファイル追加
/wp-content/themes/customify(テーマ名)内に「JSフォルダ」を作成して
「cat-toggler.js」ファイルを作成

(function($) {
$(function() {

$('.categorychecklist > li').each(function(i,el) {
if ($(this).find('.children').length > 0)
$(this).prepend('<span class="term-toggler with-child">+</span>');
else
$(this).prepend('<span class="term-toggler no-child">+</span>');
});

$('.term-toggler.with-child').each(function(i, el) {
$(this).on('click', function(e) {
$(this).parent().children('.children').toggle();
});
});

$('.categorychecklist').prepend('<div class="all-term-toggler all-closed">すべて開く</div>');

$('.all-term-toggler').each(function(i, el) {
$(this).on('click', function() {
if ($(this).hasClass('all-closed')) {
$(this).parent().find('.children').show();
$(this).removeClass('all-closed').text('すべて閉じる');
} else {
$(this).parent().find('.children').hide();
$(this).addClass('all-closed').text('すべて開く');
}
});
});

});
})(jQuery);



(function($) {
$(function() {
setTimeout(function() {
$('.editor-post-taxonomies__hierarchical-terms-list > .editor-post-taxonomies__hierarchical-terms-choice').each(function(i,el) {
if ($(this).find('.editor-post-taxonomies__hierarchical-terms-subchoices').length > 0)
$(this).prepend('<span class="term-toggler with-child">+</span>');
else
$(this).prepend('<span class="term-toggler no-child">+</span>');
});

// 「+」をクリックすると開閉するように
$('.term-toggler.with-child').each(function(i, el) {
$(this).on('click', function(e) {
$(this).parent().children('.editor-post-taxonomies__hierarchical-terms-subchoices').toggle(); // 孫カテゴリー、孫孫カテゴリーがあることも考え .children で子カテゴリーだけを取得
});
});

},1000);
});
})(jQuery);

CSSファイル追加

/wp-content/themes/customify(テーマ名)内に「cssフォルダ」を作成して
「cat-toggler.css」ファイルを作成
.term-toggler {
margin-right: 0.2em;
cursor: pointer;
}

.term-toggler.no-child {
visibility: hidden;
}

.categorychecklist > li > .children {
margin-left: 2.5em !important;
display: none;
}

.all-term-toggler {
cursor: pointer;
}