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