2026年5月20日

WordPressのナビゲーションメニューを設定する方法

テーマ・デザイン

はじめに

WordPressのナビゲーションメニューは「管理画面でメニューを作成 → テーマにロケーションを登録 → wp_nav_menu() で表示」の3ステップで設定できます。WP-CLIを使えばコマンドラインからもメニューを管理できます。

症状・原因

メニューを設定したのに表示されない
テーマにメニューロケーションが登録されていない
WP-CLIでメニューを管理したい
カスタムメニューの作り方がわからない

解決手順

ステップ1：テーマにメニューロケーションを登録する

// functions.php に追加
add_action('after_setup_theme', function(): void {
    register_nav_menus([
        'primary'   => 'ヘッダーメニュー',
        'footer'    => 'フッターメニュー',
        'sidebar'   => 'サイドバーメニュー',
        'mobile'    => 'モバイルメニュー',
    ]);
});

# 登録されたメニューロケーションを確認
wp menu location list --format=table

# 出力例:
# +----------+--------------------+
# | location | description        |
# +----------+--------------------+
# | primary  | ヘッダーメニュー   |
# | footer   | フッターメニュー   |
# +----------+--------------------+

ステップ2：管理画面でメニューを作成する

# WP-CLIでメニューを作成
wp menu create "メインメニュー"

# メニューにページを追加
wp menu item add-post メインメニュー 1    # 投稿ID: 1（トップページ）
wp menu item add-post メインメニュー 10   # 投稿ID: 10（会社概要）
wp menu item add-post メインメニュー 20   # 投稿ID: 20（お問い合わせ）

# カスタムリンクを追加
wp menu item add-custom メインメニュー "外部サイト" "https://example.com"

# カテゴリーをメニューに追加
wp menu item add-term メインメニュー category 5  # カテゴリーID: 5

# メニューロケーションに割り当て
wp menu location assignment add メインメニュー primary

# 作成したメニューを確認
wp menu list --format=table
wp menu item list メインメニュー --format=table

ステップ3：テンプレートでメニューを表示する

// テーマのheader.phpやテンプレートでメニューを表示
wp_nav_menu([
    'theme_location' => 'primary',       // register_nav_menusで登録したキー
    'menu_class'     => 'nav-menu',       // ulタグのクラス
    'container'      => 'nav',            // 包括タグ（nav, div, falseで無効）
    'container_class'=> 'main-navigation',// 包括タグのクラス
    'depth'          => 2,                // サブメニューの深さ（0=制限なし）
    'fallback_cb'    => false,            // メニュー未設定時のフォールバック
]);

// メニューが設定されているか確認してから表示
if (has_nav_menu('primary')) {
    wp_nav_menu(['theme_location' => 'primary']);
} else {
    // メニュー未設定時のデフォルト表示
    wp_page_menu(['show_home' => true]);
}

ステップ4：メニューのHTMLをカスタマイズする

// Walker クラスでメニューのHTMLをカスタム
class Custom_Nav_Walker extends Walker_Nav_Menu {
    public function start_el(
        string &$output,
        WP_Post $item,
        int $depth = 0,
        array $args = [],
        int $id = 0
    ): void {
        $classes = implode(' ', $item->classes);
        $url     = $item->url;
        $title   = $item->title;

        $output .= sprintf(
            '<li class="%s"><a href="%s">%s</a>',
            esc_attr($classes),
            esc_url($url),
            esc_html($title)
        );
    }
}

// 使用方法
wp_nav_menu([
    'theme_location' => 'primary',
    'walker'         => new Custom_Nav_Walker(),
]);

ステップ5：メニューをWP-CLIで管理する

# メニュー一覧
wp menu list --format=table

# メニューアイテムの並び順を変更
wp menu item list メインメニュー --format=table
wp menu item update {item_id} --position=2

# メニューアイテムを削除
wp menu item delete {item_id}

# メニューロケーションの割り当てを確認
wp menu location assignment list --format=table

# メニューを別のロケーションに割り当て
wp menu location assignment remove メインメニュー primary
wp menu location assignment add メインメニュー footer

# メニューを削除
wp menu delete メインメニュー

ステップ6：メニューが表示されない場合のデバッグ

# テーマにメニューロケーションが登録されているか確認
wp eval "print_r(get_registered_nav_menus());"

# メニューがロケーションに割り当てられているか確認
wp eval "print_r(get_nav_menu_locations());"

# メニューの詳細情報
wp eval "
\$locations = get_nav_menu_locations();
foreach (\$locations as \$location => \$menu_id) {
    \$menu = wp_get_nav_menu_object(\$menu_id);
    echo \$location . ': ' . (\$menu ? \$menu->name : '未割り当て') . PHP_EOL;
}"

注意事項

register_nav_menus() は after_setup_theme フックで呼び出してください。init フックでも動きますが、推奨は after_setup_theme です
wp_nav_menu() の theme_location が register_nav_menus() に登録した値と一致しない場合、メニューは表示されません
FSE（フルサイト編集）対応テーマでは、メニューブロックを使用するためPHPでの設定は不要な場合があります

まとめ

ナビゲーションメニューは register_nav_menus() でロケーションを登録し、管理画面またはWP-CLIでメニューを作成、wp_nav_menu() で表示します。wp menu location assignment list でロケーション割り当て状態を確認できます。

Post Views: 12