2021/3/31 情報を更新いたしました。
WordPressサイトのヘッダーやフッターのメニュー項目は、管理画面から設定できます。例えば、当サイトのグローバルメニューもナビゲーションメニュー機能で作成しています。
当記事では、ナビゲーションメニューの設定方法について解説します。
目次
ナビゲーションメニューとは
メニューの登録や表示を管理できる機能です。ここで設定したメニューは、ヘッダーやフッター、サイドバー等あらゆる場所に表示できます。
WordPressの基本的な機能になりますので、当記事を参考に操作方法を覚えておきましょう。
テーマによってメニューを表示できるエリアやデザインは異なります。
ナビゲーションメニューの基本については、下記の動画でも解説してますので、よろしければご覧ください。
ナビゲーションメニューの操作方法
それでは実際にナビゲーションメニューを設定してサイト上に表示してみましょう。今回は、「Twenty Twenty-One」を例に解説していきます。
外観 > メニューでメニューの設定画面を開きます。
下記がナビゲーションメニューの設定画面になります。ここでサイト上に表示するメニュー項目の追加・編集を行いますので、順番に設定していきましょう。
メニューを作成する
まずはメニューを作成します。「メニュー名」を入力して「メニューを作成」を押します。
メニューは表示するエリアごとに作成することが多いため、メニュー名を「表示するエリア＋menu」等にすると管理しやすいです。
例）header-menu、footer-menu 等
メニュー項目を追加する
作成したメニューの中身を設定していきます。追加できるメニュー項目は大きく分けて下記の2種類です。
作成済みのページ・タクソノミーを追加する
投稿や固定ページ、カスタム投稿で作成したページやカテゴリー等をメニュー項目として追加できます。URLはパーマリンクやスラッグを元に自動で決められます。
例えば、固定ページを追加する場合は、下記のようにチェックを入れて、「メニューに追加」を押すと追加できます。（作成したものだけが選択肢に反映されます。）
一部表示されていないものがある場合は、画面右上の「表示オプション」を開き、各投稿タイプやタクソノミーにチェックを入れてください。
カスタムリンクで追加する
カスタムリンクは、任意のURLを記入してメニュー項目を追加できます。「URL」と「リンク文字列」を入力して、「メニューに追加」を押します。
カスタムリンクは、ページ等を作成せずともメニュー項目を追加できます。URLの記述ミスやページのURLを変更した後のリンク切れにお気をつけください。
メニュー項目を編集・調整する
メニュー項目を追加した後は、「メニュー構造」で各項目の編集や調整を行っていきます。下記は基本操作になりますので、必ず覚えておきましょう。
ラベルを変更する
メニュー構造に追加した後もラベルは変更できます。各項目の「▼」アイコンを押し、「ナビゲーションラベル」の文言を変更してください。（ラベルはサイト上に表示されるメニュー項目の名称です。）
カスタムリンクはURLも後から変更できます。
メニュー項目を並び替える
メニュー構造の各メニュー項目の順番は、サイトの表示順にそのまま反映されます。表示順を変更する場合は、ドラッグ&ドロップで各項目を入れ替えます。
メニューの階層化を行う
メニューを階層化することで、下記のようなドロップダウンメニューを表示できます。（例：TCDテーマ「Anthem」）
階層化は、ドラッグ&ドロップでメニュー項目を右側に移動させて行います。下記の場合、「お知らせ」と「会社概要」は「HOME」のサブメニュー（副項目）となります。
メニューを表示する位置を決める
メニュー項目の追加・編集を行った後は、「メニュー設定」 >「メニューの位置」でメニューの表示位置を決めます。（表示位置はテーマによって異なります。）
「Twenty Twenty-One」の場合は、下記の2箇所用意されており、メインメニューにチェックを入れると、ヘッダーに表示され、サブメニューにチェックを入れると、フッターに表示されます。
実際にチェックを入れると、下記のような形でサイト上にメニューを表示できます。（両方にチェックを入れているので、ヘッダーとフッターに同じメニューが表示されています。）
また、メニューの位置は「位置を管理」からも設定できます。用意されたメニューの位置が多い時はこちらを活用すると管理しやすいです。
ウィジェットでナビゲーションメニューを使用する
作成したメニューは、ウィジェットの「ナビゲーションメニュー」でも使用できます。
外観 > ウィジェットより、「ナビゲーションメニュー」を追加し、作成したメニューを選択すると、サイドバーやフッターにも表示できます。詳細はウィジェットの使い方をご覧ください。
2021/3/23 情報を更新いたしました。 WordPressには、特定のエリアを管理画面から簡単に装飾できるパーツ（ウィジェット）が複数用意されています。これらを活用すれば、下記のようにサイドバーやフッターを装飾できます。 （例：TCDテーマ「Muum」） フッター ...
まとめ
サイトのナビゲーションは、ユーザーを最適な情報（ページ）へ導く重要な役割を担っています。各メニュー項目のリンクは切れていないか、項目が多すぎないか等も必ずチェックしておきましょう。
また、ドロップダウンメニューとは別にメガメニューを表示できるテーマも存在します。メガメニューは、情報をコンパクトにまとめ、ユーザーに対して、情報の在り処を視覚的にアプローチできます。下記に詳細をまとめてますので、ぜひ参考にしてください。
当サイトのメガメニュー
2019/06/05*情報を更新いたしました。 2020/05/02*動画解説を更新いたしました。 最近、国内ウェブサイトでもよく目にするようになったメガメニュー。メガメニューは、一般的なグローバルメニューのドロップダウンより広く領域がとられています。その為、多くの情報をひと目でわかりやすく...
