WordPressは殆どのテーマでナビゲーションメニュー（カスタムメニュー）を設置できます。
適切なナビゲーションメニューを設置することで訪問したユーザーが目的のページにたどり着きやすくなるため、まだ設定していない方は早めに設定しておきましょう。
とはいえ、ナビゲーションメニューの設定方法がわからなかったり、自分なりにカスタマイズしたいけどやり方がわからない方も多いのではないでしょうか？
ここでは、ナビゲーションメニューの作り方やカスタマイズ方法などについて解説します。
WordPressのナビゲーションメニュー（カスタムメニュー）の作り方
WordPressのナビゲーションメニューには、既存のページや外部リンクなどを設定することができます。
細かい違いは使用しているテーマによって変わりますが、
- 固定ページ
- カテゴリーページ
- 投稿ページ
- カスタムリンク
などがナビゲーションメニューとして設定可能です。
もし、まだメニューに表示したいページが作成できていないのであれば、事前にページを作成しておきましょう。
もちろん後からメニューの編集や追加もできるので、まだメニューのイメージがはっきり固まっていない場合も問題はないので安心してください。
それでは、ナビゲーションメニューの作成手順を解説します。
STEP①新しくメニューを作成する
まず、最初に大枠となるメニューを作成します。
WordPressの管理画面にログインし、左側にあるメニューから「外観」→「メニュー」を開いてください。
メニューの編集画面が開くので、「新しくメニューを作成しましょう」をクリックします。
上の画像の①に自分で分かりやすいメニュー名を入力し、②で表示したい場所にチェックを入れてください。
メニュー名、メニューの位置を決めたら「メニューを作成」をクリックします。（メニューの位置は使用しているテーマによって表示が変わります）
今回はヘッダー部分に表示するメニューを例として作成しているので、メニュー名は「ヘッダーメニュー」、メニューの位置はグローバルナビにチェックをいれました。
同じメニューバーを複数の箇所に表示したい場合は複数チェックしてもOKです。
STEP②作成したメニューにページを追加する
メニューの作成ができたら、次は中身を編集していきます。
まずは画面上側のプルダウンメニューから先ほど作成したメニューを選択してください。
次に左側の「メニュー項目を追加」から追加したいページにチェックを入れ、「メニューに追加」をクリックします。
今回は固定ページから「ホーム」と、あらかじめ作成していた「プライバシーポリシー」「お問い合わせ」ページを追加しました。
メニュー構造のところに追加したページが入っていることを確認し、「メニューを保存」をクリックしましょう。
STEP③メニューの表示名や並び順を編集
追加したメニューはそれぞれクリックすると細かい設定が開きます。
メニューに表示される名称や並び替えもここでできるので、変更したい場合は変更して保存してください。
メニューに階層をつくることも可能で、下の階層を設定すればプルダウンメニューも簡単に作成できます。
STEP④実際のサイトにメニューが反映されているか確認
メニューを保存したら実際にサイトの表示を確認してみましょう。
実際に作成したメニューが反映されていることを確認できたら完了です。
今回はよくある固定ページをメニューとして追加しましたが、投稿ページや外部リンクなどもメニューに設置できます。
自分だけのオリジナルメニューを作成してユーザーが使いやすいサイトを目指しましょう。
ライブプレビューで表示を確認しながらメニューの作成や編集も可能
WordPressではライブプレビュー機能があり、実際に表示される画面を見ながらメニューを作成することもできます。
メニューの作成画面上部に「ライブプレビューで管理」というボタンがあるのでクリックしてください。
すると、画面左にメニューの作成と編集画面が開き、右側には実際のサイトが表示されます。
使用しているテーマによって表示が若干違う場合もあるかもしれませんが、メニューの作成や編集方法については基本的に先ほど解説した手順と殆ど同じです。
ライブプレビューでは作成したメニューや編集した内容が右側にある画面ですぐに反映されるので、見た目を確認しながらカスタマイズができます。
あくまでプレビューなので、変更した内容は左上にある公開ボタンを押さない限り実際のサイトに反映されることはありません。
メニューの作成や編集をした場合は忘れずに公開ボタンをクリックしましょう。
メニューを簡単にカスタマイズできるおすすめプラグイン
メニューを自力でカスタマイズすることは可能ですが、プログラミングの知識が必要になるため、WordPress初心者の方には難しいでしょう。
そこで、今回は簡単にメニューをカスタマイズできる3つのプラグインを御紹介します。
- Max Mega Menu
- WP Responsive Menu
- Menu Image
それぞれどんなことができるか簡単に解説するので参考にしてください。
もしプラグインのインストール方法がわからなければ下記の記事でも解説しています。併せてチェックしてください。
Max Mega Menu
Max Mega Menuはメガメニューを簡単に追加することができるプラグイン。
メガメニューとは通常より広いスペースで表示されるドロップダウンメニューで、ブログなどではあまり見かけることはないですが、企業サイトなどではよくみるメニューです。
ページをグループ化して表示したり画像のアイコンをつけたりできるので、ユーザーにコンテンツの内容が分かりやすく表示することができます。
メガメニューを利用できるテーマは有料のものでも少ないので、メガメニューを利用したいならプラグインで追加するのがおすすめです。
Max Mega Menuの使い方
Max Mega Menuは設定項目が多いので簡単な使い方だけ紹介します。
インストール後に有効化すると、メニューの編集画面に新しく項目が追加されます。
まず、左側の「Max Mega Menu Settings」で「Enable」にチェックをいれて保存しましょう。
チェックを入れると選択中のメニューがメガメニュー化されます。
次は、メニュー構造のそれぞれに「Mega Menu」という青いボタンが追加されているので、そこをクリックしてください。
左側のプルダウンメニューでレイアウトを選び、右側のプルダウンメニューからメガメニューに追加するウィジェットを選んで挿入できます。
レイアウトは2種類ありますが、列とサイズを選ぶだけで選択したウィジェットを自動で表示してくれる「Standard Layout」がおすすめ。
アイコンなどもここから設定できますが、もっと細かい設定をしたい場合は管理画面の左側に追加されている「Mega Menu」というところから変更可能です。
メガメニュー内の背景色やモバイルの表示設定などもここから変更できるので、いろいろと試してみてください。
WP Responsive Menu
WP Responsive Menuは、スマホ（モバイル）対応したレスポンシブメニューを簡単に作成できるプラグインです。
今はパソコンよりモバイル端末を利用するユーザーが多く、実際にGoogleもモバイルファーストインデックス（PCではなくスマホ向けサイトを基準に評価すること）に移行しています。
使用しているテーマによっては標準でスマホ表示に対応していますが、メニューがレスポンシブでない場合やデザインを変更したい場合はプラグインでカスタマイズしましょう。
WP Responsive Menuの使い方
WP Responsive Menuも英語なので分かりにくいと思いますが、翻訳機能をつかえば大体の設定方法はわかるはずです。
ここでは、より簡単に設定できるために必要な設定を御紹介します。
上記画像のようにGeneralタブにある①をチェックし、②で事前に作成してあるメニューの中からレスポンシブ化するメニューを選択します。
ここまでできたら③で一旦保存しましょう。
ライブプレビューをオンにすると、上の方に目のアイコンと「Live Preview」という文字が現れるので、そこをクリックするとサイトのプレビュー画面が表示されます。
あとは「細かい設定を変更しながら保存」→「ライブプレビューで確認」を繰り返してメニューをカスタマイズしましょう。
ちなみに、グレーに塗りつぶされている項目はプロ版（有料）にアップグレードしないと変更はできません。
Menu Image
Menu Imageは、メニューに画像を入れられるようになるプラグインです。
例えば、「HOME」というメニューの前に家のアイコンを挿入したり、文字を消してアイコンだけにするなんてこともできます。
先に紹介した2つのプラグインとは違い、インストールして有効化するだけで使えるプラグインなので、WordPress初心者の方でも気軽に利用できるでしょう。
Menu Imageの使い方
Menu Imageをインストールして有効化すると、メニューの編集項目に画像やアイコンを追加できるボタンが増えます。
クリックするとタイトル位置（画像を入れる位置）や画像のアップロード、画像サイズを選択する画面が出てくるので好みで設定しましょう。
簡単なアイコンであれば、最初から用意されているものでもかなり種類があります。
選択すると右側にプレビューが表示されるので、確認しながらお好みのメニューを作成して下さい。
まとめ
WordPressのグローバルメニュー（カスタムメニュー）は簡単に作成できるので、サイトやブログに合わせてメニューを作成しましょう。
メニューのカスタマイズは使用中のテーマによって自由度が変わりますが、プラグインを活用すれば高度なカスタマイズも簡単にできます。
ちょっとこだわってカスタマイズしたい方は、必要なプラグインをインストールして自分なりのオリジナルメニューを作ってみてください。
また、メニューの表示位置を変えたり、色を変えたりする程度のカスタマイズであれば、有料テーマなら最初から備わっているものが多いです。
有料テーマは他にもカスタマイズが簡単だったり、いろいろな機能が備わっているので、初心者の方こそ有料テーマを利用するべきだと思います。
おすすめの有料テーマについては下記の記事でまとめていますので、興味があれば参考にして下さい。
