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