###前提・実現したいこと
WordPressで、タクソノミーのドロップダウン表示の際に、親と子を別々のドロップダウンに分けたいです。
下記のページの方法は既に試していて、通常カテゴリ(デフォルト投稿のカテゴリ)だとうまくいくのですがタクソノミー(カスタム投稿)の場合はドロップダウンにならず、展開されてしまいます。
希望する動作は
- ドロップダウンメニューを2つ並べ、1つ目のセレクトボックスで親カテゴリーを選択。
- 2つ目のセレクトボックスには先に選択した親カテゴリーに含まれる子カテゴリーのみを表示し、その中から選択。
- カテゴリーページへ移動。
プルダウンにするには親を取得する際のクラス名を書き換えれば良いのかと考えているのですが、まだ解決まで至りません。
また、今は第2階層までなので、それより下まで対応できるようにしたいと考えています。
ご教授よろしくお願いいたします。
###プルダウンになるコード
html
1<?php wp_list_categories('orderby=ID&show_count=True'); ?>
###出力結果:デベロッパーツール
html
1<form> 2<select onchange="viewChildLists(value);"> 3<option value="">カテゴリ選択</option> 4<option value="0">親カテゴリ(1) 5</option> 6<option value="1">子カテゴリ (1) 7</option> 8</select> 9<select id="childList"> 10<option value=""> </option> 11</select> 12<input type="button" value="移動" onclick="JavaScript: location.href=this.form.childList.value; return false;"> 13</form>
###出力結果:ソースを表示
html
1<ul> 2 <li class="categories">親カテゴリー 3 <ul> 4 <li class="cat-item cat-item-1"><a href="http://hogehoge/" >子カテゴリ</a> (1) 5 <ul class='children'> 6 <li class="cat-item cat-item-55"><a href="http://hogehoge/" >子カテゴリ</a> (1)</li> 7 </ul> 8 </li> 9 </ul> 10 </li> 11</ul>
プルダウンになるほうはデベロッパーツールとソースの表示の結果が違います。
###プルダウンにならないコード
html
1<?php wp_list_categories('orderby=ID&show_count=True&taxonomy=ctshops'); ?>
###出力結果
html
1<ul> 2 <li class="ctshops">カテゴリー 3 <ul> 4 <li class="cat-item cat-item-3"><a href="http://hogehoge/" >親カテゴリ</a> (16) 5 <ul class='children'> 6 <li class="cat-item cat-item-4"><a href="http://hogehoge/" >子カテゴリ</a> (5)</li> 7 <li class="cat-item cat-item-5"><a href="http://hogehoge/" >子カテゴリ</a> (4)</li> 8 <li class="cat-item cat-item-6"><a href="http://hogehoge/" >子カテゴリ</a> (3)</li> 9 </ul> 10 </li> 11 </ul> 12 </li> 13</ul>
###引用しているjQuery
JavaScript
1***************************************/ 2 3// グローバル 4var childListArray = []; 5 6/*************************************** 7 listToSelect 8 ulリストをプルダウンリストへ書き換え、DOM差し替え 9 親カテゴリ取得&プルダウン作成 10***************************************/ 11function listToSelect(id){ 12 var elm = []; 13 var title ='カテゴリ選択'; 14 15 // 親取得 16 jQuery(id+">ul:not([class='children'])>li>a").each( 17 function(i){ 18 elm[i]=jQuery(this); 19 }); 20 21 var ct='<form>'+"\n"+ 22 '<select onChange="viewChildLists(value);">'+"\n"+ 23 '<option value="">'+title+'</option>'+"\n"; 24 25 // 親カテゴリプルダウン 26 jQuery(elm).each( 27 function(i){ 28 ct += '<option value="'+i+'">'+ 29 jQuery(elm[i]).parent().text().substring(0,(jQuery(elm[i]).parent().text().length-jQuery(elm[i]).siblings().text().length))+ 30 '</option>'+"\n"; 31 } 32 ); 33 ct +='</select>'+"\n"; 34 35 // ダミー子プルダウン 36 ct +='<select id="childList">'+"\n"; 37 ct +='<option value=""> </option>'+"\n"; 38 ct +='</select>'+"\n"; 39 ct +='<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />'+"\n"; 40 ct +='</form>'+"\n"; 41 42 jQuery(id+" ul").replaceWith(ct); 43 44} 45 46/*************************************** 47 createChildLists 48 子カテゴリリスト取得 49 グローバル変数へ保持。 50***************************************/ 51function createChildLists(id){ 52 var parent = []; 53 var child =[]; 54 55 // 親カテゴリのタイトルとURL取得 56 jQuery(id+">ul:not([class='children'])>li>a").each( 57 function(p){ 58 parent[p] = new Array(); 59 parent[p]["href"]=jQuery(this).attr("href"); 60 // 親カテゴリを件数ごと取得する 61 parent[p]["title"]=jQuery(this).parent().text().substring(0,(jQuery(this).parent().text().length-jQuery(this).siblings().text().length)); 62 }); 63 64 // 子カテゴリ取得 65 jQuery(id+">ul:not([class='children'])>li").each( 66 function(j){ 67 child[j] = new Array(); 68 jQuery(id+">ul:not([class='children'])>li:eq("+j+")>ul.children>li>a").each( 69 function(i){ 70 child[j][i]=jQuery(this); 71 } 72 ); 73 } 74 ); 75 76 // 子カテゴリ配列をグローバル変数へ入れる 77 jQuery(id+">ul:not([class='children'])>li>a").each( 78 function(j){ 79 childListArray[j] = new Array(); 80 // 子カテゴリがないときの為に親カテゴリを入れておく 81 childListArray[j][0] = new Array(); 82 childListArray[j][0]["href"]=parent[j]["href"]; 83 childListArray[j][0]["title"]=parent[j]["title"]; 84 // 子カテゴリのタイトルとURL設定 85 jQuery(child[j]).each( 86 function(i){ 87 childListArray[j][i+1] = new Array(); 88 childListArray[j][i+1]["href"]=jQuery(child[j][i]).attr("href"); 89 childListArray[j][i+1]["title"]=jQuery(child[j][i]).parent().text(); 90 } 91 ); 92 } 93 ); 94 95} 96// 子プルダウン表示 97function viewChildLists(value){ 98 if(value!=''){ 99 jQuery("#childList").empty(); 100 for(j=0; j< childListArray[value].length; j++){ 101 jQuery("#childList").append(jQuery('<option>').attr("value",childListArray[value][j]["href"]).text(childListArray[value][j]["title"])); 102 } 103 } 104} 105 106// 初期化 107jQuery(document).ready(function() { 108 createChildLists(".categories"); // 子カテゴリリストを先に作る 109 listToSelect(".categories"); // なぜならDOM差し替えでulが消えてしまうから。 110});