WordPressのカテゴリーをｊQueryでアコーディオンに
WordPressの入れ子式カテゴリーをjQueryで開閉式にする
ECサイトなど、カテゴリー数が尋常ではないレベルのカテゴリー数になってしまった場合、Javascriptで入れ子になったカテゴリーはアコーディオンで開閉式にしてあげるのがスマートで大人なダンディズムです。
2階層のカテゴリーをアコーディオンに
親子式のカテゴリーWordpressで作成して
<?php wp_list_categories('show_count=TRUE&=1&title_li='); ?>
と記入すると、以下のようなHTMLが出力されますね。出力されるカテゴリーのリンクをdivで囲ったとするとこうなります。
<div id="side"> <ul> <li class="cat-item cat-item-225649"><a href="#">あ行</a> (4972) <ul class='children'> <li class="cat-item cat-item-225647"><a href="#">あ のリスト</a> (2564) </li> <li class="cat-item cat-item-225648"><a href="#">い のリスト</a> (2696) </li> </ul> </li> <li class="cat-item cat-item-226589"><a href="#" title="か行 に含まれる投稿をすべて表示">か行</a> (214) <ul class='children'> <li class="cat-item cat-item-226590"><a href="#">か のリスト</a> (214)</li> </ul> </li> </ul> </div>
このタグを、クリック時にアコーディオンで開き、かつ、他のアコーディオンを開くと自然に閉じるようにするには以下のコードを書きます。
$(document).ready(function(){
//親カテゴリーのリンクはjQueryで削除。必要な場合は以下1行を削除
$('#side > ul > li').children('a').removeAttr('href');
//初期状態では隠す
$('#side .children').hide();
//親カテゴリーをクリックしたら
$('#side > ul >li').click(function(){
//子供を表示
$(this).children('ul').show('slow');
$('#side > ul >li>ul').not($(this).children('ul')).hide('slow');
});
});
親カテゴリーをクリックした時に子供のカテゴリーを表示させたいため、親のカテゴリーのhrefはjQueryで削除してしまいました。(親カテゴリーをクリックした後、親カテゴリーのページにジャンプしてしまうのを防ぐためです)
DEMO
3階層になったWordpressのカテゴリーをアコーディオンにする
先ほどのケースに比べると少ないですが、Wordpressで3階層になった親子関係のカテゴリーリストもjQueryでアコーディオンにしてみました。親子関係、子孫関係がもうめちゃめちゃですが、以下のように書くと無事実装できました。
$(document).ready(function(){
//親カテゴリーのリンクはjQueryで削除。必要な場合は以下1行を削除
$('#side > ul > li').children('a').removeAttr('href');
//親カテゴリーのリンクはjQueryで削除。必要な場合は以下1行を削除
$('#side > ul >li > ul > li').children('a').removeAttr('href');
//初期状態では隠す
$('#side .children').hide();
//親をクリックしたら
$('#side > ul >li').click(function(){
//クリックされた子供のｕｌを表示する
$(this).children('ul').show('slow');
//それ以外のulは隠す
$('#side > ul >li>ul').not($(this).children('ul')).hide('slow');
});
$('#side > ul >li > ul > li').click(function(){
$(this).children('ul').show('slow');
$('#side ul ul ul').not($(this).children('ul')).hide('slow');
});
});
こちらのDEMOですが、こちらのサイトで実装しました。デモとしてよろしければご覧下さい。
今日のまとめ
個人的にはliを入れ子にするのは好きではありません。半分意地になって今回デフォルト出力のまま実装してしまいました。wp-includes/category-template.php こちらで直接Wordpressのwp_list_categoriesのタグが変更も出来るようです。