質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

4816閲覧

WordPressのタクソノミーのドロップダウン表示を親と子で分けたい

yura53

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/07/06 12:31

編集2022/01/12 10:55

###前提・実現したいこと
WordPressで、タクソノミーのドロップダウン表示の際に、親と子を別々のドロップダウンに分けたいです。
下記のページの方法は既に試していて、通常カテゴリ(デフォルト投稿のカテゴリ)だとうまくいくのですがタクソノミー(カスタム投稿)の場合はドロップダウンにならず、展開されてしまいます。

カテゴリーのドロップダウンメニューについて

希望する動作は

  1. ドロップダウンメニューを2つ並べ、1つ目のセレクトボックスで親カテゴリーを選択。
  2. 2つ目のセレクトボックスには先に選択した親カテゴリーに含まれる子カテゴリーのみを表示し、その中から選択。
  3. カテゴリーページへ移動。

プルダウンにするには親を取得する際のクラス名を書き換えれば良いのかと考えているのですが、まだ解決まで至りません。
また、今は第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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/07/06 14:43

「うまくいく」カテゴリの場合、タクソノミーの場合について、具体的に出力されたHTMLを質問文に追記いただいたほうが回答を得られやすいと思います。
kei344

2016/07/06 14:52

「出力されたHTML」はPHPではなく、出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
guest

回答1

0

3階層はひとまずおいておいて、下記のようにすればどちらのページでも(たぶん)取得できると思います。

JavaScript

1// 初期化 2jQuery( function() { 3 var cat; 4 if ( jQuery( '.categories' ).length > 0 ) { 5 cat = '.categories'; 6 } else if ( jQuery( '.ctshops' ).length > 0 ) { 7 cat = '.ctshops'; 8 } 9 if ( !cat ) { return; } 10 createChildLists( '.categories' ); 11 listToSelect( '.categories' ); 12} );

投稿2016/07/07 16:47

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問