WordPress 7.0の「ナビゲーションオーバーレイ」とは？ できることと使い方を解説します

スマートフォンでWebサイトを見ると、画面の上部に「≡」のようなメニューボタンが表示されることがあります。

このボタンを押したときに開くメニュー画面を、もっと自由にデザインできるようにしたのが、WordPress 7.0の「カスタマイズ可能なナビゲーションオーバーレイ」です。

メニューのリンクだけでなく、ロゴや検索欄、お問い合わせボタンなどを組み合わせて、サイトに合った案内画面を作れるようになりました。この記事では、従来との違いから基本的な使い方まで、初心者向けに説明します。

ナビゲーションオーバーレイとは？

「ナビゲーション」は、読者を目的のページへ案内するためのメニューを指します。「オーバーレイ」は、元の画面の上に別の画面を重ねて表示することです。

つまり、ナビゲーションオーバーレイとは、メニューボタンを押すと、閲覧中のページの上に重なって表示されるメニュー画面のことです。

読者はメニューから行き先を選んだり、「閉じる」ボタン（「×」アイコンなど）で元のページに戻ったりできます。

なお、この表示方法自体は、WordPress 7.0より前から存在していました。7.0で新しくなったのは、開いたメニュー画面の中身を、ブロックで組み立てられるようになったことです。

従来のメニューと何が違う？

従来の標準オーバーレイは、メニュー項目を表示するための決まった構成が基本でした。サイトの雰囲気に合わせて、画面全体の配置や内容を変更するには制約がありました。

7.0では、サイトエディターでブロックやパターンを使ってデザインできます。パターンとは、複数のブロックを組み合わせた、ひな型のようなものです。専用の閉じるボタンも配置できます。

比較ポイント	従来のオーバーレイ	カスタムオーバーレイ
画面の構成	標準のメニュー表示が基本	ブロックを組み合わせて作成
メニュー以外の内容	自由な追加には制約がある	ロゴ・画像・検索欄などを配置できる
レイアウト	標準の構成をもとに調整	パターンなどを使って構成できる
閉じるボタン	標準の配置が基本	専用ブロックで位置や見た目を調整できる

例えば、通常のヘッダーには短いメニューだけを表示し、メニューボタンを押した画面には、検索欄や詳しい案内をまとめる構成が考えられます。

どのような使い方ができる？

ブログのカテゴリーや検索欄をまとめる

記事数が多いブログでは、カテゴリーへのリンクと検索欄を並べると、読者が目的の記事を探す手がかりになります。

構成例としては、次のような形です。

• サイトロゴ
• ホーム・カテゴリー・プロフィールへのリンク
• 記事を探す検索欄
• SNSへのリンク

お問い合わせや予約への案内を加える

店舗や事業のサイトなら、通常のメニューに加えて「お問い合わせ」「予約する」などのボタンを配置する使い方も考えられます。公式の案内でも、画像やロゴ、行動を促すボタンなどを組み込む用途が紹介されています。

ただし、情報を増やしすぎると、目的のリンクを見つけにくくなることもあります。まずは主要なメニューを分かりやすく配置し、必要な要素を少しずつ追加するとよいでしょう。

基本的な設定方法

ここでは、サイトエディターを利用できるブロックテーマでの基本的な流れを紹介します。

ブロックテーマとは、ヘッダーやフッターなども、ブロックを使って編集できるテーマのことです。

1．ナビゲーションブロックを選択する

管理画面の「外観」→「エディター」から、ヘッダーなどの編集画面を開きます。

続いて、メニュー全体を管理する「ナビゲーション」ブロックを選択します。個別のリンクを選んでしまう場合は、リストビューから探すと選びやすくなります。

2．オーバーレイを作成する

設定サイドバーのオーバーレイ関連の項目から、新しいオーバーレイを作成します。

すでに作成済みのものや、テーマが用意しているものがあれば、それを選ぶこともできます。

3．ブロックを配置して保存する

開いた編集画面で、メニューやロゴなどを配置します。用意されたデザインを出発点にして調整する方法もあります。

編集が終わったら保存し、公開側のページでメニューボタンを押して、表示を確認しましょう。

スマートフォンだけで使う機能なの？

オーバーレイの表示条件（オーバーレイの可視性）には、次の選択肢があります。

設定	動作
オフ	メニューを折りたたまず、項目を表示する
モバイル	小さい画面ではメニューボタンに切り替える
常時	画面の大きさにかかわらず、メニューボタンを表示する

「常時」を選べば、パソコンでもボタンを押してメニューを開く構成にできます。スマートフォン専用というわけではありません。

使う前に知っておきたい注意点

更新しただけで既存のメニューが変わるわけではない

カスタムオーバーレイは、利用者が作成・選択するか、テーマ側であらかじめ指定することで使われます。

WordPress 7.0へ更新しただけで、既存のメニュー画面が自動的に新しいデザインへ置き換わるわけではありません。

7.0の初期実装は全画面表示

7.0で導入されたカスタムオーバーレイは、画面全体に表示される形式です。

画面の端から細いパネルだけが出てくるような形式は、初期実装の標準機能では対応していません。

作成したデザインはテーマにひも付く

オーバーレイは「テンプレートパーツ」として管理されます。これは、ヘッダーやフッターのように、サイト内で繰り返し使う部品のことです。

7.0の実装では有効なテーマにひも付くため、テーマ変更先にも自動的に引き継がれるとは限りません。

テーマ独自のメニューとは区別する

今回の機能は、WordPress標準の「ナビゲーション」ブロックに対する拡張です。

テーマが独自に提供するスマートフォン用メニューについては、WordPress本体の更新だけで同じ編集機能が使えるとは限りません。まずは、自分のサイトが標準のナビゲーションブロックを使っているかを確認しましょう。

まとめ

WordPress 7.0のナビゲーションオーバーレイでは、メニューボタンを押したときの画面を、ブロックでデザインできるようになりました。

リンクの一覧にロゴや検索欄などを組み合わせることで、サイトに合った案内画面を作れます。

初めて使う場合は、主要なメニューと閉じるボタンを中心にした、シンプルな構成から試してみましょう。実際のスマートフォンでも、文字の読みやすさやボタンの押しやすさを確認すると、読者に使ってもらいやすいメニューに近づけられます。