WordPressでドロップダウンをツリーメニューでカスタマイズ

ドロップダウン選択

WordPressでカテゴリリスト、あるいは、任意の情報をドロップダウンリスト（プルダウンリストらしく）として作成したい場合があります。
この記事では、カテゴリリストや任意の情報をドロップダウンリストで表示するための方法について書いてみました。

やりたいこと

・ドロップダウンリストを任意にカスタマイズしたい。

・ドロップダウンを選択すると、自ページに記事を表示したい。

・ドロップダウンを選択する前（トップメニューからパーマリンクが選択された場合など）の初期値は、最新の記事にしたい。

カテゴリをドロップダウンリスト作成する一般的な方法

WordPressにはドロップダウンのための関数が用意されいますので、普通はWordPressの公式サイトにあるサンプルを利用するとよいでしょう。
テンプレートタグ/wp dropdown categories

以下、公式サイトより一部を引用したカテゴリリストをドロップダウン表示する例です。公式サイトに以下のサンプル以外もあるので、公式サイトを見ると参考になると思います。

src1.公式サイトのカテゴリ表示サンプル
PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?>
<script type="text/javascript">
    <!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
            location.href = "<?php echo esc_url( home_url( '/' ) ); ?>?cat="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
    -->
</script>

サンプルの表示結果は、以下の図のようになります。
(実際はサンプルを少し変えて、’hierarchical=1設定で階層表示しています）

カテゴリリストや投稿リスト、固定ページリストも手軽に取得できるサンプルが用意されているので、参考にするとよいでしょう。

ドロップダウンのカスタマイズでツリーメニュー表示

おそらく、上の更新サイトにあるサンプルだけでも十分だと思いますが、管理者の場合、カテゴリ（＋任意の情報）をドロップダウンをカスタマイズして作りたかったので、作成してみました。
特定パーマリンクに対し、処理を行うようにしています。
・一般的にHTML＋PHPの場合、HTMLベースにPHPコードを埋め込む場合が多いようですが、管理者のサンプルはPHPにHTMLコードを埋め込んでいますので、ご了承ください。

src2.dropdown customize
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
function cat_dropdown_list_sub($rootid, $showcat) {
   ob_start();
    
   $tarurl = get_permalink();  //パーマリンク名称
   if($showcat == "")
       $showcat = $rootid;
 
   //カテゴリリストを取得
   $args = array(
       'type'           => 'post',
       'child_of'       => $rootid,
       'parent'         => '',
       'orderby'        => 'name',
       'order'          => 'ASC',
       'hide_empty'     => 1,
       'hierarchical'   => 1,
       'exclude'        => '',
       'include'        => '',
       'number'         => '',
       'taxonomy'       => 'category',
       'pad_counts'     => true
    );
    $parent_categories = get_categories( $args );
    
    $html .= '<div >' ;
    $html .= "";
    $html .= '<select  style="width: 300px" ';
    $html .= ' onChange="window.location.href=this.options[this.selectedIndex].value;">';
 
    $selected = "";
    $html .= sprintf( '<option value="%s" %s>%s</option>',$rootid,$selected,"--最新投稿--");
    foreach ( $parent_categories as $parent_cat ) {
          $value = $tarurl . "?cat=" . $parent_cat->term_id ;
        $selected = "";
        $name = $parent_cat->name . " (" .$parent_cat->category_count . ")"  ;
        if ( $rootid <> $parent_cat->parent) {
           $name = "&nbsp;&nbsp;&nbsp;&nbsp;" . $name  ;
        }
        if($showcat == $parent_cat->term_id){
           $selected = "selected";
        }
        $html .= sprintf( '<option value="%s" %s>%s</option>',$value,$selected,$name);
    }
    $html .= '</select>';
    $html .= "</div>";
    echo $html;
 
    echo do_shortcode("[catlist id=$showcat]"); //List Category Posts利用
    return ob_get_clean();
}
 
function getParamVal($param) {
    $val = (isset($_GET[$param]) && $_GET[$param] != '') ? $_GET[$param] : '';
    $val = htmlspecialchars($val, ENT_QUOTES);
    return $val;
}
 
function cat_dropdown_list_func() {
    //親カテゴリIDを4にし、id=4以下の情報を表示したい
    $rootid = 4;
    $showcat = getParamVal('cat');
    return cat_dropdown_list_sub($rootid, $showcat);
}
 
add_shortcode( 'cat_dropdown_list', 'cat_dropdown_list_func' );
 
?>

・66行目の設定に合わせ、呼び出す場合は、ある固定ページに以下のようなタグを記述して、ショートカットを呼び出します。

[cat_dropdown_list]

・24行目、今回のカスタマイズサンプルに限ることではありませんが、ドロップダウンによって、自ページに記事を表示するようにしています。

PHP
24
$parent_categories = get_categories( $args );

・32行目の追加で最新投稿のリストを表示します。最新投稿リストは、カテゴリの最上位の記事リストを取得して表示するようにしています。

src4 lastpost
PHP
32
$html .= sprintf( '<option value="%s" %s>%s</option>',$rootid,$selected,"--最新投稿--");

・49行目のリスト表示には、プラグイン [List Category Posts]と連携して表示しています。

src5.listshow
PHP
49
echo do_shortcode("[catlist id=$showcat]"); //List Category Posts利用

もし、自作で表示したい場合は、WordPressの関数で用意されいるget_posts()を使うよいでしょう。以下、簡易サンプルです。

src6.list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
dropdownstanard($showcat); //49行目をこの行のように置き換える
 
function dropdownstanard($showcat){
    $args = array(
       'posts_per_page' => 5, // 表示件数の指定
       'category' => $showcat
    );
    $posts = get_posts( $args );
    $html ="";
    $html .= "<ul>";
    foreach ( $posts as $post ) {
        $target = get_page_link( $post->ID );
        $title = $post->post_title;
        echo '<li><a href="' . $target . '">' . $title . '</a></li>';
    }
    $html .= "</ul>";
    echo $html;
}

・61行目でカテゴリのトップIDを設定しています。ここで設定したカテゴリID以下を表示する作りです。

PHP
60
61
    //親カテゴリIDを4にし、id=4以下の情報を表示したい
    $rootid = 4;

 

・サンプルの表示結果は、以下の図のようになります。

1番目（上）が、メニューなどから表示されたときの初期の表示画面です。

2番目（中）が、ドロップダウンをクリックして広げた場合の画面です。

3番目（下）が、ドロップダウンのリストを選択しなおした場合の画面です。ドロップダウン選択が更新され、記事リストもドロップダウン選択に合わせて更新されています。

まとめ

カテゴリの表示だけならWordPressの公式サンプルだけで十分です。本記事でのサンプルはWordPress公式サンプルと大きな違いはないと思いますが、プラグイン作成やショートカットでカテゴリをカスタマイズしたい場合、あるいは、カテゴリだけでなく、任意の情報を使ってドロップダウンリストを作成・カスタマイズしたい場合、少しは参考になるかもしれません。