「ナビゲーションメニューってどこで作るの?クラシックテーマのときと全然違う…」
ブロックテーマを使い始めて、こんな疑問を持ちませんでしたか?
クラシックテーマでは「外観」→「メニュー」から設定するのが一般的でした。実はブロックテーマでは、サイトエディターからナビゲーションブロックを使って作成・編集します。サイトエディターとは!?
そうです!前回もテンプレートを編集したときに、管理画面から入ったブロックテーマのデザインが変更できる魔法の場所です♪テンプレートの記事はこちら↓
最初は戸惑うかもしれませんが、慣れるととても直感的に操作できます。実際に手を動かしながら一緒に進めていきましょう!
環境
- WordPressバージョン:Wordpres7.02
- 使用テーマ:X-T9
※ブロックテーマであれば他のテーマでも基本的な手順は同じです。
ナビゲーションメニューを追加する手順
STEP1_まずはヘッダーのテンプレートパーツがどうなっているか見てみよう!
①テーマのX-T9の場合は、もともとヘッダーというテンプレートパーツ(パターンみたいなもの)があるので、それを確認します。私のはすでにメニューが入っています。ここではこのヘッダーテンプレートパーツがある前提で解説します。WordPress管理画面の外観からエディター→パターン→テンプレートパーツに入り、ヘッダーをクリックして確認します。

②私の場合、もうすでにナビゲーションメニューを追加しているので、下の画像のようになっています。

③ それではナビゲーションのメニューを追加していきます。
WordPress管理画面の外観→エディター→ナビゲーションをクリックして編集画面に入ります

④ ナビゲーションの右上の3点から編集画面に入ることができますよ

⑤ +ボタンを使ってメニュー項目を増やしていきます。あらかじめ固定ページを作成してからメニューに登録する方法を、迷いにくいためおススメします。作成済みの固定ページがあればリストに表示されるので、そこから選択しましょう。(このやり方が一番スムーズです)
右側の設定ーコンテンツーテキストからメニューを好きなタイトルに変更できます。
例えば、ここに追加で「ナビゲーションメニュー」と入れたいとします。

⑥ +ボタンをクリックして、下図にある「ナビゲーションメニュー」を追加してみましょう。未作成のページであっても、このようにメニューを先に用意してから固定ページを後で作ることが可能です。それでは、「ページを作成」から新しいページを準備していきます。


「ナビゲーションメニュー」という名称のメニューを新たに作成します。「ページを作成」をクリックすると、ここから新しい固定ページが生成され、リンクも自動的に追加されます。
⑦ 編集内容を確定させるために「保存」ボタンをクリックしてください。(システムの反映状況や特定の条件下では、設定を有効にするために2回保存の操作を繰り返さないといけない場合があります。)
STEP2_固定ページを確認してみる。ついでにサブメニューの作り方も解説!
①作成できた固定ページを見てみます

「ナビゲーションメニュー」という名称のページが作成されています。「公開済み」を選択しているため現在は公開中ですが、チェックを入れなければ下書きとして保存されます。メニューの追加作業後、ナビゲーションの編集画面を通じて固定ページが生成されました。
②既に作成済みのページであれば、メインメニューの下層へドラッグするだけでサブメニュー化できます。私はあらかじめ固定ページを用意しておくスタイルなので、ドラッグ操作のみで設定が完了しました。以前は全ての項目をメインメニューに並べていましたが、長くなりすぎるため、サイトマップやプライバシーポリシーはサブメニューへ移動させました。
別のやり方として、親メニューを選び「+」からブロックを追加する手順があります。サブメニューというブロックを挿入しますが、自動的に下層へは入らないため、後からドラッグして移動させる必要があります。
メニューの項目数は5〜6個程度に留めると、見やすくなります。新しく追加する際は、先ほどのメインメニュー作成時と同じ手順でページを作成してください。次に、それらをドラッグしてサブメニューへと設定します。なお、今回は「OTHERS」というメニューを設けましたが、これはサブメニューをまとめるための受け皿として作成したため、この項目自体にはリンクが飛ばないよう(「#」を入力)設定しました。

③下の画像は、実際のサイト画面のナビメニューとサブメニューです。
OTHERSの下にSITE MAPとPRIVACY POLICYのページが入っています。マウスでホバーすると下にサブメニューが出現する仕組みになっています。↓

④メニューを削除したい場合は、削除したいメニューを選んで右の3点マークをクリックして一番下の削除で消すことができます。

おまけ
※ リンクの変更の仕方
リンクを変更したいときもあると思います。例えば、メニューを追加して、他のサイトのリンクを貼りたい場合などは、右の設定画面のリンクをクリックしてから、貼りたいURLを入力します。

まとめ
X-T9のナビゲーションメニューはサイトエディターのナビゲーションブロックで作成・追加・編集できます。
- ゼロからのメニュー作成はヘッダーテンプレートにナビゲーションブロックを追加
- 項目の追加・削除・並び替えはブロックを選択した状態で操作(メニューの順番は、ドラッグで入れ替えられる)
- サブメニューは親メニュー項目から追加できるし、ドラッグで下に入れると簡単にサブメニューになる!
次の記事では、このナビゲーションメニューの配色をサイトエディターで変更する方法を解説します!
