WordPress手帖

ー私の備忘録ー

#8_サイトエディターでナビゲーションメニューを追加・編集する方法【X‐T9】
2,596文字
11〜16分

で読めます

「ナビゲーションメニューってどこで作るの?クラシックテーマのときと全然違う…」

ブロックテーマを使い始めて、こんな疑問を持ちませんでしたか?

クラシックテーマでは「外観」→「メニュー」から設定するのが一般的でした。実はブロックテーマでは、サイトエディターからナビゲーションブロックを使って作成・編集します。サイトエディターとは!?

そうです!前回もテンプレートを編集したときに、管理画面から入ったブロックテーマのデザインが変更できる魔法の場所です♪テンプレートの記事はこちら↓

最初は戸惑うかもしれませんが、慣れるととても直感的に操作できます。実際に手を動かしながら一緒に進めていきましょう!

環境

  • WordPressバージョン:Wordpres7.02
  • 使用テーマ:X-T9

※ブロックテーマであれば他のテーマでも基本的な手順は同じです。

ナビゲーションメニューを追加する手順

STEP1_まずはヘッダーのテンプレートパーツがどうなっているか見てみよう!

①テーマのX-T9の場合は、もともとヘッダーというテンプレートパーツ(パターンみたいなもの)があるので、それを確認します。私のはすでにメニューが入っています。ここではこのヘッダーテンプレートパーツがある前提で解説します。WordPress管理画面の外観からエディター→パターン→テンプレートパーツに入り、ヘッダーをクリックして確認します。

テンプレートパーツ一覧のサイドバー項目と、右側に表示されているヘッダーのプレビューが赤枠で強調されている画面。

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

WordPressサイトエディターのリストビューと、ヘッダー内にナビゲーションメニューが表示されているプレビュー画面。

③ それではナビゲーションのメニューを追加していきます。

WordPress管理画面の外観→エディター→ナビゲーションをクリックして編集画面に入ります

WordPressサイトエディターのデザインメニューにある「ナビゲーション」の項目が赤枠で強調されている画面。

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

ナビゲーション設定画面の3点リーダーをクリックし、メニュー内の「編集」を選択する箇所を赤枠で示した図。

⑤ +ボタンを使ってメニュー項目を増やしていきます。あらかじめ固定ページを作成してからメニューに登録する方法を、迷いにくいためおススメします。作成済みの固定ページがあればリストに表示されるので、そこから選択しましょう。(このやり方が一番スムーズです)

右側の設定ーコンテンツーテキストからメニューを好きなタイトルに変更できます。

例えば、ここに追加で「ナビゲーションメニュー」と入れたいとします。

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

ナビゲーション編集画面の「タイトル」欄に「ナビゲーションメニュー」と入力し、「ページを作成」ボタンを選択する操作画面。

「ナビゲーションメニュー」という名称のメニューを新たに作成します。「ページを作成」をクリックすると、ここから新しい固定ページが生成され、リンクも自動的に追加されます。

⑦ 編集内容を確定させるために「保存」ボタンをクリックしてください。(システムの反映状況や特定の条件下では、設定を有効にするために2回保存の操作を繰り返さないといけない場合があります。)

STEP2_固定ページを確認してみる。ついでにサブメニューの作り方も解説!

①作成できた固定ページを見てみます

WordPressの固定ページ一覧画面で、新しく作成された「ナビゲーションメニュー」が公開済みとして赤枠で囲まれている様子。

「ナビゲーションメニュー」という名称のページが作成されています。「公開済み」を選択しているため現在は公開中ですが、チェックを入れなければ下書きとして保存されます。メニューの追加作業後、ナビゲーションの編集画面を通じて固定ページが生成されました。

②既に作成済みのページであれば、メインメニューの下層へドラッグするだけでサブメニュー化できます。私はあらかじめ固定ページを用意しておくスタイルなので、ドラッグ操作のみで設定が完了しました。以前は全ての項目をメインメニューに並べていましたが、長くなりすぎるため、サイトマップやプライバシーポリシーはサブメニューへ移動させました。

別のやり方として、親メニューを選び「+」からブロックを追加する手順があります。サブメニューというブロックを挿入しますが、自動的に下層へは入らないため、後からドラッグして移動させる必要があります。

メニューの項目数は5〜6個程度に留めると、見やすくなります。新しく追加する際は、先ほどのメインメニュー作成時と同じ手順でページを作成してください。次に、それらをドラッグしてサブメニューへと設定します。なお、今回は「OTHERS」というメニューを設けましたが、これはサブメニューをまとめるための受け皿として作成したため、この項目自体にはリンクが飛ばないよう(「#」を入力)設定しました。

リストビューでOTHERSの下にサブメニューを配置し、右側の設定パネルでOTHERSのリンク先を「#」に設定している編集画面。

③下の画像は、実際のサイト画面のナビメニューとサブメニューです。

OTHERSの下にSITE MAPとPRIVACY POLICYのページが入っています。マウスでホバーすると下にサブメニューが出現する仕組みになっています。↓

「OTHERS」メニューの下に「SITEMAP」と「PRIVACY POLICY」がサブメニューとして表示されている実際のサイト画面。

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

ナビゲーション項目のツールバーにある3点リーダーのボタンと、メニュー内の「削除」が赤枠で強調されている様子。

おまけ

※ リンクの変更の仕方

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

ナビゲーションブロックの設定画面で「リンク先」の項目とURL入力欄が表示されている様子

まとめ

X-T9のナビゲーションメニューはサイトエディターのナビゲーションブロックで作成・追加・編集できます。

  • ゼロからのメニュー作成はヘッダーテンプレートにナビゲーションブロックを追加
  • 項目の追加・削除・並び替えはブロックを選択した状態で操作(メニューの順番は、ドラッグで入れ替えられる)
  • サブメニューは親メニュー項目から追加できるし、ドラッグで下に入れると簡単にサブメニューになる!

次の記事では、このナビゲーションメニューの配色をサイトエディターで変更する方法を解説します!

  • X

Back to top