WordPressのwp_nav_menuに使用するパラメータの使い方

WordPressのwp_nav_menuに使用するパラメータの使い方

WordPressを使用したサイトにカスタムメニューやナビゲーションメニューを表示するにはwp_nav_menuでテーマに設定したメニューを表示します。

表示したメニューにはwp_nav_menuのパラメータを使うことができてwp_nav_menuが出力するメニューのマークアップ構造をカスタマイズすることが可能です。

wp_nav_menuのパラメータで渡せる種類は16個くらいあるのでwp_nav_menuでナビゲーションメニューをサイトに表示する基本的に必要なパラメータから、カスタマイズするときに役立ちそうなパラメータまで、一つずつ覚えておくことができるようにしたいと思います。

 

wp_nav_menuのパラメータの基本的な使い方

 

WordPressのカスタムメニューはregister_nav_menus()かregister_nav_menu()でテーマ機能を有効にしてwp_nav_menuのtheme_locationパラメータが与えられたときに、theme_locationが示す位置へ割り当てられたメニューを表示できます。

このときに、セットしたメニュー表示をするだけならばwp_nav_menuのパラメータでtheme_locationを使用して、値にメニュー位置の指定を渡せば表示できます。

 

<?php wp_nav_menu( array(
  'theme_location' => 'header-navigation',
) ); ?>

 

パラメータのtheme_location以外のパラメータも使用する場合は、上記のtheme_locationパラメータと値の下にwp_nav_menuで渡せる他のパラーメータをセットしていきます。

theme_locationパラメータは使用することが多くなると思うので使い方の基本として覚えておくといいかと思い先に紹介しました。

Advertisement

次からtheme_locationも含めてwp_nav_menuのパラメータを一つずつ説明していきます。

 

wp_nav_menuのパラメータの使い方を一つずつ説明

 

WordPressの日本語Codexでもwp_nav_menuのパラメータの「デフォルト値を明示した使い方」の説明があります。

以下のパラーメータがWordPressの日本語Codexでも紹介されているwp_nav_menuのパラメータの種類です。

 

