WordPressでナビゲーションメニューの作り方をお探しの方向け。
Webサイトの上部にナビゲーションメニュー（案内メニュー）を設置することで、ユーザーは欲しい情報を探しやすくなりますので、Webサイトを作る時は必ず設置するようにしましょう。
この記事では、ナビゲーションメニューの作り方について解説します。
好きなところから読めます
ナビゲーションメニューとは
ナビゲーションメニューとは、各コンテンツページへリンクされているWebサイト共通の案内メニュー（目次）のことです。
メニューをきちんと設置してあると、ユーザーはWebサイトで迷うことなく必要な情報に辿り着く事ができるようになります。
ナビゲーションメニューを作る手順
ナビゲーションメニューを作り方を次の手順で解説します。
- 手順①：メニューの新規作成
- 手順②：メニューの編集
- 手順③：メニューの親子関係（階層化）の設定
- 手順④：メニューの並び替え
- メニューの追加項目の解説
上記のとおりです。
手順①：メニューの新規作成
それでは、ナビゲーションメニューを作成しましょう。
ダッシュボード＞外観＞メニュー を選択します。
メニュー作成画面が表示されますので、最初に、メニュー名を入力します。
メニュー名はユーザーには見られませんので、管理しやすい名称を入れておきましょう。
- メニュー名を入力する
- メニューを作成をクリック
これで新規メニューを作成できました。
ただ、これだけではメニューという器を作っただけなので、次に、メニューの編集を行いましょう。
手順②：メニューの編集
メニュー構造
メニューを作成したら、次はメニュー内容を編集します。
①最初に、メニューに追加したい項目にチェックを入れます。ここでは試しに、「会社案内」というメニューを選択します。
②チェックを入れたら、「メニューに追加」ボタンをクリックします。
メニュー構造という右側の欄に、先程追加した「会社案内」というメニューが追加されました。
メニュー設定（メニューの位置）
メニューを追加したら、①メニュー設定のメニューの位置にある「Header Navigation」にチェックを入れます（Headerにチェックを入れると上部に表示されます）。
メニューの位置にチェックを入れたら、②「メニューを保存」をクリックします。
保存すると、③画面上部に「更新されました」と表示されます。
これで設定が反映されました。
プレビューで確認すると、メニューが出現しているのが確認できます。
メニュー位置について【補足説明】
メニューの位置はテーマによって異なります。
この記事で使用しているLightningテーマでは、メニューの位置は２つ用意されています。
- Header Navigation（ヘッダーナビゲーション）：サイト上部に表示されるメニュー
- Fotter Navigation（フッターナビゲーション）：サイト下部に表示されるメニュー
手順③：メニューの親子関係（階層化）の設定
次に、メニューの親子関係（階層化）を設定する方法を解説します。
①小メニューに追加する「代表挨拶」というページにチェックを入れて、②「メニューに追加」をクリックします。
右側にメニューが追加されました。
しかし、このままでは親子関係で表示されず、横並び（同じ階層）で表示されてしまいます。
下図のような感じですね。
これでは親・親となってしまいますので、親子関係に修正する必要があります。
親子関係（階層化）に修正するにはドラッグで移動する
修正する方法は非常に簡単で、子にしたいメニューを右側に少しドラッグするだけです。
ドラッグしたら「メニューの保存」をクリックして下さい。
たったこれだけで、「会社案内」という親メニューの下に「代表挨拶」という子メニューを設定できます。
手順④：メニューの並び替え
メニューを並び替えたい時は、下図のようにメニューをドラッグするだけで並び替えが簡単にできます。
並び替えた後は、「メニューを保存」をクリックすると、設定が反映されます。
メニューの追加項目の解説
この記事では、固定ページを例に解説させて頂きましたが、メニューに追加できる項目は固定ページ以外にも投稿、カスタムリンク、カテゴリーを追加する事ができます。
| 固定ページ | 固定ページを追加できます |
|---|---|
| 投稿 | ブログ記事を追加できます |
| カスタムリンク | 直接URLを記入する事ができます（他サイトのページも追加可能） |
| カテゴリー | ブログのカテゴリーを追加できます |
ナビゲーションメニューの表示をカスタマイズ
最後に、ナビゲーションメニューの表示をカスタマイズする方法を解説します。
この記事の解説を元にメニューを作成すると、下図のようなメニューを作成できます。
これだけでも良いのですが、テーマによってはメニューの表示をカスタマイズすることができます。
例に漏れず、「Lightningテーマ」もメニュー表示をカスタマイズする事ができますので、メニュー表示をカスタマイズしたいと思います。
表示のカスタマイズの設定方法
表示オプションを開く
メニュー編集画面の右上に「表示オプション」という項目がありますので、クリックします（若干分かり難い場所にあります）。
表示オプションの説明にチェックを入れる
表示オプションの詳細が開きますので、「説明」にチェックを入れます。
説明にチェックを入れるとメニュー編集項目が出現する
説明にチェックを入れた後、表示のカスタマイズをしたいメニュー名の右側にある矢印（▼）をクリックすると、メニューの編集項目に「説明」という項目が出現します。
これでメニュー表示をカスタマイズできるようになります。
- ナビゲーションラベル：メニューに表示されるメニュー名
- 説明：下に小さく表示される英文字
入力が終わりましたら、「メニューを保存」をクリックします。
以上でメニュー表示のカスタマイズは完了です。
まとめ
以上、ナビゲーションメニューの作り方について解説しました。
おわり。
