ワードプレス メニューの作り方を徹底解説【初心者でも簡単にできる】

WordPress メニューバーの作成・設定方法
ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

ここでは、ワードプレスで下記のようなメニュー(グローバルナビゲーション)を作成するやり方を解説していきます。

 

HTML・CSSとか全然わからないんですが、それでもワードプレスでメニューバーを作れますか?
はい!大丈夫ですよ。ワードプレスにはメニューバーを簡単に設定する機能がありますので、初心者の方でも簡単にメニューバーを設定できます。ここではそのやり方をご紹介していきますね!
 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

 

 

ワードプレス メニューの作り方

ここでは、下記のようにワードプレスでメニュー(グローバルナビゲーション)を作成するやり方をご紹介します。
ワードプレスで設定するメニューバーの例
 


 

(※)メニューの位置や見え方はテーマによって異なります。ここでは有名な無料テーマ「Lightning」を利用した例で説明しています。
 

今回メニューを作成する大きなステップは下記の通りです。

メニューバーを作成する概要手順

  1. 事前に各メニューリンク先となる固定ページを作成する
  2. メニューバーを作成する。1で作成した各固定ページをメニュー項目として配置する

 

事前にメニュー項目となるページを作成する

まずは事前準備として、ここでは下記の固定ページを作成しておきます。

事前に作成しておく固定ページの例

  • HOME
  • お問い合わせ
  • お客様の声
    • スクール受講生の声
    • セミナー受講生の声
    • 法人様の声
  • ブログ
  • 会社情報

 

事前に作成しておく固定ページ
 

固定ページの作り方については「【初心者でもわかる】ワードプレス 固定ページの使い方を徹底解説」をご参考ください。
 

▲▲目次に戻る▲▲

メニューバーを作成する

リンク先となる固定ページが作成できたら、いよいよメニューを作成していきます。管理画面から外観>メニューの設定を選択します。

WordPress 外観>メニュー

WordPress 外観>メニュー

 

まずメニューを作成します。ここでは、「メインメニュー」(※)と入力してメニューを作成ボタンを押下します。
メインメニューと入力してメニューを作成する
(※)名称はなんでもOKです。
 

メインメニューが作成されました。以下はメニューバーの構成です。
左側のメニュー項目となる任意のページをメニューバーに設定します。最後にどの位置に設定するかを決めて保存します。
メニューバーの構成

 

ここでは事前に作った固定ページの項目をチェックして、「メニューに追加」ボタンを押下します。
事前に作成した固定ページにチェックを入れてメニューバーに追加ボタンを押下する
 

追加したメニューは、ドラッグ&ドロップでメニューの順番を変えることができます。

 

最後にメニューの設定を行います。ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します。
ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します
 
(※)Header NavigationとFooterNavigationという名称はご利用のテーマによって違います。また、テーマによっては1つしかチェックができない場合も3つある場合もあります。
 
以上で、メニューの追加は完成です。

最後に設定した、メニューの設定でHeader NavigationとFooterNavigationにチェックを入れたのは、何をしたのでしょうか??
最後のメニューの設定は、作成したメニューをどこに配置するかを設定します。
本例では、ヘッダーの位置とフッターの位置に配置できるので、両方にチェックを入れてメインメニューを表示しています。
 

ヘッダーとフッターの両方に作成したメインメニューが表示される
ヘッダーとフッターの両方に作成したメインメニューが表示される
 

(※)複数のメニューを作成して使うやり方も可能です。
 

▲▲目次に戻る▲▲

色々なメニューの設定

メニュー項目を一段ずらすと副項目になる

メニューに親子関係・階層をもたせたい場合には、該当メニュー項目を一段ずらすと副項目になります。
メニュー項目を一段ずらすと副項目になります
 

受講生の声に副項目(セミナー受講生の声、スクール受講生の声、法人の声)を設定した例

 

投稿やカテゴリー、任意のURL(カスタムリンク)もメニューに追加できる

固定ページ以外にもメニュー項目とすることができます。

  • 固定ページ
  • 投稿
  • カスタムリンク
  • カテゴリー
  • (※)カスタム投稿タイプ
  • (※)カスタム分類

 

