jQueryでwp_list_categoriesを展開式にする

カテゴリーを一覧表示するWordpressのテンプレートタグ「wp_list_categories」。すべて表示すると縦に長くなってしまうので個人的にはあまり好きじゃない。
それをjQueryの少しのコードで展開式にする方法。最初、クラスを読み取ってカテゴリー名をクリックすれば子カテゴリーが表示するように使用と思ったのですが、それでは親カテゴリーに飛べないので、子カテゴリーを持っている場合のみ展開ボタンを挿入することに。
CSSがある程度分かればカスタイマイズも簡単かと。

wp_list_categoriesで吐き出されるHTML

大体こんな感じになります。自動で追加されるクラスなどは省略しています。

今回の場合で肝なのは、子カテゴリーを持っている「li」は、「ul」を持っているということになります。そしてその子カテゴリーの「ul」を開け閉めしたいわけです。

PHPの記述

まずはカテゴリー表示したいテンプレート内に、wp_list_categoriesを利用してテンプレートタグを記述します。

ulのid「CatList」は任意です。パラメータで「title_li=」を渡してますが、これは初期設定で表示されるタイトルを無表示にするためです。
wp_list_categoriesの詳しい説明はここには書きませんが、下記の参考サイトをご覧になって下さい。
参考サイト：http://elearn.jp/wpman/function/wp_list_categories.html
上記のサイトはテンプレートタグを調べるのにとても助かっています。パラメータ一覧や返り値が出ていたりととても分かりやすいです。

ｊQueryの記述

次にjQueryの記述です。ページが読み込まれると子カテゴリーを隠し、自動生成した展開ボタンにより展開させます。
$(function(){と});みたいなコードの間に記述すればいいんだと思います。

最初の1行目では、
「#CatList」の「li」が「ul(子カテゴリー)」を持っていれば、展開ボタン「<a class=”Open”> </a>」を生成し、その子カテゴリーをdisplay:noneで隠す設定になっています。
展開ボタンのclass名「Open」は任意です。後ほどcssで背景画像を利用したボタンにするため、aタグの中はスペースを入れていますが、画像を直接入れてもよさそうですし、「開閉」とか入れてもいいかもしれません。開閉はダサそうですが。。。
2行目～3行目は、
生成した展開ボタン <a class="Open"> </a> がクリックされた時の動作です。
toggleClassでクラス「On」があったら「On」をつけて、なかったら外すという処理をしています。
またslideToggleで兄弟要素のulも同様にスライドアップ、スライドダウンをさせます。

CSSの記述

jQueryで隠したりしているのでほとんどはお好みですが、展開ボタンをCSSで装飾すれば完了です。
クラスOpenに対して、Onで切り分けているので、

の2つを記述すればいいと思います。これにより開いている時の画像を切り替えたり出来ます。
また、最初から子カテゴリーを消したい時は、jQueryの.children('ul').css({"display":"none"})のところを消し、CSSに

を追記してあげれば大丈夫だと思います。