はじめに
本記事の目的
本記事はWordPressのナビゲーションメニューについて、初心者から上級者まで幅広く理解できるようにまとめた総合ガイドです。基本的な作り方や設定、カスタマイズ方法、さらにテーマ開発者向けの関数やコードまで段階的に学べます。
対象読者
- 初めてメニューを作る方
- 既存のメニューをより自由にカスタマイズしたい方
- テーマ開発でメニュー周りのコードを扱う開発者
本記事の構成と読み方
第2章では実際のメニュー作成手順（画面操作）を説明します。第3章で細かな設定や表示の調整方法を解説します。第4章はregister_nav_menusやwp_nav_menuの使い方など、テーマ開発向けの技術的な内容に踏み込みます。必要に応じて順番どおりに読み進めるか、知りたい章だけ参照してください。
読む前の準備
WordPressの管理画面にアクセスできることと、テーマ編集や子テーマの作成方法に慣れているとスムーズです。初心者の方はまず第2章から順に確認することをおすすめします。
WordPress ナビゲーション メニューを作成する方法（wpmet.com）
Gutenbergでナビメニューブロックを追加する
Gutenbergでは「ナビメニュー」ブロックを使います。投稿や固定ページの編集画面で+ボタンを押し「ナビメニュー」を選択すると、既存のメニューを読み込むか新規作成できます。ブロック内でメニュー項目をドラッグして並べ替えたり、階層を作ってドロップダウンにできます。例えば「会社情報」の下に「沿革」「メンバー」を入れると分かりやすくなります。
外観→メニューでの基本手順
管理画面の「外観」→「メニュー」を開き、新しいメニュー名を入力して「メニューを作成」。ページやカスタムリンク、カテゴリーを追加し、ドラッグで順序や階層を調整します。最後に表示位置（ヘッダー、フッター、ソーシャルなど）を指定して保存します。
Elementorユーザー向け編集方法
Elementorではナビゲーションメニューウィジェットを使います。編集画面でウィジェットを配置し、作成済みメニューを選択します。レスポンシブ表示で表示位置やドロップダウンの動作を確認できます。
配置とドロップダウン動作のポイント
論理的で直感的な構造にします。主要な項目は左から右へ、関連項目はサブメニューにまとめます。ドロップダウンはhoverかクリックかを選び、モバイルは必ずタップ操作で開くようにします。
スタイル調整とハンバーガー設定
背景色、フォント、パディング、ボーダーはテーマのカスタマイザーやブロック/ウィジェット設定で調整できます。見出しと同系色で統一すると読みやすくなります。モバイルではハンバーガーアイコンを有効にし、アイコンのサイズ・色・アニメーションを設定して視認性を高めます。
メニュー構造の作り方
訪問者が目的のページに最短でたどり着けるように項目数を絞り、ラベルは簡潔にします。優先順位の高いページを目立たせ、サブメニューには詳細を置くと使いやすくなります。
WordPressのナビゲーションメニューの設定方法について詳しく（onamae.com）
はじめに
ナビゲーションメニューは訪問者がサイトを回る道しるべです。ここでは初心者向けに、基本の5ステップでわかりやすく説明します。例としてブログの「Home」「About」「カテゴリー（Tech, Travel）」「お問い合わせ」を作る流れを想定します。
1. ページを作成する
まずはメニューに載せたい固定ページや投稿を用意します。ダッシュボードの「固定ページ」→「新規追加」でタイトルと本文を入力して公開します。投稿のカテゴリはあらかじめ作成しておくと便利です。
2. メニュー編集画面の開き方
ダッシュボードで「外観」→「メニュー」を開きます。テーマによっては「カスタマイズ」→「メニュー」でも編集できます。画面左側に追加可能な項目、中央にメニュー構成、右側に表示場所の設定が並びます。
3. メニューを作成する
「新しいメニューを作成」をクリックして名前を付けます（例：メインメニュー）。作成後は表示場所（ヘッダー、フッターなど）を選んで保存します。
4. 項目の追加
左側の「固定ページ」「投稿」「カスタムリンク」「カテゴリー」から項目を選び「メニューに追加」を押します。カスタムリンクで外部ページや特定のアンカーリンクも指定できます。
5. 並び替えと階層化
メニュー内の項目をドラッグして順番を変えます。少し右にスライドさせると子メニュー（ドロップダウン）になります。並び替え後は必ず「メニューを保存」で確定してください。
カテゴリーやタグをメニューに加える方法
左側に「カテゴリー」が表示されない場合は画面右上の「表示オプション」を開き、「カテゴリー」や「タグ」にチェックを入れて表示させます。その後通常どおりメニューに追加します。ブログの目次代わりにカテゴリーを置くと訪問者が目的の記事にたどり着きやすくなります。
ワンポイント
メニューの項目名は簡潔にし、重要なページを上位に置くと使いやすくなります。テーマによって表示場所や見た目が変わるので、保存後にサイトで必ず確認してください。
テーマ開発者向け register_nav_menus と wp_nav_menu の使い方（tomiwa-tech.co.jp）
functions.php にナビ位置を登録する
テーマの functions.php に以下を追加すると、管理画面の「外観→メニュー」で表示位置が増えます。
function mytheme_register_menus() {
register_nav_menus([
'primary' => 'ヘッダーナビゲーション',
'footer' => 'フッターナビゲーション',
]);
}
add_action('after_setup_theme', 'mytheme_register_menus');
register_nav_menus は複数位置を一度に登録します。単一なら register_nav_menu(‘header’,’ヘッダー’) としても同様です。違いは引数の受け取り方だけで、実質的な用途は同じです。
テーマ内でメニューを表示する（wp_nav_menu）
登録した位置を表示するには、header.php などで wp_nav_menu を使います。
wp_nav_menu([
'theme_location' => 'primary',
'container' => 'nav',
'container_class'=> 'main-nav',
'menu_class' => 'menu',
'fallback_cb' => false,
]);
主な引数の意味
– theme_location: register_nav_menus で定義したキー
– container: メニューを包む要素（false で無し）
– menu_class: ul に付くクラス
– fallback_cb: メニュー未割当時の代替処理
実務上のポイント
- 複数の表示位置を用意するとユーザーが柔軟に配置できます。管理画面で位置にメニューを割り当てるだけで反映します。
- CSS やモバイル用の構造は wp_nav_menu の引数や walker で調整できます。カスタムテーマ作成時に役立ちます。
