WordPressメニュー完全ガイド！作成・基本操作、カスタマイズなど徹底解説！

2025年5月6日

「WordPressのメニューって、どうやって作ればいいの？」
「作ったはずのメニューがサイトに表示されない…原因がわからない！」
「スマホ表示だとナビが崩れて読みにくい……対策はある？」
「アイコンやサブメニューを導入したいけど、プラグイン選びに悩む……」

こんな疑問やお悩みを抱えていませんか？

ナビゲーションは訪問者がサイト内をスムーズに移動するための要（かなめ）。しかし、

初めて設定画面を開くと項目が多すぎて戸惑う
作ったメニューが思い通りに表示されない
応用設定やカスタマイズの方法がわからず時間ばかり過ぎる

といった声は非常に多いものです。

そこで本記事では、

メニューの基本操作から
応用テクニック＆プラグイン活用
レスポンシブ対応や上級カスタマイズ

まで、初心者の方でも迷わず進められるよう、ステップ・バイ・ステップで徹底解説します！

この記事を読めば、サイトの印象アップ・ユーザビリティ向上はもちろん、SEO対策としても効果的なナビゲーションを手軽に導入できるようになります。

ガイドの概要

本記事の目的
WordPressメニューの基本から応用まで、設定手順や便利な拡張方法をまとめて解説します。

この記事を読むとわかること

スクロールできます

項目	内容
メニューの役割	サイト訪問者の導線を整え、ユーザビリティとSEOに貢献する仕組み
基本操作	メニュー作成→項目追加→配置→保存までの手順
応用テクニック	プラグイン活用・テーマ別設定・コードカスタマイズのポイント

✨ この記事のおすすめポイント

図解＆スクリーンショットで一目瞭然📷
ステップバイステップで手順をしっかりフォロー✅
役立つプラグインやトラブル対策も網羅🎁
初心者向けに不要な専門用語は極力排除

さあ、これから一緒にWordPressメニューの世界をマスターしていきましょう！🚀

メニューの基礎知識

ナビゲーションメニューとは何か

ナビゲーションメニューは、サイト内のページやコンテンツへのリンクを一か所にまとめた「案内板」のようなものです。

ユーザーの迷子を防ぐ：どこに何があるか一目でわかる
サイト構造の可視化：ページ同士の関係性を整理
統一感の演出：デザインや配置をそろえることでプロっぽさUP✨

💡 ポイント：

見出しやボタン風にデザインするとクリック率が上がる
スマホでは折りたたみ式（ハンバーガーメニュー）にすると省スペース

メニューを設定する意義

メニューを適切に配置・構成することで、サイト運営に以下のようなメリットがあります。

スクロールできます

効果	内容
ユーザー導線の最適化	必要な情報へストレスなく誘導し、滞在時間や回遊率をアップ📈
SEOへの好影響	クローラーがサイト構造を正しく認識しやすくなり、評価につながる
コンバージョン向上	問い合わせページや購入ページへの導線を目立たせ、成果に直結させる
ブランディング強化	統一感あるメニュー配置でサイト全体の印象を底上げ

ユーザー導線：トップ→カテゴリ→詳細…と流れるように動線を設計
SEO：内部リンクの張り方が整然としているほど、検索エンジン評価が高まる

🚀 メニュー設計のコツ

優先度の高いページを左上（または先頭）に配置
階層は深くしすぎない（2～3階層程度がベスト）
ラベルは短く明快に（例：「サービス紹介」→「サービス」）

事前準備

メニューに含めるページの用意

まずはナビゲーションに加えたい要素をまとめておきましょう。

スクロールできます

種類	内容例	ポイント
固定ページ	会社概要、サービス紹介、お問い合わせ	常に表示すべき“核”ページを用意📌
投稿	ブログ記事、ニュース	最新記事一覧へのリンクを配置すると回遊率アップ↻
カテゴリー・タグ	カテゴリー一覧、タグクラウド	カテゴリー分けでユーザー導線を整理
カスタムリンク	LP（ランディングページ）、外部URL	外部サービスや特設ページへの誘導に最適🌐

💡 TIP

LPやキャンペーンページなど、一時的なリンクはカスタムリンクで。
投稿を自動追加したい場合は後述の「自動追加機能」を活用。

管理画面へのアクセス方法

メニュー設定画面には2つの入口があります。

用途やテーマに合わせて使い分けましょう。

外観＞メニュー
- 全テーマ共通の管理画面
- メニューの新規作成・位置指定・項目追加など基本操作はこちら
外観＞カスタマイズ＞メニュー
- リアルタイムプレビューを見ながら調整可能
- テーマによってはフッターやモバイルメニューなど細かな表示切替が利用できる🔍

🎯 こんなときは…

「細かいデザイン確認をしながら設定したい」→ カスタマイザー
「メニュー構成だけサクッと作りたい」→ 標準メニュー画面

