WordPressでナビゲーションメニューを表示する方法

ここでは、WordPressでナビゲーションメニューを表示する方法について、説明していきます。

register_nav_menus()

まずはregister_nav_menus()を用いてfunctions.phpファイルにナビゲーションメニューの登録を行います。

register_nav_menus(
  array(
    "header-nav" => "ヘッダーナビ",
    "footer-nav" => "フッターナビ"
  )
);

上記のように記述することで、管理画面の「外観」の中に「メニュー」が表示されます。

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

管理画面でメニュー名を入力し、「メニューの位置」の「ヘッダーナビ」にチェックを入れ、「メニューの作成」ボタンをクリックします。

表示させるメニュー項目の追加

左の「メニュー項目を追加」から表示させる項目を選択し、「メニューを保存」ボタンをクリックします。

wp_nav_menu()

ナビゲーションメニューを表示させたい部分に、wp_nav_menu()を記述します。

<?php wp_nav_menu(array(
  "container" => false,
  "menu_class" => "header__menu menu",
  "theme_location" => "header-nav",
)); ?>

上記の引数の内容は以下の通りです。
・「”container” => false」は、<ul>タグを<div>で囲まないようにする。
・「”menu_class” => “header__menu menu”」は、<ul>タグに付与するクラス名を設定しています。
・「”theme_location” => “header-nav”」は、表示させたいナビゲーションの種類を指定しています。

出力結果

上記のように指定することで、ナビゲーションメニューを表示させることができます。

まとめ

このように、register_nav_menus()でナビゲーションメニューを登録し、管理画面で詳細の設定をし、wp_nav_menu()を表示させたい部分に記述することで、ナビゲーションメニューを表示させることができます。