カテゴリーをプルダウンにする その2

2009 年 1 月 22 日

全体のコードも含めて適当だったので作り直し!

/***************************************
file Name: list.js
URI: http://blog.lunatic-code.net
Description: wordpressのカテゴリをドロップダウンリストにする。親子2階層限定。
Version: 1.1
Author: mick
Author URI: http://blog.lunatic-code.net

サイドバー書式
<div id="sidebar">
<ul>
<?php wp_list_categories(‘orderby=ID&show_count=True’); ?>
</ul>
</div>

// header.php 追記事項
<?php wp_head(); ?>の前に<?php wp_enqueue_script(‘jquery’); ?>を追加
<?php wp_head(); ?>の後ろに<script src="<?php bloginfo(‘stylesheet_directory’); ?>/js/list.js" type="text/javascript" charset="utf-8"></script>
を追加する。
以下のような感じに
<?php wp_enqueue_script(‘jquery’); ?>
<?php wp_head(); ?>
<script src="<?php bloginfo(‘stylesheet_directory’); ?>/js/list.js" type="text/javascript" charset="utf-8"></script>

***************************************/

// グローバル
var childListArray = [];

/***************************************
listToSelect
ulリストをプルダウンリストへ書き換え、DOM差し替え
親カテゴリ取得&プルダウン作成
***************************************/
function listToSelect(id){
var elm = [];
var title =’カテゴリ選択’;

// 親取得
jQuery(id+">ul:not([class='children'])>li>a").each(
function(i){
elm[i]=jQuery(this);
});

var ct=’<form>’+"\n"+
‘<select onChange="viewChildLists(value);">’+"\n"+
‘<option value="">’+title+’</option>’+"\n";

// 親カテゴリプルダウン
jQuery(elm).each(
function(i){
ct += ‘<option value="’+i+’">’+
jQuery(elm[i]).parent().text().substring(0,(jQuery(elm[i]).parent().text().length-jQuery(elm[i]).siblings().text().length))+
‘</option>’+"\n";
}
);
ct +=’</select>’+"\n";

// ダミー子プルダウン
ct +=’<select id="childList">’+"\n";
ct +=’<option value=""> </option>’+"\n";
ct +=’</select>’+"\n";
ct +=’<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />’+"\n";
ct +=’</form>’+"\n";

jQuery(id+" ul").replaceWith(ct);

}

/***************************************
createChildLists
子カテゴリリスト取得
グローバル変数へ保持。
***************************************/
function createChildLists(id){
var parent = [];
var child =[];

// 親カテゴリのタイトルとURL取得
jQuery(id+">ul:not([class='children'])>li>a").each(
function(p){
parent[p] = new Array();
parent[p]["href"]=jQuery(this).attr("href");
// 親カテゴリを件数ごと取得する
parent[p]["title"]=jQuery(this).parent().text().substring(0,(jQuery(this).parent().text().length-jQuery(this).siblings().text().length));
});

// 子カテゴリ取得
jQuery(id+">ul:not([class='children'])>li").each(
function(j){
child[j] = new Array();
jQuery(id+">ul:not([class='children'])>li:eq("+j+")>ul.children>li>a").each(
function(i){
child[j][i]=jQuery(this);
}
);
}
);

// 子カテゴリ配列をグローバル変数へ入れる
jQuery(id+">ul:not([class='children'])>li>a").each(
function(j){
childListArray[j] = new Array();
// 子カテゴリがないときの為に親カテゴリを入れておく
childListArray[j][0] = new Array();
childListArray[j][0]["href"]=parent[j]["href"];
childListArray[j][0]["title"]=parent[j]["title"];
// 子カテゴリのタイトルとURL設定
jQuery(child[j]).each(
function(i){
childListArray[j][i+1] = new Array();
childListArray[j][i+1]["href"]=jQuery(child[j][i]).attr("href");
childListArray[j][i+1]["title"]=jQuery(child[j][i]).parent().text();
}
);
}
);

}
// 子プルダウン表示
function viewChildLists(value){
if(value!=”){
jQuery("#childList").empty();
for(j=0; j< childListArray[value].length; j++){
jQuery("#childList").append(jQuery(‘<option>’).attr("value",childListArray[value][j]["href"]).text(childListArray[value][j]["title"]));
}
}
}

// 初期化
jQuery(document).ready(function() {
createChildLists(".categories"); // 子カテゴリリストを先に作る
listToSelect(".categories"); // なぜならDOM差し替えでulが消えてしまうから。
});

スクリプトと詳しい説明はこちら

Array ( )