これで、メニュー作成の土台が整いました。

メニューの作成と基本操作

新規メニューの生成

管理画面の 外観＞メニュー を開く
「新しいメニューを作成」をクリック
任意のメニュー名を入力し、「メニューを作成」を押す

🔑 ポイント：メニュー名はわかりやすく。例：「ヘッダーナビ」「フッターメニュー」

メニュー項目の追加

以下の中から、必要なリンクをチェックして 「メニューに追加」 をクリックします。

スクロールできます

項目タイプ	説明
固定ページ	会社概要、お問い合わせなど常設ページ
投稿記事	個別の記事やブログ一覧へのリンク
カテゴリー／タグ	記事を分類した一覧ページへのショートカット
カスタムリンク	外部サイト／LPなど自由なURLを設定可能

✨ ワンポイント：

投稿を一覧表示したい場合は「投稿ページ」そのものではなく、カテゴリーページを設定すると更新が楽！

項目の並び替え・階層化

メニュー内の項目をドラッグ＆ドロップ
親子関係を作る場合は、項目を少し右にスライドすると サブメニュー に
深すぎる階層はユーザビリティ低下のもと。2階層程度が目安

📌 コツ：

主要ページはトップレベルに、詳細ページは子要素にまとめる

配置場所の指定

作成したメニューをサイト内のどこに表示するかを選びます。

スクロールできます

表示位置	用途例
ヘッダー	メインナビゲーション
フッター	サイトマップ的導線
サイドバー	コンテンツ補助ナビ
モバイルメニュー	スマホ用スライド／ハンバーガー

📱 スマホ対応：
テーマによっては「モバイル専用メニュー」が用意されている場合あり。忘れずにチェック！

設定内容の保存

画面右下の 「メニューを保存」 をクリック
サイトをリロードして、実際の表示を必ず確認
問題なければ完了！もし表示崩れがあれば、カスタマイザーで微調整を

✅ 保存後のチェックリスト

表示位置に正しくセットされているか
ラベルの文字切れや重なりがないか
モバイル表示でもメニューが展開できるか

これで「メニューの作成」から「基本操作」の手順は完了です！

応用設定

表示名（ラベル）の編集

メニュー項目の右端にある▼をクリック
「ナビゲーションラベル」に任意の文字列を入力
短く・わかりやすい名前に変更すると効果的🎯
「メニューを保存」を忘れずに

Tip: 英語表記や絵文字を組み合わせると視覚的に目立ちます📌

リンクを新しいタブで開く設定

画面上部の「表示オプション」を開き、「リンクターゲット」にチェック
対象項目を▼展開し、「新しいタブで開く」に✔を入れる
保存後、リンクをクリックすると別タブで開くように

「自動追加」機能の活用

用途：公開済みの固定ページをトップレベルメニューに自動登録
設定方法：
1. メニュー設定画面下部の「自動追加」にある「トップレベル固定ページを自動的に追加」に✔
2. 新規ページ公開時にメニューへ自動反映される
メリット：ページ増加時のメニュー更新忘れを防止🛡️

複数メニューの管理

スクロールできます

操作	説明
位置の管理	「メニューの位置を管理」タブで各メニューと表示場所を紐付け
メニューの切り替え	テーマごと・デバイスごとに異なるメニューを設定可能

🚩 活用例

PC用とスマホ用で別メニューを出し分け
メインメニューとフッターメニューを簡単に切り替え

項目の削除方法

削除したいメニュー項目▼を開く
「削除」をクリック
必要に応じて保存し、フロントで反映を確認🚮

注意: 削除後に戻せないため、誤削除時は再追加が必要です。

これらの応用設定を活用して、より洗練されたナビゲーションを実現しましょう！

拡張プラグインで機能アップ

プラグイン導入の流れ

プラグインを使うと、標準機能を超えたメニュー表現が可能になります。

導入手順は以下の2通りです。

管理画面で検索＆インストール
1. ダッシュボード＞プラグイン＞新規追加 を開く
2. 検索ボックスにプラグイン名を入力
3. 「今すぐインストール」→「有効化」をクリック✅
4. 外観＞メニュー または カスタマイズ＞メニュー に新機能が追加
ZIPアップロードによる追加
1. プラグインの配布サイトから .zip ファイルをダウンロード
2. ダッシュボード＞プラグイン＞新規追加＞プラグインのアップロード
3. ファイルを選択し「今すぐインストール」 → 「有効化」📂
4. 必要に応じて設定画面から細かいオプションを調整

