トピック
ナビゲーションブロックは、WordPress 5.9で追加された高度なブロックで、サイトのナビゲーションメニューを構造とデザインの両面から編集できます。ナビゲーションブロックは、ブロックテーマやテンプレート編集に対応したテーマで使用できます。
ナビゲーションブロックを追加するには、「ブロックを追加」ボタンをクリックし、ナビゲーションブロックを選択します。また、新しい段落ブロックに「/navigation」と入力して Enter キーを押しても、すぐに追加できます。
ブロックを追加する詳細な方法についてはこちらをご覧ください。
ブロックの構成
ナビゲーションブロックにリンクを追加する方法は、大きく分けて3つあります。
- 既存のメニューを選択する。サイトに既に作成されているメニューを選択できます。
- すべての固定ページを追加する。サイト内のすべてのページを追加し、編集や並べ替えできます。
- 空白で作成する。空白のメニューが作成されます。好きななページやリンクを追加できます。
既存のメニューの選択
ナビゲーションブロックで作成したメニューや以前のテーマのメニューがある場合、ナビゲーションブロックの設定で、これらを選択して使用できます。ナビゲーションブロックを追加して、「メニューの選択」を選択すると、作成したすべてのメニューが表示されます。クラシックテーマのメニューも含め、選択して使用できます。
すべてのページを追加する
このオプションを選択すると、サイト上のすべてのページが自動的にナビゲーションブロックに追加され、そこから自由にカスタマイズできます。ページ数によっては、メニュー作成の効率化に役立ちます。新しいページを追加すると、自動的にこのメニューに表示されます。
このオプションを使用する場合、メニュー項目を移動するには、次の操作が必要です。
- ナビゲーションブロックの中で、移動できない、またはブロックを近くに移動できない個別のメニュー項目を選択します。
- ブロックツールバーの「編集」をクリックします。
- 表示されるポップアップで「変換」を選択します。メニュー項目がリンクに変換され、移動できるようになります。
- すると、メニュー項目を移動するオプションが表示されます。
以下の動画でその手順を紹介します。
空で始めて、新しいメニューを作製する
ナビゲーションブロックを追加し、「空から始める」を選択します。真っ白なキャンバスから、自由にカスタマイズできます。
ブロックのカスタマイズ
メニュー項目の追加
ナビゲーションブロックにメニュー項目を追加するには、いくつかの方法があります。
- インサーターを開き、追加するブロックを選択します。
- ナビゲーション全体のブロックを選択し、その際に表示される「+」ボタンを選択します。 「+」 アイコンを選択すると、「変換」の下に、リンク以外のブロックも追加できるセクションが表示されます。
なお、現時点でナビゲーションブロックに追加できるブロックは限られています。追加できるブロックは以下のとおりです。
- スペーサー
- カスタムリンク
- 投稿リンク
- ページリンク
- カテゴリーリンク
- タグリンク
- ホームリンク
- ページリスト
- 検索
- ソーシャルアイコン
- サイトロゴ
- サイトタイトル
それぞれ、追加後のカスタマイズのレベルが異なります。これらのオプションのいずれかを追加した後、ナビゲーションブロックにさらにブロックを追加する際に、追加のオプションが表示されます。
サブメニュー項目の追加
サブメニュー項目を追加するには、サブメニュー項目を追加するブロックを選択し、ブロックツールバーで、サブメニューアイコンをクリックします。これで、選択したブロックの下に、自動的にサブメニュー項目が追加されます。
以下の動画で、この機能の動きを紹介します。
ブロックの移動
ナビゲーションブロックに追加したブロックを移動するには、2つの方法があります。これらのツールを使用して、各メニューを自由に並べ替えることができます。
素早く変更するには、ブロックを操作する際に表示されるツールバーの移動ハンドルが最も簡単なオプションでしょう。
より高度で複雑な動きをする場合は、ナビゲーションブロックに組み込まれたリストビューを使用してください。アクセスするには、全体のナビゲーションブロックを選択し、リストビューアイコンを選択します。
以下は、この機能の動作を紹介した動画です。
すべてのメニュー項目や特定のメニュー項目を移動できない場合、まずメニューをリンクに変換する必要があります。これは「すべてのページを追加する」オプションを使用した場合に発生します。リンクに変換する方法については、前述のセクションの説明を参照してください。
リンクとタイトルの変更
ナビゲーションメニューに追加される各ブロックには、リンクとタイトルの2つのパーツがあります。
タイトルを変更するには、ブロックのテキストを直接編集してください。
リンクを編集するには、個々のブロックを選択し、ツールバーのリンクアイコンを選択します。すると、メニューのリンク先とタイトルを編集するオプションが表示されます。以下は、この機能の紹介です。
メニュー項目を他のブロックに変換する
ナビゲーションブロック内の各ブロックは、「変換」メニューで他のブロックに変換できます。このオプションにより、異なるブロックを使ったメニューを簡単に構築できます。
メニューの管理
現在選択されているナビゲーションメニューを削除するには、ブロックの設定サイドバー内の「高度な設定」セクションを展開します。「メニューの削除」ボタンを選択すると、ナビゲーションメニューが削除され、現在のナビゲーションブロックがデフォルトの状態にリセットされます。
メニューの削除や名前の変更をまとめて簡単に行うには、下図のようにツールバーの「メニューの選択」項目をクリックし、「メニューの管理」をクリックしてください。
サイト全体を通じて利用されるメニューを削除、名前変更できる専用の画面に移動します。このセクションからは直接、メニューを編集できません。
テーマを越えてメニューを使用する
メニューはデータベースに保存されるため、ブロックテーマにまたがってメニューを再利用できます。ブロックテーマからクラシックテーマに変更した場合は、ナビゲーションブロックで作成したメニューを再利用できます。
ブロックツールバーオプション
各ブロックには固有のコントロールがあり、エディター内でブロックを操作できます。
ナビゲーションブロックには以下のオプションがあります。
配置の変更
- 左揃え: ブロック全体とコンテンツを左に揃える。
- 中央揃え: ブロック全体とコンテンツを中央に揃える。
- 右揃え: ブロック全体とコンテンツを右に揃える。
- 項目の間隔: メニュー項目の間に自動的にスペースを追加する。
メニューを選択
このオプションで、表示するメニューを変更できます。
リストビューを開く
ナビゲーションブロック全体のブロックのみを移動できる、制限されたリストビューが表示されます。
ブロック設定
すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディターのサイドバーにも特定のオプションがあります。サイドバーが表示されていない場合は、「公開」ボタンの隣にある歯車アイコンをクリックしてください。
レイアウト
このオプションにより、ナビゲーションブロックの全体的な配置を制御できます。以下が含まれます。
- 配置: この設定は、ナビゲーションブロックの項目を左、中央、右に揃えます。また、項目と項目の間にスペースを挿入することもできます。
- 方向: この設定は、ナビゲーションブロックのすべての項目の並びを垂直方向と水平方向で切り替えます。
- 複数行に折り返す: このオプションは、表示スペースが十分でない場合に、ナビゲーションブロックで複数行への折り返しの有無を切り替えます。
表示
現在、このセクションには1つの設定しかなく、異なる画面サイズにわたってナビゲーションブロックの表示内容を制御し、レスポンシブメニューのオプションを指定します。
- オフ: 小さい画面サイズでは、メニューアイコンを表示しません。
- モバイル: 小さな画面でサイトを見るとメニューアイコンが表示され、クリックするとメニュー全体が表示されます。
- 常時: 画面サイズに関係なく、メニューアイコンが表示されます。
デフォルトでは、このオプションは「モバイル」に設定されており、小さな画面サイズでは自動的にメニューアイコンが表示されます。メニューアイコンをクリックすると、メニュー全体が表示されるオーバーレイが表示されます。
色
この設定により、ナビゲーションブロックの外観をさらにカスタマイズできます。以下のオプションが用意されています。
- テキスト: ナビゲーションブロック項目のテキスト色を設定する。
- 背景: ナビゲーションブロック項目の背景色を設定する。
- サブメニューとオーバーレイテキスト: サブメニューのテキスト色と、レスポンシブ表示オプションに組み込まれたオーバーレイの色の両方を設定します。
- サブメニューとオーバーレイ背景: サブメニューの背景色と、レスポンシブ表示オプションに組み込まれたオーバーレイの色の両方を設定します。
タイポグラフィ
ナビゲーションブロックのアイテムのタイポグラフィをカスタマイズできます。このブロックは現在、以下のオプションをサポートします。
- フォントファミリー
- 外観
- 行の高さ
- 装飾
- 大文字小文字
- フォントサイズ
このセクションにある「＋」ボタンをクリックすると、必要なすべてのオプションにアクセスできます。
寸法
現在、ナビゲーションブロックはブロックの間隔に対応しており、各ブロックの間にカスタム間隔を追加できます。これにより、簡単にブロック全体の外観を統一できます。
高度な設定
このセクションでは以下の操作が可能です。
- メニュー名の変更
- メニューの削除
- HTMLアンカーの追加
- CSSクラスを追加して、自由にブロックをスタイリングする
Changelog:
- Created 2022-01-05
この記事は役に立ちましたか ? どうすればさらに改善できますか ?
フィードバックを送信するにはログインする必要があります。