■投稿では、投稿の各ページをメニューバーに追加することができます。
投稿をメニューに追加できる
 

■カスタムリンクでは、任意のURL(外部のサイトでも可能)をメニューバーに追加することができます。
カスタムリンクをメニューに追加できる
 

■カテゴリーでは、カテゴリー一覧ページをメニューバーに追加することができます。
カテゴリー一覧ページをメニューに追加できる
 

▲▲目次に戻る▲▲

各メニュー項目の編集

メニュー項目の表示名は▼を押して変更できます。

WordPress メニュー項目(▼)で編集できる

メニュー項目(▼)で編集できる

 

任意の名前にメニューの表示名を変更することができます。

WordPress 外観>メニューの設定 リネーム

WordPress 外観>メニューの設定 リネーム

 

同様に▼(▲)を押して削除リンクから削除することもできます。

WordPress 外観>メニューの設定 削除

WordPress 外観>メニューの設定 削除

 

メニュー表示設定を増やす

メニューの表示設定を増やすことでさらに色々な設定ができるようになります。
表示オプションをクリック
 

ここでは、表示オプションでリンクターゲットと説明にチェックを入れてみましょう。
表示オプションでリンクターゲットと説明にチェックを入れます
 

メニュー項目に説明の設定をする

メニュー項目に説明欄が増えました。テーマが説明欄に対応しているとメニューに説明も表示されるようになります。
メニュー項目に説明欄が増えました。テーマが説明欄に対応しているとメニューに説明も表示されるようになります。
 

Lightnigでは、メニューの下部に説明欄に入力した情報(本例ではCompany)が表示されます。
メニュー 会社情報の下に説明欄に入力した情報(Company)が表示される
 

メニュー項目にリンクを新しいタブで開くにチェックを入れる

メニューオプションでリンクを新しいタブで開くにチェックを入れると、該当メニューをクリックすると新しいタブで開くようになります。
メニューオプションでリンクを新しいタブで開くにチェックを入れる
 

 

複数のメニューを作成してヘッダー用メニュー・フッター用メニューを使い分ける

複数のメニューを作成してヘッダー用メニュー・フッター用メニューを使い分けることもできます。

複数のメニューを作成??
たとえばヘッダーには利用者がよく使うメニューを載せておき、フッターにはプライバシーポリシーや特定商取引法表記など注意書き的な項目を表示して使い分けることなどができます。
 

■フッターメニューには、プライバシーポリシー・特定商取引法の表記などを表示する。
ヘッダーとフッターの両方に作成したメインメニューが表示される
 

ここでは、新たに「プライバシーポリシー」と「特定商取引法の表記」を固定ページで事前に追加しておき、新たにフッターメニューを作成してみましょう。

「新規メニューを作成」をクリックします。
新規メニューを作成をクリックする
 

メニュー名に「フッターメニュー」と入力してメニューを作成ボタンを押下します。
メニュー名に「フッターメニュー」と入力してメニューを作成ボタンを押下する
 

フッター用に作った固定ページをメニューに追加します。
フッター用の固定ページをメニューに追加する
 

Footer Navigationにチェックを入れます。
Footer Navigationにチェックを入れる
 

FooterNavigationでフッターメニューが表示されていることが確認できました。
FooterNavigationでフッターメニューが表示されていることが確認できた
 

なお、複数メニューを作成すると、メニュー設定時にどのメニューを選択するか選ぶ必要があります。今回であればメインメニューとフッターメニューを選択して各メニューを編集するようにしてください。

 

▲▲目次に戻る▲▲

まとめ

今回は、ワードプレスでメニュー(ナビゲーション)の作り方および、下記の項目について説明しました。
 

  • メニューの作り方
  • メニュー(副項目)の作り方
  • メニュー項目の表示名の変え方
  • メニュー項目の表示名の変え方
  • メニューオプションの設定
  • 複数メニューを使い分ける方法

 

WordPressを利用することでメニューも簡単に作成することができますので、ぜひしっかりマスターしてください。
 

ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 スタンダート48時間コースとプロフェッショナル80時間コースから選択して受講できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