【ブロックテーマ】ナビゲーションブロックで効率よくメニューを作成する方法
ブロックテーマでは、ナビゲーションブロックを使ってメニューを設定する仕様となりました。
レイアウト的に自由度が増えたのはよいことですが、このナビゲーションブロック、『従来のメニュー設定に比べるとメニュー項目の追加が面倒』と感じるのは私だけでしょうか？
本記事では、ナビゲーションブロックで効率よく固定ページをメニューに追加する方法を紹介します。といってもメチャメチャ簡単で、手順は次の通りです。
- 固定ページに順序と親子関係（階層化）を設定しておく
- ナビゲーションブロックに固定ページリストブロックを挿入
- 必要に応じてリンクへ変換して編集する
本記事では、ナビゲーションブロックでメニューの追加する基本操作を紹介したあと、上記の手順について説明します。すでに基本操作は知ってる、という方は、目次のサイト構造を含めて効率よくメニューを追加する手順
からご覧ください。
ブロックテーマそのものをよく知らない、という方はこちらの記事も合わせてご確認ください。
https://web-children.com/2023/01/11/comparison-between-block...今回設定するナビゲーションのサイトマップ
Sweets Timeという架空のカフェサイトをイメージしたサイトマップです。
トップページ含めて9ページの固定ページで構成されており、ConceptページとMenuページにはそれぞれサブメニューがついた階層構造となっています。
ダッシュボード内の固定ページの一覧は次の通りです。9個の固定ページが作成順に並んでいます。
ナビゲーションブロックにメニューを設定する手順（基本編）
ナビゲーションブロックでメニュー項目を追加する基本的な手順を確認しておきましょう。以下はテーマTT3をモデルにしていますが、どのブロックテーマでも手順は同じです。
準備として次の手順でナビゲーションブロックを選択した状態とします。
①ダッシュボードの外観＞エディター でサイトエディターを開く。
②ヘッダーの中のナビゲーションブロックを選択
メニューの追加
①ナビゲーションブロック近傍の+マークをクリック
②開いてWindowの検索欄へ入力してページを検索してクリック（または最近更新した一覧から選択）
例えば、固定ページの”トップ”をメニューに追加するには次の通りです。
①検索欄に”トップ”と入力
②表示されたページを選択
以上で、固定ページ”トップ”がメニューの１つ目に登録されました。さらに２つ目以降のメニューを追加するには、ナビゲーションブロック近傍の+マークから同じ手順を繰り返せばOKです。
サブメニューの追加
２つ目に追加したメニュー”Sweets Timeのコンセプト”にサイトマップ通りサブメニューをつけます。
手順は以下の通りです。
①ツールバーにあるサブメニューボタンをクリック
②新たに現れた+マークをクリック
③ページを検索してクリックまたは最近更新ページから選択
以上の手順を繰り返してメニューを設定していくわけですが、正直面倒ですね。
2023年3月リリースのワードプレスversion6.2から、ナビゲーションの編集は設定サイドバー内でできるようになり、若干操作性は向上しました。
サイト構造を含めて効率よくメニューを追加する手順
サイトを構成する固定ページが多い場合は、次のような手順が便利です。
- 固定ページに順序と親子関係（階層化）を設定しておく
- ナビゲーションブロックに固定ページリストブロックを挿入
- 必要に応じてリンクへ変換して編集する
１．準備として固定ページの順序と階層化をしておく
固定ページに順序と階層をあらかじめ設定しておきます。そうすることで、固定ページ一覧表の並びが見やすく整理されるだけでなく、後ほどナビゲーションにも反映されます。順序化と階層化する具体的な手順についてはこちらの記事で詳しく紹介しているので参考にしてください。
すでに作成済の固定ページのページ順序と階層だけを指定するのであれば、通常の編集よりもクイック編集が手軽で便利です。
固定ページの各ページの順序と階層を適切に設定すれば、次のように固定ページ一覧に反映されます。トップページから順番に、サイトマップ通り並ばせることが可能です。
ナビゲーションブロックに固定ページリストを追加
ここでま準備ができたら、再びサイトエディターを開けます。
ナビゲーションブロックに固定ページリストブロックを設置すれば、固定ページの順序と階層化（サブメニュー化）が自動的に反映されます。
リスト表示では”固定ページリスト”、と記述されているだけでなのでわかりにくいですが、保存（更新）して実際にサイトを確認するとわかります。また、次のようにリンクへ変換するとリスト表示でも確認できます。
編集の必要があればリンクへ変換する
さらに後から固定ページ以外のページを追加したり、不要な固定ページを削除するなど、メニュー項目を編集する場合は次のようにリンクへ変換すれば編集可能となります。
①固定ページリストブロックのツールバーで”編集”をクリック
②リンクへ変換画面で”変換”をクリック
リンクへ変換後は次の通りです。リスト表示を見てわかる通り、固定ページリストが別々の各メニュー項目に変換されたのがわかります。固定ページ一覧ページの順序と階層が反映されているのがわかりますね。
これで各メニュー項目ごとに削除や追加・順番変更など個別に編集可能となります。
まとめ
もう一度手順概要を書いておきます。
- 固定ページに順序と親子関係（階層化）を設定しておく
- ナビゲーションブロックに固定ページリストブロックを挿入
- 必要に応じてリンクへ変換して編集する
サイト設計さえある程度固まっておれば、この方法で効率よくナビゲーションを設定できるのではないでしょうか？
とはいえ、まだまだナビゲーションブロックそのものの基本操作も、もっと改善されていくことを期待したいと思います。
