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

ドロップダウン選択

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

やりたいこと

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

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

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

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

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

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

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

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

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

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

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

[cat_dropdown_list]

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

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

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

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

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

 

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

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

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

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

まとめ

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