ナビゲーションメニュー(カスタムメニュー)を表示する方法【WordPress関数】｜ためになるWordPressブログ

さて今回はナビゲーションメニューの作り方についてです。

ナビゲーションメニューというのは、

このようなウェブサイトの上部にある赤枠のようなメニューのことですね。

WordPressではこのようなナビゲーションメニューがかんたんに作れる以下の２つの関数が用意されています。

register_nav_menus()
wp_nav_menu()

register_nav_menus()でナビゲーションメニューを登録し、wp_nav_menu()で表示するといった使い方になります。

ナビゲーションメニューを登録
ヘッダーにナビゲーションメニューを追加してみよう
まとめ

ナビゲーションメニューを登録

まずはregister_nav_menus()でナビゲーションメニューの登録です。

ナビゲーションメニューを登録しておかないとwp_nav_menu()で表示しようとしてもうまくいきません。

function.phpにこのように書いてみましょう。

function.php

function sampletheme_setup() {
register_nav_menus (
[‘main-menu’ => ‘ヘッダーに表示するメニュー’,]
);
}
add_action( ‘after_setup_theme’, ‘sampletheme_setup’ );

register_nav_menus()を登録するためにアクションフックを利用しています。

左側の”main-menu”としている部分がカスタムメニューの名前(スラッグ名)で自分で名前を設定します。
右側の”ヘッダーに表示するメニュー”というのがメニューが表示される位置の説明です。

[‘main-menu’ => ‘ヘッダーに表示するメニュー’,]の部分はarray(‘main-menu’ => ‘ヘッダーに表示するメニュー’,)と書いても構いません。
フッター用やサイドバー用に複数のメニューを登録することも可能です。

これを書いて更新ボタンを押すと管理画面の”外観”のところに“メニュー”というものが表示されます。

このメニューから項目を自分で設定できますのでやってみましょう。

また”外観”の”カスタマイズ”からもメニューの編集ができるよになります。

現在の設定のところに先程function.phpに入力したメニューが表示される位置の説明が反映しています。

ヘッダーにナビゲーションメニューを追加してみよう

ではメニューの登録が完了したのであとは表示させる作業です。
メニューを表示させるにはwp_nav_menu()を使用します。

通常ナビゲーションメニューはヘッダーで使用することが多いのでheader.phpにこのように書いてみましょう。

header.php

<?php $nav = [‘theme_location’ => ‘main-menu’,];
wp_nav_menu($nav); ?>

WordPress Codexに使用できるパラメータの詳細がありますが、register_nav_menus()で登録したメニューを使用する場合は“theme_location”にfunction.phpに登録したスラッグ名を入れ込みます。
今回の場合は”main-menu”で登録したのでそれを入力します。

するとナビゲーションメニューメニューが表示されます。