ワードプレスでメニュー（ナビゲーション）を設定する方法
webサイトにはナビゲーションメニューが欠かせませんよね。ナビゲーションなしだと使いにくいサイトとなってしまうからです。
適正に設置することでユーザーの利便性を高めることができるわけです。
ワードプレスには便利な”メニュー”という機能があり、簡単にナビゲーションが設定できるようになっています。
”メニュー”でナビゲーションを設定する基本的な方法を知ることができます。
・メニュー項目を設定する
・メニュー項目の順番の入れ替えと階層化をする
・メニューの設置場所
・メニューの表示オプション（ラベル・キャプション・クラス名付与）
※テーマLightningを使って手順紹介していきますが、ナビゲーション設定の手順はどのテーマでも同じです。
また、今回作成のグローバルナビゲーションは、ウェブチルで開催しているセミナーのデモサイトで使っているものです。
今回ナビゲーションを作成するサイトの構成
以下の構成のサイトのナビゲーションを作成します。
- トップページ
- 一階層下の５つの固定ページ（赤）と１つのカスタム投稿タイプ（”新商品情報”）
- 二階層下の５つの固定ページ（赤）
これらへのナビゲーションを設定します。
ナビゲーション出来上がりのイメージ
ナビゲーションの出来上がりは以下の通りです。
サイトのヘッダー部に表示されるグローバルナビゲーションを作成します。
子ページのある項目にマウスオーバーすると子ページへのナビゲーションも表示されます。
グローバルナビゲーションの作成方法
ワードプレスのメニューを使って作成していきます。手順概要は以下の通りです。
- メニュー設定ページを開ける
- メニュー名を入力する
- メニュー項目の追加をする
- メニュー構造の順番と階層を整える
- メニューの位置を設定する
- オプションを設定する（今回はキャプションをつけます）
- メニューを保存する
詳細手順
【手順１】メニュー設定ページを開ける
ダッシュボードメニューから 外観＞メニュー と進めます。
【手順２】メニュー名を入力する
①メニュー名を入力
②”メニューを作成”をクリック
メニュー名は何でもよいですが、今回は“g_nav”という名前としました。
【手順３】メニュー項目の追加をする
画面左側の“メニュー項目を追加”で、ナビゲーションに入れる項目を選択します。
①固定ページを開ける
②追加したい項目にチェックを入れる（今回は”すべて選択”をクリック）
③”メニューに追加”をクリック
上記手順は固定ページからの項目追加ですが、ほかにも次の項目が可能です。
- 固定ページ・・・サイト内の固定ページから選択する
- 投稿・・・サイト内の投稿の中から選択する
- カスタム投稿・・・サイト内にカスタム投稿タイプがあれば選択できる
- カスタムリンク・・・URLを直接入力する（外部サイトのURLでもOK）
- カテゴリー・・・サイト内のカテゴリーから選択する
今回は、カスタム投稿タイプの”新商品情報”も同様の手順でメニュー項目に追加しておきます。
【手順４】メニュー構造の順番と階層を整える
画面右のg_navというメニューの中に項目が並びました。
これをマウスのドラッグ＆ドロップで動かして順番と階層を整えます。
階層は少し右へずらすとその上の項目の子メニューとなります。
（例えば、”Sweets Time特徴”の下の”こだわり食材”と”こだわり調理法”は少し右にあるので子メニュー）
【手順５】メニューの位置を設定する
並んだメニュー項目の下の”メニューの位置”でナビゲーションを表示する場所を指定します。
今回は”Header Mavigation”にチェックを入れます。
※設定できるメニューの位置は使用しているテーマによって異なります。
最低限ヘッダーとフッターの２つは設定できます。
また、ウィジェット”ナビゲーションメニュー”からサイドバーなどにも設置可能です。
【手順６】オプションを設定する
メニュー項目ごとにオプションとして詳細設定ができるようになっています。
（テーマによって設定可否は異なります）
今回はメニューにキャプション（説明）をつけます。
①設定するオプションを画面上の”オプション”を開ける
②”説明”にチェックを入れる
メニュー項目ごとにキャプションをつけていきます。
①メニュー項目右の▲をクリック
②説明欄にキャプションを入力する
このほか、よく使うメニューの詳細設定を紹介しておきます。
ナビゲーションラベル
メニュー名は、
”固定ページや投稿のタイトル”＝ナビゲーションラベル
となっていますがこのままだと長すぎる場合があります。
ナビゲーションラベルに入力することで別のラベル名に変更することができます。
CSSクラス
オプションとしてCSSクラスにチェック入れておくと、メニュー項目ごとにCSSクラスをつけてカスタムCSSを適用できるようになります。
メニューの頭にアイコンをつけるなど、装飾を変えたりするのに重宝します。
【手順７】メニューを保存する
最後に画面右下で”メニューを保存”をして、グローバルナビゲーションの設定は終了です。
web表示させたグローバルナビゲーションは、次のようにナビゲーションラベルの下にキャプションが表示される仕様となっています（※テーマによっては表示されません）。
まとめ
ワードプレスの”メニュー”を使って、ナビゲーションを設定する方法を解説してきました。
・１つのサイトの中に複数設定することが可能
（手順２でメニュー名を別のモノで設定します）
・設置場所はヘッダー以外にも可能
（手順５で設置場所を選択、またはウィジェット”ナビゲーションメニュー”でサイトバーなどにも可能）
・ナビゲーションラベルの変更やキャプションをつけることができる
・クラス名を付与してカスタムCSSを適用できる
適正なナビゲーションを設置して、あなたのサイトのユーザービリティを高めていきましょう。
メニュー以外にワードプレスの使い方は以下の記事がおすすめです。
https://web-children.com/2020/11/18/master-guidelines-flow-f...