WordPressにメニューバーを設定する方法！ カスタマイズ方法や便利なプラグインも紹介

WordPress管理画面の左メニューで「外観」 ＞ 「メニュー」を選択すると、メニュー設定画面が開きます。

「メニューを編集」タブ内で「新しいメニューを作成しましょう」のテキストリンクを押下します。

「メニュー構造」にある「メニュー名」に任意のメニュー名を入力し、右下の「メニューを作成」ボタンを押下してください。

「メニューを編集」タブの画面左側にある「メニュー項目を追加」で、メニューに表示する各項目を追加します。

メニューに設定できるのは、下記の5種類です。

WordPressでは、メニューの順序を並び替えることもできます。

外観 ＞ メニュー ＞ 「メニューを編集」タブ画面で、右側の「メニュー構造」を見てください。

メニューに追加した各項目が反映されています。

各項目をドラッグ＆ドロップすると、メニューバー内での並び替えが可能です。

表示順をどう決めるかはケースバイケースですが、以下を目安に設定してみてください。

外観 ＞ メニュー ＞ 「メニューを編集」タブより画面の下部にある「メニュー設定」でメニューバーの表示位置を指定します。

一番上にある「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れると、新しく作成する固定ページがすべてメニューに追加されてしまいます。

基本的にはチェックを入れないほうが良いでしょう。

「メニューの位置」で設定できる項目はテーマによって異なります。

メニューバーを表示させたい位置の項目にチェックを入れましょう。

一般的には、ヘッダーやフッターに表示させます。

外観 ＞ メニュー ＞ 「メニューを編集」タブで画面右下の「メニューを保存」ボタンを押下します。

各設定をおこなう度に、保存することを忘れないようにしましょう。

メニューバーに表示する項目が多過ぎると、メニューバーが途中で改行されてしまい1行に収まらない場合があります。

ユーザーの閲覧するデバイスによって画面の幅は変わりますので、自分のパソコンで綺麗に表示されるからといって安心はできません。

その場合はメニュー項目に親子関係の階層を作り、サブメニューを設定しましょう。

サブメニューをプルダウンで表示させることで、すっきりとしたビジュアルにできます。

外観 ＞ メニュー ＞ 「メニューを編集」タブ画面の「メニュー構造」に並んだ各メニューからサブメニューにしたい項目をドラッグし、親メニューにしたい項目の下まで持っていきます。

すると、サブメニューを入れるボックス（一段、右にずれている）が現れるので、そこにドロップすればOKです。

ちなみに、固定ページ・投稿・カスタムリンク・タグといった項目の種類を問わず、親子関係を作ることができます。

設定を変更したら「メニューを保存」ボタンを押下するのを忘れないようにしてください。

メニューを複数作った場合は、「位置の管理」で設定を追加すれば、各メニューの表示位置を一括で管理できます。

外観 ＞ メニュー画面で「位置を管理」タブを選択します。

「テーマの位置」はヘッダーやフッターなどWebサイト上での表示位置です。

「指定されたメニュー」で、各表示位置にどのメニューを表示させるかを選択します。

最後に「変更を保存」ボタンを押下してください。

外観 ＞ メニュー画面で、「メニューを編集」タブを選択します。

「メニュー構造」に並んだ項目一覧から削除したい項目の▼マークを押下すると、その項目の設定画面が開きます。

「削除」を押下すると、その項目だけをメニューバーから削除することが可能です。

最後に「メニューを保存」を押下してください。

「Menu Image」はメニューバーへ画像やアイコンを設定できるプラグインです。

アイコンなどの画像情報は、テキストなどの文字情報よりも、より素早く・より多くの情報を読み手に伝えることができます。

メニューにアイコン画像を設定することで、わかりやすくイメージが湧きやすいメニューバーを作ることができるのですね。

WordPressの初期設定では、メニューはテキストで表示されるため、自力でメニュー画像を入れるにはmenuファイルの編集が必要になります。

しかし「Menu Image」を使えば、プログラムの知識が少ない初心者でも、簡単にメニューバーへ画像を設定することができます。

2021年6月現在、プラグイン公式ページの本文は英文のみですが、インストール後は日本語表記に対応しているので安心です。

「WP Responsive Menu」はスマートフォンに対応するナビゲーションメニューを手軽に作成できるWordPressプラグインです。

現在、Webサイトはスマホなどのモバイル端末からの閲覧が主流であるため、Googleもスマホから見やすい表示（レスポンシブ対応）を推奨しています。

SEOに有利なることはもちろん、スマホ閲覧者の滞在時間が改善したり、コンバージョンにも好影響を期待することができます。

2021年6月現在は日本語未対応ですが、日本語の解説記事はインターネット上で見つけることができます。

「WP Mobile Menu」はスマートフォンでの閲覧に適したレスポンシブ対応メニューを追加できるWordPressプラグインです。

有料バージョンと無料バージョンがありますが、無料バージョンでも使える機能が多数搭載されています。

無料で使える機能は以下のとおりです。

2021年6月現在は日本語に未対応ですが、日本語の解説記事はインターネット上で見つけることができます。

「Max Mega Menu」はメニューのビジュアルを細かくカスタマイズできるWordPressプラグインです。

メニューを大きく表示したい、画像を表示させたいなど、デザインやレイアウトにこだわりたい場合に役に立ちます。

「Max Mega Menu」で設定できる項目は以下のとおりです。

2021年6月現在は日本語に未対応ですが、日本語の解説記事はインターネット上で見つけることができます。

ここではWordPressプラグインをインストールする方法について解説します。

方法は2種類あります。

まず、WordPress管理画面の左メニューから「プラグイン」 ＞ 「新規追加」を選択してください（①・②共通）

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です！

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。