WordPressでナビゲーションメニューを作成・表示する方法【初心者向けガイド】
WordPressでは、簡単にナビゲーションメニュー（グローバルナビやフッターメニューなど）を作成・表示することができます。本記事では、メニューの作成方法からテーマへの表示方法まで、初心者にも分かりやすく解説します。
Contents
① ナビゲーションメニューとは？
ナビゲーションメニューとは、ユーザーがサイト内を移動するためのリンク一覧のことです。よくある例としては、以下のような場所に設置されます。
- ヘッダー（グローバルナビ）
- フッター
- サイドバー（ウィジェット）
- スマホメニュー
WordPressでは「外観 ＞ メニュー」からメニューの作成・管理が可能です。
② 管理画面からメニューを作成する方法
- WordPress管理画面にログイン
- 左メニューから [外観] ＞ [メニュー] をクリック
- 「新しいメニューを作成」を選択
- メニュー名を入力して「メニューを作成」をクリック
- ページ・投稿・カスタムリンクなどから項目を追加
- 「メニュー設定」で表示位置を選び、「メニューを保存」
👉 表示位置は、テーマがサポートする位置によって異なります（例：ヘッダーメニュー、フッターメニューなど）。
③ メニュー表示位置をテーマで登録する方法
自作テーマやカスタマイズテーマでは、表示位置を functions.php に記述しておく必要があります。
// functions.php に記述
function my_register_menus() {
register_nav_menus([
'global' => 'グローバルメニュー',
'footer' => 'フッターメニュー'
]);
}
add_action('after_setup_theme', 'my_register_menus');④ ナビゲーションメニューをテンプレートに表示する方法
メニューを表示したい箇所に以下のようなコードを挿入します。
<?php
wp_nav_menu([
'theme_location' => 'global',
'container' => 'nav',
'container_class' => 'global-nav',
'menu_class' => 'menu-list'
]);
?>よく使うパラメータ解説：
| パラメータ | 説明 |
|---|---|
theme_location | register_nav_menus()で指定したキー |
container | メニューを囲む要素タグ（nav, divなど） |
container_class | 外枠のクラス名 |
menu_class | ulタグのクラス名 |
⑤ 複数のメニューを使う場合
functions.phpで複数メニューを登録し、それぞれに異なる theme_location を指定してテンプレートに出力すれば、ヘッダー・フッター・スマホ用などに分けて活用可能です。
wp_nav_menu([
'theme_location' => 'footer',
'container' => false,
'menu_class' => 'footer-menu'
]);⑥ メニューのカスタマイズ例（ul/liの出力調整）
不要な div や class を出力させたくない場合は以下のように container => false を設定しましょう。
wp_nav_menu([
'theme_location' => 'global',
'container' => false,
'menu_class' => 'nav-list'
]);さらに、walker を使えば <li> 単位の出力構造までカスタマイズできます。
⑦ よくあるトラブルと解決策
| トラブル内容 | 原因と対処法 |
|---|---|
| メニューが表示されない | functions.phpにregister_nav_menus()の記述がない／theme_locationの値が一致していない |
| メニューが管理画面で選べない | テーマ側で表示位置が登録されていない |
| メニューが自動で並ばない | メニューに何も登録していないと、デフォルトのページ一覧が出ることがあります。必ず「メニューを作成→保存」しましょう。 |
⑧ WordPressナビメニューのデザイン調整方法
WordPressのメニューは基本的にHTMLで出力されるだけなので、CSSで自由に装飾可能です。
.global-nav .menu-list {
display: flex;
gap: 1rem;
list-style: none;
}⑨ より高度なカスタマイズをしたい方へ
- スマホ対応のハンバーガーメニューを作る
- アイコン付きメニューにする
- ACFなどと連携して動的な項目を出す
こういったカスタマイズも可能です。今後の記事で紹介していきます！
まとめ
WordPressでナビゲーションメニューを作成・表示する流れは以下の通りです。
- 管理画面からメニューを作成・設定
functions.phpでメニューの表示位置を登録- テンプレートファイルに
wp_nav_menu()を記述して表示 - CSSでスタイルを整える
ナビゲーションメニューはユーザー体験を大きく左右する重要な要素です。ぜひカスタマイズして、見やすく使いやすいサイトにしていきましょう！