ナビゲーションメニューを作成
ナビゲーションメニューを作成するには、wp_nav_menu関数を使用します。
- ※ 予め管理画面の"外観"の"メニュー"からメニュー構造を登録しておく必要があります。
詳しくは、メニューを構成ページをご覧ください。
構文
| 引数名 | 型 | 初期値 | 説明 | |
|---|---|---|---|---|
| 第一引数 | オプション | array | array() | 各種設定を連装配列で指定。 オプションを参照。 |
オプション
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| menu | string | '' | "外観"の"メニュー"で登録したメニュー名。 省略した場合あるいはメニュー名が見つからなかった場合は、登録した最初のメニュー名が自動的に指定される。 |
| container | string または boolean |
'div' | 全体を囲う要素の名称。 指定可能な値は次の通り。 false ... 囲わない' div' ... div要素で囲う' nav' ... nav要素で囲う |
| container_id | string | '' | containerプロパティで指定した要素に付与するID名（id属性の値）。 省略した場合は付与されない。 |
| container_class | string | '' | containerプロパティで指定した要素に付与するクラス名。 省略した場合は、 menu-メニュー名-連番というクラス名で付与される。 |
| depth | integer | 0 | 表示する階層。0を指定すると全ての階層を表示する。 |
| items_wrap | string | '<ul id="%1$s" class="%2$s">%3$s</ul>' | メニューを表示するためのHTMLテンプレート。%1$s ... menu_idプロパティの値%2$s ... menu_classプロパティの値%3$s ... メニューアイテムを設置（下層メニュー含む） |
| menu_id | string | '' | items_wrapプロパティで付与するID名（id属性の値）。%1$sが置き換わる。省略した場合は、 menu-メニュー名-連番というクラス名で付与される。 |
| menu_class | string | 'menu' | items_wrapプロパティで付与するクラス名。%2$sが置き換わる。 |
| echo | boolean | true | echoで出力するかどうか。true ... echoで出力false ... returnで返す |
| fallback_cb | string | 'wp_page_menu' | メニュー名が1つも登録されていなかった場合、あるいはメニュー名が存在しメニューが1つも設定されていなかった場合に実行するコールバック関数名。 メニュー名が存在しない場合ではないことに注意。 省略した場合は全ての固定ページのメニューが表示される。 |
| before | string | '' | a要素の直前（隣接）に出力・表示する内容。 文字はもちろん、HTMLも指定できる。 |
| after | string | '' | a要素の直後（隣接）に出力・表示する内容。 文字はもちろん、HTMLも指定できる。 |
| link_before | string | '' | a要素の内側の最初に出力・表示する内容。 文字はもちろん、HTMLも指定できる。 |
| link_after | string | '' | a要素の内側の最後に出力・表示する内容。 文字はもちろん、HTMLも指定できる。 |
| item_spacing | string | 'preserve' | ※ 不明 指定可能な値は次の通り。 preservediscard |
| walker | string | '' | メニュー項目（アイテム）または2階層目以降をカスタマイズするためのインスタンス。 指定する値は new クラス名で指定する。詳しくは、メニュー項目（アイテム）または2階層目以降をカスタマイズを参照。 |
| theme_location | string | '' | function.phpで用意したregister_nav_menusのキー。 menuプロパティを指定した場合はmenuプロパティが優先される。 |
戻り値
オプションのechoプロパティがfalseの場合は生成したナビゲーションのHTMLを返し、echoプロパティがtrueの場合は何も返しません。
サンプルコード
出力結果
<nav id="global-navigation">
<ul>
<li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-118"><a href="https://example.co.jp/">トップ</a></li>
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="https://example.co.jp/business/">事業紹介</a></li>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-117"><a href="https://example.co.jp/company/">企業情報</a></li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="https://example.co.jp/contact/">お問い合わせ</a></li>
</ul>
</nav>
アイテム（メニュー）や第二階層以降のHTMLを変更するには、walkerプロパティを使用します。
walkerプロパティによる変更については、メニュー項目（アイテム）または2階層目以降をカスタマイズページをご覧ください。