jQueryで開閉式のカテゴリーリストを作成する : WordPress

Tweet

Pocket

jQueryで開閉式のカテゴリーリストを作成するのでメモ(当ブログ、サイドバーのカテゴリーリストで使用)。

WordPressテンプレート

テンプレートタグwp_list_categoriesを使う

使用例

カテゴリーに含まれる投稿記事数を表示する場合の例は次のようになる。

<?php wp_list_categories('title_li=&show_count=1'); ?>
JavaScriptファイル
$(function () {
	// カテゴリ開閉
	$("#category ul > li").each(function(i){
		// カテゴリーが子カテゴリーを持つなら、
		// childElement[1] → ul要素 ※子カテゴリーを持たない場合はundefined
		// childElement[0]は子カテゴリーの有無に関わらずa要素
		var childElement = $(this).children();
		if (childElement.length > 1) { 
			$(childElement[0]).addClass("toggleBtn"); // a要素
			$(childElement[0]).before("&nbsp;<span>∇</span>&nbsp;");
			$(this).find(".toggleBtn").click(function(){
				var ulTag = $(this).next();
				ulTag.toggle();
				return false; // a要素のデフォルト処理を停止
			});
		}
		else {
			$(childElement[0]).before('&nbsp;<span>-</span>&nbsp;');
		}
	});
});