WordPress で、固定ページ一覧のネストされたリストを出力する関数を考えてみた


固定ページの一覧をナビゲーションとしてサイドバーなどに設置する時に、
ページに設定した親ページに基づいてネストされたリスト(ul)で出力したいことがあると思います。

その際には、以下の項目が必要となります。

  • ネストされたリスト(ul)で出力されるようにする。
  • 表示したくない固定ページを除外できるようにする。
  • 現在表示中の固定ページがわかるようにする。
  • CSSで装飾できるように HTML要素に class属性 をたくさん付ける。
  • リストは、開閉式にする。(現在表示中のページを含むulのみ開けておく)

WordPress のカスタムメニュー(register_nav_menu()wp_nav_menu())でも実装できますが、
カスタマイズにWalker_Nav_Menuクラスを extends したクラスを新しく作ったり、
子ページのメニュー登録は管理画面で毎回操作しなくちゃいけなかったりと、案外メンドウなので、
WPテーマをいじる人は「カスタマイズが楽」で、
記事を書く人は「公開したら勝手に表示される」ようなものとして使えればと思います。

以下は、もっと良い方法が きっとあると思うけど、G○○gle先生に聞いても出てこなかったので、
上の項目を満たす文字列を返す関数を考えてみました。

上記のコードを functions.php に追加して、
以下のコードをテンプレートの任意の場所に貼り付ければ、固定ページの一覧が出力されます。

下は、リスト開閉の jQuery です。
こちらも functions.php に貼り付ければ、動作します。

下は、 CSS です。(例として)
こちらは functions.php に書かずに、直接スタイルシートに書いた方がいいですね。。。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-27-11-06-18

これで、画像のようなリストが出力できます。

出力されるHTMLは、下のようになります。
(見やすいように改行とインデントをつけてます)

li要素に付加されるクラスは次のとおりです。

  • 階層は、depth-? で表される。? に階層番号。一番上は 0
  • 一番上の階層は、top-level-page と depth-0 がつく。
  • 子ページを持っていれば、has-child-page がつく。
  • 一番下の階層(子ページを持っていない)は、not-has-child-page がつく。
  • 親ページがある場合、親ページのIDを表す parent-page-id-?? がつく。?? に親ページのID。
  • ページIDは、page-id-?? で表される。?? にページID。
  • 固定ページが表示中なら、this-display-page がつく。
  • 表示中の固定ページを含んでいれば、has-display-page がつく。
  • 子ページを持っていれば、<span class="has-child-tab">&nbsp;</span>が入る。
  • 子ページを持っていなければ、<span class="not-has-child-tab">&nbsp;</span>が入る。

再帰処理の練習がてら作ったので、もっと簡単な方法があるかもです。ご了承ください( ´_ゝ`)