Hara Daizo WordPressのメニューは、使用中のテーマによって編集画面が異なります。外観に「エディター」があるブロックテーマではナビゲーションブロックを使い、対応するクラシックテーマでは「外観」→「メニュー」で作成します。
作ったのに表示されない場合は、保存だけでなく、ヘッダーなどの表示位置へ割り当てられているかが重要です。この記事では、方式の見分け方から階層、スマホ表示、トラブルの確認まで説明します。
WordPressのメニュー（ナビゲーション）とは
WordPressのメニューは、訪問者を主要ページへ案内するリンクのまとまりです。サイト上部のグローバルメニュー、下部のフッターメニュー、スマホで開くナビゲーションなどがあります。
固定ページだけでなく、投稿、カテゴリー、カスタムURLも項目にできます。ただし、追加できることと追加すべきことは別です。主要な目的へ迷わず進める数に絞り、補助リンクはフッターへ分けます。
編集前には、次のように役割を決めます。
- グローバル：主要サービス、会社情報、問い合わせなど
- フッター：規約、プライバシー、補助案内など
- スマホ：狭い画面でも優先する項目
- ログイン後：会員機能など、権限に応じた導線
WordPressメニューの編集方式を確認する
「外観」メニューを開き、エディターとメニューのどちらがあるかを確認します。
| 管理画面・テーマ | 編集方法 | 主な保存対象 |
|---|---|---|
| 外観にエディターがある | サイトエディターのナビゲーションブロック | ナビゲーションとテンプレートパーツ |
| 外観にメニューがある | クラシックメニュー画面 | メニュー構造と表示位置 |
| テーマ独自の設定がある | テーマのヘッダー・モバイル設定 | テーマ固有の配置や表示 |
ブロックテーマでも、移行した旧メニューが残ることがあります。実際にヘッダー内のナビゲーションブロックがどのメニューを参照しているかまで確認してください。ロゴやボタンを含む上部全体を変える場合は「ヘッダーのカスタマイズ」で扱いを分けます。
変更前に現在の項目、順番、URLを控え、下書きページへリンクしていないかを確認します。
クラシックテーマでメニューを作成する方法
クラシックテーマで「外観」→「メニュー」がある場合は、次の手順で作成します。
- 「外観」→「メニュー」を開く
- 新しいメニューを作成し、用途が分かる管理名を付ける
- 左側から固定ページ、カテゴリー、カスタムリンクなどを追加する
- 項目名とリンク先を確認する
- 表示位置を選ぶ
- メニューを保存する
項目に出ない投稿タイプは、右上の「表示オプション」でパネルが非表示になっていないか確認します。リンクテキストはページタイトルと別に変更できますが、訪問者が移動先を予測できる短い表現にします。
外部サイトを新しいタブで開く設定は、必要な場合だけ使います。画面遷移が変わることを利用者へ分かるようにし、内部ページは通常の同一タブを基本にします。
ブロックテーマでナビゲーションを編集する方法
ブロックテーマでは「外観」→「エディター」を開き、Navigationまたはヘッダーのテンプレートパーツからナビゲーションブロックを選びます。WordPress公式では、既存メニューの選択、新規作成、項目追加、並べ替えをブロック設定やリストビューで行えます。
編集の流れは次のとおりです。
- サイトエディターで対象のヘッダーを開く
- リストビューからナビゲーションブロックを選ぶ
- 使用中のメニュー名を確認する
- ページリンクやカスタムリンクを追加する
- ドラッグまたは移動操作で順番を整える
- 保存画面でナビゲーションとテンプレートパーツの変更を確認する
初めて追加したナビゲーションブロックにページリストが入っている場合、そのままでは公開ページが自動的に並ぶ構成です。固定したメニューとして編集するには、設定から編集可能なページリンクへ変換します。
新規ページを項目追加と同時に公開できる画面もあります。空のページを誤って公開しないよう、内容を先に作るか、公開状態を直後に確認してください。
メニューの表示位置を設定する
クラシックテーマの表示位置は、テーマが登録しているロケーションです。Primary、Header、Footerなど名称はテーマごとに異なります。メニューを保存しただけでは、位置が未指定のため表示されないことがあります。
ブロックテーマでは、ロケーションへ割り当てるより、テンプレートパーツの中にナビゲーションブロックを配置し、そのブロックが特定のメニューを参照します。複数のヘッダーテンプレートがある場合、実際のページが使うパーツを編集します。
表示確認ではトップページだけでなく、投稿、固定ページ、アーカイブ、404ページも開きます。ページ種別ごとに別テンプレートを使っているサイトでは、一部だけ古いメニューが残ることがあります。
メニューを階層化・並べ替えする
子項目を親項目の内側へ移すと、サブメニューを作れます。クラシック画面では少し右へインデントし、ナビゲーションブロックではサブメニューブロックの中へ入れます。
階層は深くしすぎないことが重要です。マウスのホバーだけに依存せず、キーボード操作とタッチ操作でも子項目を開けるか確認します。親項目をクリックできるリンクにするか、開閉専用にするかはテーマの実装で異なります。
並べ替え後は、同じ名前の項目、リンク切れ、公開終了ページを点検します。カテゴリーと固定ページが同名だと移動先を判別しにくいため、ラベルを具体化してください。
ハンバーガーメニューを設定する
ハンバーガーメニューは、三本線などのボタンを押してナビゲーションを開くスマホ向け表示です。開閉方法、切り替わる幅、背景、アニメーションはテーマやナビゲーションブロックの設定に依存します。
WordPressのナビゲーションブロックには、メニューアイコンを小さい画面だけ、常時、または表示しない設定があります。小さい画面でアイコンを押すとオーバーレイとしてメニューを開くのが標準的な動作です。
確認項目は次のとおりです。
- 開くボタンに分かる名前がある
- キーボードでも開閉できる
- 開いた後に閉じられる
- 長い項目が画面外へ切れない
- 背景と文字のコントラストが十分にある
- 固定ヘッダーや管理バーと重ならない
テーマ独自のモバイルメニューを使う場合、ブロック側の開閉と二重にならないよう、どちらか一方へそろえます。
画面幅ごとの優先順位や他要素の崩れも含めて確認する場合は「スマホ表示の最適化」で整理できます。
メニューのデザインを調整する
デザインは、テーマ設定、ブロック設定、追加CSSの順で調整します。ナビゲーションブロックでは、配置、方向、色、文字、項目間隔など、テーマが対応する設定を利用できます。
文字を小さくして無理に一列へ詰めるより、項目を減らす、優先度の低い導線を別の場所へ移す、適切な幅でモバイル表示へ切り替える方法が読みやすくなります。
CSSを追加する場合は、メニュー全体へ効く汎用的なクラス名を避け、対象ブロックやヘッダーへ追加したクラスで範囲を限定します。ホバーだけでなくfocus-visibleの見え方も確認してください。
メニューが表示されない・反映されない場合
次の順で切り分けます。
- 編集したメニュー名が表示中のものと一致するか確認する
- クラシックテーマでは表示位置の割り当てを確認する
- ブロックテーマでは使用中のヘッダーパーツを確認する
- 保存時にナビゲーションとテンプレートパーツを選択したか確認する
- ログアウト状態でキャッシュを消して確認する
- CSSで非表示や画面外になっていないか調べる
特定の権限でだけ項目が見える場合は、会員プラグインや条件表示も確認します。リンクを追加したページが下書きなら、公開状態の利用者からはアクセスできません。
よくある質問
はい。クラシック画面ではカテゴリーのパネルから、ブロックテーマではリンク追加の検索から選べます。カテゴリー一覧に記事がなくても公開URLは存在する場合があるため、移動後の内容も確認してください。
テーマやブロックの機能によって可能ですが、開閉ボタンとしての名前、キーボード操作、フォーカスの移動を確認します。URLに記号だけを入れる方法は予期しない遷移やアクセシビリティ低下を招くため避けます。
テーマが別ロケーションや表示条件を備えていれば可能です。内容差が大きいと更新漏れが増えるため、まず同じナビゲーションをレスポンシブ表示できないか検討してください。
まとめ
WordPressメニューは、ブロックテーマならナビゲーションブロック、クラシックテーマなら外観のメニュー画面を使います。作成後は、表示中のメニューとヘッダー位置が結び付いているかを確認します。
項目は主要導線に絞り、階層を浅く保ちます。最後にPC、スマホ、キーボード操作で開閉とリンク先を確認すれば、表示位置の設定漏れやハンバーガーメニューの操作不良を発見しやすくなります。