WordPressナビゲーションメニューの実装 - register_nav_menusとwp_nav_menu

ヘッダーのナビは、いまテンプレートに直書きしたリンクです。これだと項目を増やすたびにコードの修正が必要——「書く人と作る人を分ける」WordPressの思想に反します。今回は、管理画面からメニューを編集できる本物のナビに置きかえます。

2段構え：登録して、表示する

管理画面メニュー機能は、テーマ側の2つの手続きで動きます。

functions.phpで「メニューの置き場」を登録——「このテーマにはヘッダー用メニュー枠があります」と宣言
header.phpで「その枠の中身」を表示——管理画面で組まれたメニューを出力

手続き1：register_nav_menus

function shimaenagado_setup() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');

  // メニューの置き場を登録
  register_nav_menus([
    'header-nav' => 'ヘッダーナビゲーション',
  ]);
}
add_action('after_setup_theme', 'shimaenagado_setup');

'header-nav'が枠のID（テーマ内部で使う名前）、右側が管理画面に表示される名前です。これで管理画面の「外観」に「メニュー」という項目が現れます。

手続き2：wp_nav_menu

header.phpの直書きナビを、まるごと置きかえます。

<nav class="site-nav">
  <?php
  wp_nav_menu([
    'theme_location' => 'header-nav',  // どの枠の中身を出すか
    'container'      => false,         // 余計な囲みdivを出さない
  ]);
  ?>
</nav>

wp_nav_menuは、管理画面で組んだメニューを<ul><li><a>…の形で出力します。HTMLコースで学んだ「ナビの正体はリンクのリスト」そのままの構造が出てくるわけです。

管理画面でメニューを組む

テーマ側の準備ができたら、あとは管理画面の仕事です。

「外観」→「メニュー」を開く
メニュー名（例：メインメニュー）を付けて作成
左の一覧から「ホーム」「会社案内」「お知らせ」の固定ページ・リンクをチェックして追加
「メニューの位置」で「ヘッダーナビゲーション」にチェックして保存

表側を再読みこみすると、管理画面で並べた項目がそのままナビに。ドラッグで並び替えれば表示順も変わります。もうコードを触らずにナビを育てられます。

CSSをリストの形に合わせる

出力が<ul><li>のリスト構造になったので、CSSも合わせます。

.site-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
}
.site-nav a:hover {
  color: #2a6f7c;
}

このレッスンのまとめ

メニュー機能は2段構え——functions.phpでregister_nav_menus（枠の登録）、header.phpでwp_nav_menu（中身の表示）
項目の追加・並び替えは管理画面の「外観」→「メニュー」——もうコードを触らない
出力は<ul><li><a>のリスト構造。現在地クラスcurrent-menu-itemも自動で付く

管理画面から編集できるナビメニュー