<?php
$defaults = array(
 'menu' => '',
 'menu_class' => 'menu',
 'menu_id' => '{メニューのスラッグ}-{連番}',
 'container' => 'div',
 'container_class' => 'menu-{メニューのスラッグ}-container',
 'container_id' => '',
 'fallback_cb' => 'wp_page_menu',
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'echo' => true,
 'depth' => 0,
 'walker' => '',
 'theme_location' => '',
 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>

 

ざっと見た限りでは種類の多さを感じますが、wp_nav_menuが出力したメニューにマークアップしているHTMLタグの変更をして、メニューをCSSでデザインするためにタグのカスタマイズができるパラメータの割合が多いです。

 

  • パラメータ名にmenuがつくものなら、メニューリストをマークアップするulタグのカスタマイズ
  • パラメータ名にcontainerがつくものなら、メニューリストをマークアップするコンテナ要素のカスタマイズ
  • パラメータ名にbeforeとafterがつくものなら、リストの前後やテキストリンクの前後にコンテンツ挿入できるカスタマイズ

 

のように数多いパラメーターでもカスタマイズするタグごとのグループに分けることができるので、グループにして覚えてしまうといいかもしれません。

 

theme_locationでカスタムメニューの位置を決める

 

冒頭でも説明しましたが、wp_nav_menuのパラメータで「theme_location」は、WordPressのメニュー設定でセットしたメニューの位置を示すパラメータです。

 

register_nav_menuかregister_nav_menusでカスタムメニューを追加して、識別子の値を指定してあることが前提です。

 

<?php wp_nav_menu( array(
  'theme_location' => 'header-navigation',
) ); ?>

 

wp_nav_menuのパラメータ「theme_location」の使い方は、配列でarrayの中で左側にパラメータtheme_locationを指定、右側にはtheme_locationで表示位置を値として渡します。

この右側に指定する値がregister_nav_menuかregister_nav_menusで登録したtheme_locationのキーと合わせます。

 

menuが付くwp_nav_menuのパラメータ

 

wp_nav_menuのパラメータ名でmenuが付くパラメータは3つあります。

 

  • menu
  • menu_class
  • menu_id

 

まずはパラメータ「menu」の使い方からです。

menuパラメータを使うことで管理画面の外観から進んだ「メニュー」で設定したメニューの表示ができます。これは設定したカスタムメニューをtheme_locationのパラメータを使わない場合の代わりにする使い方できます。

 

<?php wp_nav_menu( array(
  'menu' => 'メニュー名',
) ); ?>

 

menuパラメータの値に指定するのは、外観のメニューを開いたそれぞれに設定しているメニューの名前を使用します。メニューの名前を指定すると、そのメニューがメニュー位置に表示できます。

メニュー名で簡単に扱えますが、個人的にはmenuパラメータではなくtheme_locationのパラメータでメニュー登録をすることが多いです。

Advertisement

次にwp_nav_menuパラメータの「menu_class」の使い方です。

menu_classはwp_nav_menuで出力された要素の中のul要素に任意のクラス属性を付与できます。

以下のコードのようにmenu_classをキーにして任意のクラス名を指定します。

 

<?php wp_nav_menu( array(
  'menu_class' => 'header-list',
) ); ?>

 

そしてwp_nav_menuパラメータ「menu_id」は、wp_nav_menuで出力された要素の中のul要素に任意のid属性を付与できます。

 

<?php wp_nav_menu( array(
  'menu_id' => 'header-navmenu',
) ); ?>

 

使い方は上記のコードのようにmenu_idをキーにして任意のid名を指定します。

 

containerが付くwp_nav_menuのパラメータ

 

wp_nav_menuのパラメータ名でcontainerが付くパラメータは3つあります。

 

  • container
  • container_class
  • container_id

 

上記3つのパラメータはwp_nav_menuでナビゲーションメニューをWordPressのテーマのテンプレートファイルに表示して出力されるリスト要素を囲むコンテナ要素にマークアップするHTMLタグや属性を変更するために使用できます。

wp_nav_menuのパラメータ「container」は、wp_nav_menuでナビゲーション要素のタグをカスタマイズできるパラメータです。

 

<?php wp_nav_menu( array(
  'container' => 'nav',
) ); ?>

 

使い方は=>の左側にパラメータcontainerを指定して、=>の右側にdivかnavのどちらかを指定します。初期値はdiv。

サイトに表示するナビゲーションメニューがヘッダーのグローバルメニューにする場合などには、サイトの主要なメニューとしてnavタグで出力できるようにするとHTML構造上良くなるかと思います。

またパラメータ「container」の使い方では、値をfalseにするとコンテナなしのHTML構造にできます。

Advertisement

次はwp_nav_menuのパラメータの「container_class」の使い方です。container_classはサイトに表示するナビゲーションメニューのコンテナ要素にclass属性を付与できます。

 

<?php wp_nav_menu( array(
  'container_class' => 'nav-container',
) ); ?>

 

キーにパラメータのcontainer_classを定義して、その値に任意のクラス名を指定して渡します。

初期値は ‘menu- {メニューのスラッグ} -container ‘

 

wp_nav_menuのパラメータ「container_id」の使い方もcontainer_classと同じ使い方ですがcontainer_idのパラメータは、サイトに表示するナビゲーションメニューのコンテナ要素にid属性を付与できます。

 

<?php wp_nav_menu( array(
  'container_id' => 'header-nav',
) ); ?>

 

キーにパラメータのcontainer_idを定義して、その値に任意のid名を指定して使ってください。

 

beforeとafterが付くwp_nav_menuのパラメータ

 

wp_nav_menuのパラメータ名には、beforeとafterが付いてるパラメータが4つあります。パラメータ名だけでどんな使い方ができるか検討が付く方もいると思いますが使い方の説明をします。

 

「before」
リンクテキストの前のテキスト
初期値: なし

「after」
リンクテキストの後のテキスト
初期値: なし

 

<?php wp_nav_menu( array(
  'before' => '<span class="menu-link">',
  'after' => '</span>',
) ); ?>

 

beforeとafterのパラメータの値にリンクテキストの前後に表示したい文字列を記述するとwp_nav_menuで出力してサイトに表示するときに値に記述したテキストが表示できます。

 

次にwp_nav_menuのパラメータの「link_before」と「 link_after」は

 

link_before
リンクの前のテキスト
初期値: なし

 

link_after
リンクの後のテキスト
初期値: なし

 

<?php wp_nav_menu( array(
  'link_before' => '( ',
  'link_after' => ' )',
) ); ?>

 

使い方は、ただbeforeとafterのパラメータ名がlink_beforeとlink_afterになったことで、パラメータの値に記述するテキストがリンクの前後のテキスト位置で出力して表示できるようになります。

 

depthでメニュー階層をコントロール

 

wp_nav_menuのパラメータで「depth」はメニュー階層の深さについてのパラメータです。

 

<?php wp_nav_menu( array(
  'depth' => '0',
) ); ?>

 

wp_nav_menuのパラメータのキーにdepthを指定して値を0にした場合、全階層表示になります。

depthの初期値も0なので全階層表示できます。

 

  • 0(デフォルト)–すべての階層のページを入れ子形式のリストで階層を付けて表示
  • -1 –すべての階層のページをフラットなリストで階層を付けずに表示
  • 1 –最上位のページのみ表示
  • 2、3 –指定した階層までのページを表示

 

ほんの一例ですが、このブログでも使用してるWordPressテーマ「LION MEDIA」の場合、カスタムメニューの階層は、wp_nav_menuのパラメーターのdepthパラメーターの値が1で「最上位の階層のみ表示」です。

ですがdepthパラメータの値を0に変更することで全階層表示になり、子や孫の階層まで表示できるナビゲーションメニューにカスタムすることができます。

メニュー階層はそれぞれのサイトのメニューによって違いがあるので、階層の深さをどこまでにしてメニュー表示するか調整してみてください。

 

fallback_cbでカスタムメニューがないときの出力

 

wp_nav_menuのパラメータ「fallback_cb」はメニューが存在しないときに実行される関数です。

 

<?php wp_nav_menu( array(
  'fallback_cb' => '',
) ); ?>

 

初期値:wp_page_menu

「fallback_cb」はメニューが存在しないときの実行される関数。ということなのですが、fallback_cbパラメータの設定を行っていない場合、WordPressのデフォルト動作でwp-includes / post-template.phpのwp_page_menu()を起動するようになっています。

ちなみに固定ページがある場合は上記のコードのようにfallback_cbの指定だけだと固定ページがナビゲーションメニューとして出力していました。

いまいち扱い方が複雑そうなので、しっかりメニューが存在する状態にしておけば深く考える必要ないパラメータかと思っています。

 

echoでカスタムメニューの出力

 

wp_nav_menuのパラメータ「echo」はメニューをHTML出力するか、PHPの値で返すかのパラメータです。

 

<?php wp_nav_menu( array(
  'echo' => true,
) ); ?>

 

falseを指定するとナビゲーションメニューのHTMLは出力されなくなり、サイト表示されません。trueにするとナビゲーションメニューの文字列(HTMLコード)を返しメニューを表示できます。

wp_nav_menuで出力し表示したナビゲーションメニューの表示、非表示がコントロールできるパラメータということになりますね。

初期値はtrueです。

 

walkerでメニュー階層のliの中に構造を持たせる

 

wp_nav_menuのパラメータの「walker」は、例えばwp_nav_menuで出力されたメニュー階層のliの中にさらに構造を持たせたいときなどに使用できます。

 

'walker' => new custom_walker_nav_menu

 

使い方としては使用する実際のオブジェクトを渡す必要があります。

初期値:new Walker_Nav_Menu

 

例えばwp_nav_menuのパラメータ「walker」の使い方を上記のコードのように ‘walker’ => new custom_walker_nav_menuにしてarrayの中に記述します。

このとき記述する値は「Walker_Nav_Menu」を継承したクラスを作成し、部分的に編集しfunctions.phpでセットしておくことで、思い通りのナビメニューを作成して使うことができます。

自作したクラスの作成で指定しない場合、デフォルトでワードプレスが用意している「Walker_Nav_Menu」というクラスが使われることになります。

Advertisement

パラメータ「walker」も初めてだと分かりづらいかもしれませんが、nav-menu-template.phpを開いてみると、デフォルトでwp_nav_menuを定義している箇所があるので雛形にして自作してしまえば簡単に作成ができます。

 

item_wrapでメニューリストのラップをカスタマイズ

 

wp_nav_menuのパラメータ「item_wrap」は、メニューアイテムのラップの仕方についてのパラメータです。

 

<?php wp_nav_menu( array(
  'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', // メニューアイテムのラップの仕方。%1$sには'menu_id'のパラメータ展開、%2$sには'menu_class'のパラメータ展開、%3$sはリストの項目が値として展開
) ); ?>

 

Sprintf()関数の引数として評価される書式の文字列で、フォーマット文字列には番号付きトークンによって他のパラメーターが組み込まれています。

 

  • %1 $ sに ‘menu_id’のパラメーターの値が展開。
  • %2 $ sに ‘menu_class’のパラメーターの値が展開。
  • %3 $ sはリストアイテムが値として展開されます。

 

'items_wrap' => '<ul>%3$s</ul>',

 

使い方は、例えばメニューを囲っているul要素を削除したい場合に、パラメータitems_wrapの値を ‘ %3 $ s ‘にします。

このようにすることでul 要素に付いているIDとクラスは ‘items_wrap’ に ‘<ul>%3$s</ul>’ を渡すことで表示しないようにできます。

 

まとめ

 

WordPressのwp_nav_menuに使用するパラメータの種類は地味に多いので、まずはカスタムメニューをサイトに表示するために必要なtheme_locationとmenuを覚えるようにするのが良いと思います。

パラメータのitem_wrapやwalkerは私には難しく感じました。同じく難しく思う場合には必要な状況によって使い方を補完していくことで、気づけば立派なwp_nav_menuのパラメータ使いに近づくかと思います。

WordPress使い方カテゴリの最新記事