WordPressの外観のメニューで作成したカスタムメニューをページに表示する方法

はじめに

WordPress管理画面の「外観」の「メニュー」で作成したカスタムメニューをページに表示する方法をご紹介します。

カスタムメニューの作成

固定ページの追加

まず、メニューに追加したい項目をあらかじめ固定ページや投稿ページに追加しておきます。

すると上の管理画面メニューの画像内の「メニュー項目を追加」の部分にページが追加されるのでチェックボックスにチェックを入れて「メニューに追加」ボタンを押してメニューを追加していきます。

メニュー名も「g-nav」に変更しました。

施工事例のページは「カスタム投稿タイプ一覧ページ」です。この記事では固定ページでメニューを追加していますが、固定ページを作成せずにカスタムリンクで直接リンクを貼ってメニューに追加しても大丈夫です。

自分がカスタムリンクでメニューに追加していないのは、本番環境に移行したときにドメインが変わるため、カスタムリンクを再び変更する手間が発生するためです。

最後に忘れずに右下の「メニューを保存」を押して保存してください。

メニューを表示させるページのファイルを編集

例えばメニューを表示させたいheader.phpなどに下記を追加します。

PR

wp_nav_menu(array(
    'menu' => 'g-nav',
    'container' => 'nav',
    'container_class' => 'nav',
    'menu_id' => 'g-nav',
    'menu_class' => 'g-nav',
));

'menu'には「メニュー名」が入るので「g-nav」が入ります。

'container'にはナビゲーションの<ul>要素を包むためのhtml要素が入ります。デフォルトは<div>要素です。上記例では<nav>要素を指定しています。

'container_class'には'container'に指定したhtml要素のクラス名を指定します。

'menu_id'にはナビゲーションの<ul>要素のid名を指定します。デフォルトのid名は「menu-メニュー名」です。上記例ではメニュー名のみになるように「g-nav」を指定しています。

'menu_class'にはナビゲーションの<ul>要素のclass名を指定します。デフォルトのクラス名は「menu」になります。上記例では「g-nav」を指定しています。

当記事では最低限の紹介しかしていないので、もっとカスタマイズがしたいという方は下記のリファレンスを参照してください。

WordPress Developer Resources

wp_nav_menu() – Function | Developer.WordPress.org

Displays a navigation menu.…