フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

WEB

WordPressでメニュー・カテゴリ一覧表示を作る(wp_nav_menuとwp_get_nav_menu_items)

2016年02月03日

2016年04月28日

Pocket

WordPressでメニューを表示する

WordPressでメニュー表示する際、一番簡単なのは「wp_nav_menu」を利用することなんだけど、余計なクラス名がついたり、li要素にクラスを追加したりと、カスタマイズするにはやや不便かなぁ…と、少し煩雑になりますがwp_get_nav_menu_itemsの使い方をちょっと調べてみました。

wp_nav_menuを使用したケース

まずは簡単なwp_nav_menuの概要から。
functions.php内に下記のようにコードを書いてメニューの定義をします。

ひとつのメニューを定義する場合

複数のメニューを定義する場合

定義ができたら次はダッシュボード→外観→メニューで表示したい項目をドラッグ&ドロップで集めてやって、先ほど定義したテーマに関連付けてやります。

wp_nav_menu使用時のダッシュボード設定

ここで定義したメニューのテーマ(header_menuなど)をtheme_locationに指定してあげればOK。

メニューを表示したいところに書くコード

細かいプロパティは省略していますのでWordPress Codexリファレンスを参照してみてください。

wp_nav_menuでのテーマ指定の注意

この例ではfuncitons.phpに定義したテーマ「header_menu(アンダースコア)」とダッシュボード上で定義したメニュー名「header-menu(ハイフン)」の2種類の名前を定義しているのですが、wp_nav_menuのltheme_locationプロパティでの指定はfunctions.php内で定義した「header_menu(アンダースコア)」を指定します。
後述しますが、今回wp_get_nav_menu_itemsを使用するにあたってこの点がかなり混乱しました…

wp_nav_menuで出力されるソース

こんな具合です。 プロパティの変更やfunctions.phpへの記述でタグやクラスなどの形成はできますが、デフォルトではちょっと野暮ったいクラス指定ですよね。
デフォルトで付与されるクラス名を利用してCSS指定できるというメリットもありますが、不必要なものは減らしたほうがいいですしカスタマイズ性も良いとはいえません。

wp_get_nav_menu_itemsを使用したケース

次は本題のwp_get_nav_menu_itemsです。 最初にリファレンスを読んでおきましょう。

管理画面→外観 → メニュー 内に作られたナビゲーションメニューのアイテムを返す関数です。
この関数は、メニュー名、スラッグ、IDなど、ナビゲーションメニューのアイテムを返します。返されるメニューアイテムは、通常の投稿やページを参照している、関係する nav_menu_item タイプの投稿です。 WordPressCodex日本語版

作成したメニューから配列を返す関数になっています。 こちらの場合はダッシュボード上のメニュー構造を参照する為、functions.php上でのメニュー定義は必要ないですが、メニューを使う宣言は必要になります。

functions.phpで定義するためのコード

あとはwp_nav_menuの時と同じようにダッシュボード上でメニューに表示したい項目をドラッグ&ドロップで集めてください。 wp_nav_menu_items使用時のダッシュボード

あとはこの配列をforeachループで配列の個数分繰り返し処理でタグを書き出すお馴染みの作業。
カテゴリ名・IDなどの情報は配列に入っているのでそこから抽出します。

メニューを表示したいところに書くコード

wp_get_nav_menu_itemsでのテーマ指定の注意

前述しましたがwp_nav_menuと使用するパラメータの違いに注意!
メニュー使用の宣言は必要ですが、基本的にダッシュボードの設定でだけで完結しているのは分かりやすいのではないでしょうか。

wp_get_nav_menu_itemsで出力されるソース

このようにシンプルな、というか見た目通りのソースが出力されます。

カスタマイズやHTMLからの構築を考えたら断然wp_get_nav_menu_itemsのほうがいい!

例題がシンプルすぎて「この程度ならどっち使ってもいいじゃん!」って仕上がりになってしまいましたが、タグやクラスを自由に変更できてhtmlで仮組みしたソースから構築する際には、こっちのほうがかなり捗るんじゃないでしょうか。

Pocket

このカテゴリで良く読まれている記事
関連記事

COMMENT