プラグイン名	特徴	おすすめポイント
Menu Image	メニュー項目にアイコンを簡単追加 🎨	視覚的にわかりやすく、サイトデザインに統一感を演出
WP Responsive Menu	スマホ／タブレット向けに最適化されたメニューを生成📱	モバイルでの操作性がグンとアップ
WP Mobile Menu	シンプル＆軽量なモバイル用ドロワーメニュー	高速表示＆直感的な操作でユーザー満足度向上
Max Mega Menu	ドロップダウン式のメガメニューをドラッグで作成🗂️	大量のメニュー項目を整理し、グリッドやアイコン配置もOK
UberMenu	高度なカスタマイズが可能なプロ仕様メガメニュー🔧	レイアウト自由度が高く、デザインを細部までコントロール

テーマ別・表示形式別の設定

テーマカスタマイザー vs 標準メニュー画面

WordPressには2つのメニュー設定画面があり、それぞれメリットがあります。

スクロールできます

設定画面	特徴	おすすめシーン
標準メニュー画面	– シンプルで高速 – メニュー構成だけに集中できる	初期セットアップやサクッと編集したい場合
テーマカスタマイザー	– リアルタイムプレビュー – 色やフォントなどデザインも同時編集	デザイン調整しながら仕上げたい場合

⚡ ヒント：

デザイン変更を伴う場合はカスタマイザー、構成だけなら標準画面が◎

ヘッダー／フッターごとの切り替え

サイトの上下で異なるナビを使いたいときは、メニュー位置を使い分けます。

外観＞メニュー＞位置の管理
「ヘッダー用」「フッター用」などテーマが用意した位置に各メニューを割り当て
保存後にサイトを確認し、意図通りに表示されているかチェック

🔄 ワンポイント：
フッターには「サイトマップ」や「プライバシーポリシー」など補足的なリンクを配置すると親切です。

ウィジェットでのナビ表示

サイドバーやフッターウィジェットエリアにもメニューを設置できます。

外観＞ウィジェット を開く
「ナビゲーションメニュー」ウィジェットをドラッグして表示させたいエリアへ
ウィジェット設定で、表示したいメニューを選択し保存
サイトで位置とデザインを確認🔍

💡 おすすめ活用法

サイドバーに「人気記事」メニューを作る
フッターウィジェットに「お問い合わせ」「SNSリンク」をまとめる

これで、テーマや表示形式に合わせたメニュー設定が完了です！

コードによるカスタムメニュー（上級編）

functions.phpへの登録手順

まずはテーマの functions.php にメニュー登録を追加します。

// メニューを登録する
function mytheme_register_menus() {
    register_nav_menus([
        'header-menu' => 'ヘッダーメニュー',
        'footer-menu' => 'フッターメニュー',
    ]);
}
add_action('after_setup_theme', 'mytheme_register_menus');

before_action：テーマ有効化後に登録される
register_nav_menus：複数同時登録OK✅

コールバック関数でHTML構築

登録したメニューを呼び出し、独自のマークアップを当てはめます。

// カスタム出力用関数
function mytheme_custom_nav() {
    wp_nav_menu([
        'theme_location' => 'header-menu',
        'container'      => 'nav',
        'container_id'   => 'global-nav',
        'menu_class'     => 'my-nav-list',
        'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
        'link_before'    => '<span class="nav-text">',
        'link_after'     => '</span>',
    ]);
}

container や menu_class でHTMLタグ・クラスを自由に設定🎨
link_before／link_after で各リンクにラッパーを追加

カスタムマークアップの挿入

さらにフィルターフックを使い、メニュー項目にアイコンや説明文を差し込みます。

// アイコンを追加するフィルター
function mytheme_menu_item_icon($title, $item, $args, $depth) {
    if ($args->theme_location === 'header-menu') {
        // 例：先頭にFont Awesomeアイコンを追加
        $icon_html = '<i class="fa fa-angle-right"></i> ';
        $title = $icon_html . $title;
    }
    return $title;
}
add_filter('nav_menu_item_title', 'mytheme_menu_item_icon', 10, 4);

nav_menu_item_title：項目タイトルを加工
アイコンのHTMLを先頭に挿入し、視覚的にアクセント💡

// 説明文を追加するWalkerクラス例
class Description_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth=0, $args=[], $id=0) {
        parent::start_el($output, $item, $depth, $args, $id);
        if ($item->description) {
            $output .= '<p class="menu-desc">' . esc_html($item->description) . '</p>';
        }
    }
}
// 呼び出し例
wp_nav_menu([
    'theme_location' => 'footer-menu',
    'walker'         => new Description_Walker(),
]);

Walker_Nav_Menu を拡張して、説明文（description）を自動挿入
深いカスタマイズにも対応する強力な手法🛠️

以上で、コードベースのメニューカスタマイズが完了です。

これらを組み合わせることで、自由自在にナビゲーションを設計できます！

トラブルシューティング

メニューがサイト上に出ない

