2026年7月1日
2026年7月1日
WordPressの「ナビゲーション」ブロックでメニューを作る方法|サブメニュー・スマホ表示・消えた時の対処
ブロックテーマでヘッダーのメニューを作るには、コアの「ナビゲーション」ブロックを使います。メニューの中身は「ナビゲーションメニュー」として別に保存され、ブロックはそれを呼び出して表示する仕組みです。この記事では、メニューの作成と選択、固定ページ一覧による自動表示、サブメニュー、スマホでのオーバーレイメニュー、クラシックメニューの取り込み、テーマ変更後にメニューが消えたときの対処までを管理画面の操作で説明します。
画面の表記はバージョンやテーマで多少異なります。本文の表記は(2026年10月現在)の一般的な日本語表示を基準にしています。
ナビゲーションブロックの仕組み
ナビゲーションブロックを理解するうえで大事なのは、「ブロック」と「メニューの中身」が別々に保存されていることです。
- ナビゲーションブロック: ヘッダーなどに置く表示の枠。配置・色・スマホでの表示方法などを持つ
- ナビゲーションメニュー: リンクの並びそのもの。投稿とは別の種類のデータ(投稿タイプ wp_navigation)としてデータベースに保存される
ブロックは「どのメニューを表示するか」を指しているだけなので、同じメニューを複数の場所で使い回せます。逆に、ある場所でメニューの項目を編集すると、同じメニューを表示している他の場所にも変更が反映されます。
ブロックを置く場所
ブロックテーマのヘッダー
多くのブロックテーマでは、ヘッダーのテンプレートパーツに最初からナビゲーションブロックが入っています。
- 管理画面の「外観」→「エディター」を開きます。
- 「パターン」などからテンプレートパーツの「ヘッダー」を開くか、テンプレートを開いてヘッダー部分を選択します。
- ナビゲーションブロックを選び、メニューを編集します。
- 右上の「保存」を押します。
保存時には、テンプレートパーツとナビゲーションメニューの両方が保存対象として表示されることがあります。両方にチェックが入っているかを確認してから保存してください。
クラシックテーマの場合
クラシックテーマでは、メニューは従来どおり「外観」→「メニュー」で作り、テーマが用意した表示位置(メニューの位置)に割り当てます。ナビゲーションブロックはブロックウィジェットのエリアなどに置けますが、テーマのヘッダーメニューを置き換えるものではありません。この記事の内容は、主にブロックテーマを前提にしています。
メニューがない状態での表示(固定ページ一覧)
ナビゲーションブロックでメニューを選んでいない場合、既存のメニューがあればそれが自動で使われることがあり、メニューを一つも作っていない状態では、公開済みの固定ページが自動で一覧表示されます。これは「固定ページリスト」というブロックによる仮の表示で、固定ページを追加すると自動的に項目も増えます。
手軽な反面、プライバシーポリシーやサンクスページなど、メニューに出したくないページまで並びます。表示する項目を選びたい場合は、固定ページリストを選んだ状態で「編集」などのボタンから通常のリンクに変換するか、新しくメニューを作って項目を自分で追加します。
メニューを作成・選択する
新しいメニューを作る
ナビゲーションブロックを選び、設定サイドバーの「メニュー」欄にある「︙」などのボタンを開くと、既存のメニューの一覧と、新しいメニューを作成する項目が表示されます。新しいメニューを作成すると空のメニューに切り替わるので、ブロック内の「+」から項目を追加します。
追加できる主な項目は次のとおりです。
- 固定ページ・投稿へのリンク: 検索欄にページ名を入れて選びます。
- カスタムリンク: 外部サイトや特定のURLを入力します。
- カテゴリーなどへのリンク: カテゴリーアーカイブへのリンクを置けます。
- その他のブロック: 検索・ソーシャルアイコン・サイトロゴなど、ナビゲーション内で使えるブロックもあります。
項目の順番は、リスト表示やツールバーの矢印で入れ替えます。表示名は項目を選んで直接書き換えられます。
既存のメニューに切り替える
「メニュー」欄の一覧から別のメニューを選ぶと、ブロックの表示がそのメニューに切り替わります。ヘッダーとフッターで別のメニューを使う、といった使い分けができます。
メニューをまとめて管理する
「外観」→「エディター」の「ナビゲーション」から、保存されているメニューの一覧を開けます。ここでメニュー名の変更、中身の編集、不要なメニューの削除ができます。削除したメニューを表示していたブロックは、メニューを選び直す必要があります。
サブメニュー(ドロップダウン)を作る
メニュー項目の下に子項目を並べるには、親にしたい項目を選び、ツールバーの「サブメニューを追加」を押します。その下に新しい項目を追加すると、マウスを乗せたときやクリックしたときに開くドロップダウンになります。
ナビゲーションブロック本体の設定サイドバーには、サブメニューの動作に関する項目があります。
- クリックでサブメニューを開く: マウスを乗せただけでは開かず、クリックで開くようにします。タッチ操作の端末では、こちらのほうが操作しやすくなります。
- サブメニューのアイコンを表示: 子項目がある親項目に、矢印の印を出します。
サブメニューの文字色・背景色は、スタイルタブの色の設定で通常のメニューとは別に指定できます。
スマホ表示とオーバーレイメニュー
画面幅が狭い端末では、メニューをハンバーガーアイコンにまとめ、タップすると全画面で開く「オーバーレイメニュー」を使えます。設定サイドバーの「オーバーレイメニュー」で次の3つから選びます。
- モバイル: 画面幅が狭いときだけアイコン表示にし、広い画面では通常どおり横に並べます。多くの場合はこれを選びます。
- 常時: パソコンでも常にアイコン表示にします。メニュー項目が多いサイトや、すっきりしたデザインにしたい場合に使います。
- オフ: アイコン表示にしません。項目が少ない場合以外は、スマホで折り返して崩れやすくなります。
アイコンの形(2本線・3本線など)や、アイコンの代わりに「メニュー」という文字を出すかどうかも設定できます。オーバーレイの文字色・背景色もスタイルタブの色の設定で変えられます。編集画面でパソコン表示のまま作業していると違いが分からないので、プレビューの表示幅をモバイルに切り替えて確認してください。
クラシックメニューを取り込む
クラシックテーマからブロックテーマに切り替えた場合、「外観」→「メニュー」で作っていたメニューは自動ではナビゲーションブロックに表示されません。ナビゲーションブロックの「メニュー」欄の一覧に、クラシックメニューを取り込む項目が表示されるので、そこから元のメニューを選びます。
取り込むと、元のメニューをもとに新しいナビゲーションメニューが作られます。元のクラシックメニューは残りますが、以後の編集はナビゲーションメニュー側で行います。両方を編集すると内容がずれていくので、取り込んだあとはどちらで管理するかを決めておきます。
よくあるトラブルと対処
テーマを変えたらメニューが消えた
テーマを切り替えると、新しいテーマのヘッダーに入っているナビゲーションブロックが表示されます。このブロックは以前のテーマで選んでいたメニューを指しているとは限らず、自動で選ばれた別のメニューや固定ページ一覧が表示されて、「メニューが消えた」ように見えることがあります。
作ったナビゲーションメニュー自体はデータベースに残っています。新しいテーマのヘッダーでナビゲーションブロックを選び、「メニュー」欄の一覧から以前のメニューを選び直してください。クラシックテーマから切り替えた場合は、前の章の取り込みを使います。テーマ変更の前には、バックアップを取っておくと安心です。
メニューを編集したら別の場所も変わった
同じナビゲーションメニューを複数の場所で表示しているためです。場所ごとに内容を変えたい場合は、新しいメニューを作成して、片方のブロックでそちらを選びます。
同じ名前のメニューがいくつもある
ブロックを置くたびに新規作成をしていると、似た名前のメニューが増えます。「外観」→「エディター」の「ナビゲーション」で一覧を確認し、使っていないものを整理します。削除する前に、そのメニューを表示しているブロックがないかを確認してください。
スマホでメニューが開かない・崩れる
オーバーレイメニューの設定が「オフ」になっていないか、テーマやプラグインのCSS・JavaScriptが干渉していないかを確認します。キャッシュや最適化系のプラグインでJavaScriptをまとめたり遅延読み込みしたりしている場合、メニューの開閉が動かなくなることがあります。一時的にその機能を止めて動作を比べると、原因を切り分けやすくなります。
まとめ
- ナビゲーションブロックは表示の枠で、メニューの中身はナビゲーションメニュー(wp_navigation)として別に保存されます。
- メニューがない状態では固定ページ一覧が仮に表示されるので、必要に応じてメニューを作成して項目を選びます。
- サブメニューは「サブメニューを追加」で作り、クリックで開くかどうかやアイコン表示を設定できます。
- スマホ表示はオーバーレイメニューの「モバイル」「常時」「オフ」で切り替え、プレビュー幅を変えて確認します。
- テーマ変更後にメニューが消えたら、メニュー自体は残っているので選び直すか、クラシックメニューを取り込みます。