WordPressナビゲーションブロック攻略|UIの変化に惑わされない「考え方」の基本

WordPressが「ブロックテーマ」へと進化し、最も大きく使い勝手が変わったのがナビゲーション(メニュー作成)です。

2022年の登場以来、ボタンの名称や設定パネルの場所は何度も変わりました。「ネットで調べた手順通りにいかない!」と、ここでWordPressを嫌いになりそうになった方も多いはず。

しかし、実は「できること」の本質はずっと変わっていません。

この記事では、細かな操作手順(UI)に振り回されるのではなく、ナビゲーションブロックの「仕組み」と「攻略の考え方」を解説します。一度この基本を理解してしまえば、今後のアップデートでボタンの場所が変わっても、迷うことはなくなります。

ナビゲーションブロックは「中身が入れ替わる箱」と考える

AD – 読み進める前のひとやすみ

まず、従来のメニュー管理(外観 > メニュー)との最大の違いを理解しましょう。

昔のメニューは「一度作ったら固定されるリスト」でしたが、ナビゲーションブロックは「リンクやアイコンを自由に詰め込める、箱」です。

  • 箱(親): メニュー全体の配置、色、スマホでの見え方を決める。
  • 中身(子): ページへのリンク、カテゴリー、検索窓、SNSアイコンなど。

まず自分が「箱」を触っているのか、「中身」を触っているのかを意識するだけで、解決の糸口が見えてきます。

ナビゲーションブロック攻略の鍵は「リストビュー」にあり


【最新版】リストビューを開かなくてもOK
最近のWordPressでは、ナビゲーションブロックを選択した状態で右側の設定パネルを見てみてください。設定(歯車)の隣に「リストビューのアイコン」のタブがありますよね?

わざわざ画面全体のリストビューを開かなくても、このナビゲーションブロックの中身だけをシュッと並び替えることができます。

メニュー選択:2つの組み立てルート

AD – 読み進める前のひとやすみ

A. ゼロから作る(新規メニュー作成)

「+」ボタンで中身を1つずつ追加する

  • 内容:真っ白な箱(ナビゲーションブロック)の中に、自分が必要なリンクだけを「+」ボタンで1つずつ放り込んでいく方法です。
  • ポイント:詳しくは、「リスト」と「リンク」の違いを参照して下さい

B.既存を使う(メニューを再利用)

以前作ったメニューから選ぶ(クラシックメニューもOK)

  • 内容:すでに作成済みのメニューや、以前のテーマ(クラシックテーマ)で使っていたメニューを読み込んで再利用する方法です。
  • ポイント:設定パネルの「メニューを選択」や「インポート」から呼び出せます。一から作る手間が省けますが、「中身を編集すると、同じメニューを使っている他の場所も変わる」という同期の仕組みには注意が必要です。

⚠️ B. 既存を使う場合の注意点
「見た目(色や配置)」は場所ごとに設定できますが、「中身(リンクのリスト)」は同期されます。
要するに、「フッターのメニューだけ、お問い合わせリンクを消したい」と思って編集画面でポチッと消すと、ヘッダーからもお問い合わせが消えてしまいます。
もし別々にしたい場合は、「新規メニュー作成」で、フッター専用の別のメニューを新しく作る必要があります。

🔍 登録済みメニューを確認・管理する3つの方法

  • 王道: 管理画面の [外観] > [エディター] > [ナビゲーション] から一覧を確認できます。
  • 最短: ナビゲーションブロックを選択し、右側パネルの [メニューを管理] をクリックします。
  • 裏ワザ: 整理・削除をまとめて行いたい時は、以下のURLへ直接アクセスするのが最もスムーズです。
    あなたのサイトURL/wp-admin/edit.php?post_type=wp_navigation

「リスト」と「リンク」の違い

AD – 読み進める前のひとやすみ

「固定ページリスト

  • できること:新しく固定ページを作って公開すると、設定をいじらなくても勝手にメニューに名前が増えます。(全自動同期)
  • できないこと:そのままの状態では、「このページだけ非表示にしたい」「順番を逆にしたい」といった個別のワガママが通りません。

2つの選択肢

  • 「全自動」のままいくルート
    「固定ページが増えたら自動でメニューに載ってほしい。順番も公開順で構わない」という、管理を楽にしたい人向け。
  • 「リンクに変換」して自由を手に入れるルート
    「一気に並んだのはいいけど、やっぱり順番を変えたいし、いらないページも消したい」という人向け。この場合:ツールバーの「編集(または変換)」ボタンを押すことで、「一塊のリスト」から「バラバラのリンク」に解体できます。

「個別のリンク

特定のページ、特定のカテゴリー、特定の記事を1つずつ選んで置くパターンです。

追加できるもの例

  • カスタムリンク(外部サイトやSNSなど)
  • カテゴリー(選んだものだけ)
  • タグ(選んだものだけ)
  • 特定の投稿(渾身の1記事など)

「ゼロから」始めれば、「必要なものだけを、好きな順番で並べる」ことができます。

📂 メニューをスッキリ整理!「サブメニュー」の作り方

項目が増えてきたら、マウスを乗せた時にシュッと下に広がる「階層構造(ドロップダウン)」を活用しましょう。

  • 親を作る: メインで見せたい項目(例:ブログ)を選択します。
  • 子を追加: ツールバーにある「サブメニューを追加」をクリック。
  • 入れ子にする: その下に現れる入力欄に、カテゴリーなどのリンクを追加します。

⚠️ 攻略ポイント: 階層を深くしすぎるとスマホで操作しにくくなります。「親 > 子」の2階層までに留めるのが、読者に優しいサイト設計のコツです!

スマホ表示(オーバーレイ)の正体

AD – 読み進める前のひとやすみ

「ハンバーガーメニュー(三本線)」の設定も、仕組みはシンプルです。

  • 常時:画面サイズに関わらず、最初から三本線にする。
  • モバイル:スマホの時だけ三本線だけにする(これが一般的)。
  • オフ:どんな時もメニューを隠さない。

「オーバーレイ」という言葉が出てきたら、それは「三本線を押した時に、画面を覆うように出てくるメニュー」のことだと覚えておけばOKです。

コラム:「メニュー選択」はどこ? WordPressのバージョンによる進化

AD – 読み進める前のひとやすみ

お使いの環境によって、設定の場所が少し異なる場合があります。

▼ 最新版(現在の主流) 画面右側の「設定パネル(サイドバー)」でメニューを選択・管理するスタイル。
▼ 少し前のバージョン ブロックを追加した直後、エディターの中に直接「メニューを選択」「空から始める」といったボタンが表示されるスタイル。

エディターの中になかったら、画面右上の設定パネルを確認してみてください。

現在の主流
少し前のバージョン

最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵

スポンサーリンク