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

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

ただいまの
回答率

88.92%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,424

yura53

score 8

前提・実現したいこと

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

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

希望する動作は

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

プルダウンにするには親を取得する際のクラス名を書き換えれば良いのかと考えているのですが、まだ解決まで至りません。
また、今は第2階層までなので、それより下まで対応できるようにしたいと考えています。
ご教授よろしくお願いいたします。

プルダウンになるコード

<?php  wp_list_categories('orderby=ID&show_count=True'); ?>

出力結果:デベロッパーツール

<form>
<select onchange="viewChildLists(value);">
<option value="">カテゴリ選択</option>
<option value="0">親カテゴリ(1)
</option>
<option value="1">子カテゴリ (1)
</option>
</select>
<select id="childList">
<option value=""> </option>
</select>
<input type="button" value="移動" onclick="JavaScript: location.href=this.form.childList.value; return false;">
</form>

出力結果:ソースを表示

<ul>
    <li class="categories">親カテゴリー
        <ul>
        <li class="cat-item cat-item-1"><a href="http://hogehoge/" >子カテゴリ</a> (1)
            <ul class='children'>
            <li class="cat-item cat-item-55"><a href="http://hogehoge/" >子カテゴリ</a> (1)</li>
            </ul>
        </li>
        </ul>
    </li>
</ul>

プルダウンになるほうはデベロッパーツールとソースの表示の結果が違います。

プルダウンにならないコード

<?php  wp_list_categories('orderby=ID&show_count=True&taxonomy=ctshops'); ?>

出力結果

<ul>
    <li class="ctshops">カテゴリー
        <ul>
        <li class="cat-item cat-item-3"><a href="http://hogehoge/" >親カテゴリ</a> (16)
            <ul class='children'>
                <li class="cat-item cat-item-4"><a href="http://hogehoge/" >子カテゴリ</a> (5)</li>
                <li class="cat-item cat-item-5"><a href="http://hogehoge/" >子カテゴリ</a> (4)</li>
                <li class="cat-item cat-item-6"><a href="http://hogehoge/" >子カテゴリ</a> (3)</li>
            </ul>
        </li>
        </ul>
    </li>
</ul>

引用しているjQuery

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

// グローバル
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が消えてしまうから。
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/06 23:43

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

    キャンセル

  • kei344

    2016/07/06 23:52

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

    キャンセル

回答 1

0

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

// 初期化
jQuery( function() {
    var cat;
    if ( jQuery( '.categories' ).length > 0 ) {
        cat = '.categories';
    } else if ( jQuery( '.ctshops' ).length > 0 ) {
        cat = '.ctshops';
    }
    if ( !cat ) { return; }
    createChildLists( '.categories' );
    listToSelect( '.categories' );
} );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る