配置場所の指定ミス
- 外観＞メニュー＞「位置の管理」で、正しいメニューがヘッダーやフッターに割り当てられているか確認しましょう🔍
- 割り当て後は必ず「メニューを保存」をクリックしてください💾
表示オプションの非表示設定
- 管理画面右上の「表示オプション」を開き、「リンクターゲット」や「説明」など必要なプロパティがオフになっていないかチェック
- オプションを有効化すると、メニュー項目の詳細設定パネルが表示されるようになります✨

🚨 ポイント：

キャッシュプラグインを使っている場合は、設定変更後にキャッシュクリアを忘れずに！
ブラウザのハードリロード（Ctrl＋F5）で反映状況を再確認すると確実です。

管理画面にメニュー項目が見当たらない

テーマのサポート状況確認
- テーマによってはメニュー機能が無効化されている場合があります。functions.php に以下を追加してメニューサポートを有効化しましょう：
  php add_action('after_setup_theme', function() { add_theme_support('menus'); });
スクリーンオプションの表示項目
- メニュー編集画面の右上「表示オプション」をクリックし、固定ページ・投稿・カスタムリンクなどがチェックされていることを確認
プラグインとの競合
- カスタム投稿タイプやメニュー関連プラグインが影響している可能性もあります。一時的にプラグインを停止して症状が改善するか試してみましょう🔄

✅ 確認リスト

テーマに register_nav_menus があるか
「表示オプション」で必要な項目がオン
キャッシュクリア＋ブラウザ再読み込み
プラグインの競合チェック

以上の手順でほとんどのトラブルが解消できるはずです。

困ったときは落ち着いて順番に確認してみてください！

振り返りとQ&A

ポイント振り返り

メニューの役割：訪問者の迷子を防ぎ、サイト構造を明確化✏️
事前準備：固定ページ・投稿・カテゴリーなど必要なリンクを整理📋
基本操作：新規作成→項目追加→並び替え→配置→保存の流れ✅
応用テクニック：ラベル編集・新しいタブ設定・自動追加・複数管理🔧
プラグイン活用：Menu Image／WP Responsive Menuなどで機能拡張🚀
テーマ別設定：標準画面とカスタマイザーを使い分け、ウィジェットにも対応🎨
コードカスタマイズ：functions.php登録・Walkerクラスで自由自在に🛠️
トラブル対策：配置ミス・表示オプション・キャッシュ・競合プラグインをチェック⚠️

よくある質問

スクロールできます

質問	回答
メニューにアイコンを入れられますか？	できます！Menu Imageプラグインや、`nav_menu_item_title`フィルターでFont Awesome等を追加可能🎨
ページごとに異なるメニューを表示できますか？	可能です！複数メニューを作成し、「位置の管理」や条件分岐タグ（`is_front_page()`など）で切り替え🌓

💡 Tip：Q&A以外にも疑問があれば、ぜひ実際に画面を操作しながら試してみてください。学びが一番深まります！

まとめ

メニュー作成の流れ：新規メニュー生成→項目追加→並び替え→配置→保存
応用設定ポイント：ラベル編集／タブで開く／自動追加／複数管理
プラグイン活用術：アイコン表示やメガメニューで魅力アップ
レスポンシブ対応：スマホ向けメニューの最適化手順
上級カスタマイズ：functions.php登録やフィルター・Walkerクラスによる自由設計
トラブル対策：配置ミス・表示オプション・キャッシュクリアの確認リスト

この記事を参考に、あなたのWordPressサイトにぴったり合ったメニューを作り上げてください。

ナビゲーションを整えるだけで、訪問者の満足度も検索エンジンからの評価もグッと向上します。

ぜひ今すぐ設定を見直して、理想のサイト構築を実現しましょう！🚀

WordPressメニュー完全ガイド！作成・基本操作、カスタマイズなど徹底解説！

ガイドの概要

メニューの基礎知識

ナビゲーションメニューとは何か

メニューを設定する意義

事前準備

メニューに含めるページの用意

管理画面へのアクセス方法

メニューの作成と基本操作

新規メニューの生成

メニュー項目の追加

項目の並び替え・階層化

配置場所の指定

設定内容の保存

応用設定

表示名（ラベル）の編集

リンクを新しいタブで開く設定

「自動追加」機能の活用

複数メニューの管理

項目の削除方法

拡張プラグインで機能アップ

プラグイン導入の流れ

おすすめプラグイン

テーマ別・表示形式別の設定

テーマカスタマイザー vs 標準メニュー画面

ヘッダー／フッターごとの切り替え

ウィジェットでのナビ表示

コードによるカスタムメニュー（上級編）

functions.phpへの登録手順

コールバック関数でHTML構築

カスタムマークアップの挿入

トラブルシューティング

メニューがサイト上に出ない

管理画面にメニュー項目が見当たらない

振り返りとQ&A

ポイント振り返り

よくある質問

まとめ

関連記事