WordPress メニューバーの作成・設定方法

WordPress

【WordPressヘッダーメニューバーの作り方と設定方法】

2017年5月30日

WordPress(ワードプレス)で初めてホームページやブログを作成する際にメニューバーをどうやって設定したら良いのかわからない人も多いのでしょうか。
 

今回は、初心者を対象にWordPressで下記のようなメニューバー(グローバルナビゲーション)を作成するやり方を解説していきます。


 

HTML・CSSとか全然わからないんですが、それでもワードプレスでメニューバーを作れますか?

はい!大丈夫ですよ。ワードプレスにはメニューバーを簡単に設定する機能がありますので、初心者の方でも簡単にメニューバーを設定できます。ここではそのやり方をご紹介していきますね!

 

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


 


 

【基本編】WordPressでメニューバーを作る方法

まずはメニューバー(グローバルナビゲーション)を作る基本的な方法をご紹介します。今回は、下記のようなメニューを作成する例で説明していきます。
ワードプレスで設定するメニューバーの例
 


 

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

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

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

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

 

【ステップ1】事前にメニュー項目となるページを作成する

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

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

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

 

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

関連記事

固定ページの作り方については「【ブロックエディター版】WordPressの固定ページの使い方を徹底解説」をご参考ください。

 

【ステップ2】外観>メニューでメニューバーを作成する

リンク先となる固定ページが作成できたら、いよいよメニューを作成していきます。
 

メニューの作り方としては、下記の3つの手順になります。

  1. 外観>メニューから箱(入れ物)となるメニューを作る
  2. 上記で作ったメニューに固定ページなどのメニューアイテムを割り当てる
  3. 最後に作成したメニューの位置を決める

 

WordPress メニューバーの概念
 
■実際の設定画面は下記のとおり
メニューバーの構成
 

まず、管理画面から外観>メニューの設定を選択します。

WordPress 外観>メニュー

WordPress 外観>メニュー


 

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

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

(※)固定ページがたくさんあり表示されていない固定ページがある場合は「全て表示」タブを選択すると全て表示されます。
全て表示で全ての固定ページを表示
 

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


 

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

最後に設定した、メニューの設定でHeader NavigationとFooterNavigationにチェックを入れたのは、何をしたのでしょうか??

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

 

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

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

補足)固定ページHOMEをトップページに割り当てる方法
ところで、トップページに固定ページHOMEを割り当てたいんですけどどうしたらよいんでしょうか??
メニューバーのHOMEを押してもトップページに移動しないんですが・・

固定ページをトップページに割り当てるには、設定>表示設定から設定できますよ。

 

表示設定 トップページに固定ページを設定する
 

任意の固定ページをトップページに割り当てる詳しい説明については「WordPressで固定ページをトップページにする設定方法」をご参考ください。

 

【応用編1】固定ページ以外をメニュー項目に割り当てる

先ほどは固定ページをメニュー項目として追加する方法をご説明しましたが、固定ページ以外にもメニュー項目とすることができます。
 

追加できるメニュー項目は下記のとおりです。

追加できるメニュー項目(メニューアイテム)

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

(※)カスタム投稿タイプやカスタムタクソノミー(カスタム分類)を追加すると、新たにメニュー項目に追加されるようになり、追加が可能になります。
カスタム投稿タイプとカスタムタクソノミーって何?という方は「WordPress カスタム投稿タイプとカスタムタクソノミー(カスタム分類)を徹底解説」を合わせてご参照ください。
 
 

【カスタムリンク】任意のリンク先をメニューに追加する機能

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

「カスタムリンク」からURLと表示名を入力して追加します。

別のドメインのホームページ・ブログをメニューに追加したい場合とか、トップページに固定ページを割り当てていない場合とかに使えそうですね!

 
 

【カテゴリー】投稿カテゴリーをメニューに追加する

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

カテゴリーから任意のカテゴリーを選択してメニューに追加します。


 

カテゴリーがたくさんあって表示されないカテゴリーがある場合は「全て表示」を選択しましょう。
全て表示で全てのカテゴリーを表示
 

ブログ・アフィリエイトをしている方は、カテゴリーをメニューバーに追加することで訪問者がわかりやすくなります。

 

【投稿】投稿の各記事をメニューに追加する

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

投稿から任意の投稿ページを選択してメニューに追加します。


 

投稿がたくさんあって表示されない投稿がある場合は「全て表示」を選択しましょう。
全て表示で全ての投稿を表示
 

【応用編2】色々なメニューの設定

WordPressのメニュー機能は、上記で紹介した設定以外にも、色々な設定が可能です。ここでは知っておくと便利なメニューバーの設定方法をいくつかご紹介していきます。
 

【サブメニュー】メニュー項目を一段ずらして副項目にする

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

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


 

【表示名称】各メニューの表示名称を編集する

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

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

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


 

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

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

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


 
ちなみに、上記の方法で変更したのはあくまで「メニューの表示名」ですので、実際の固定ページのタイトルなどは変更ありません。

 

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

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

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


 

こちらも同様に、あくまでメニューから表示しないようにしただけで、実際の固定ページが削除されたわけではありません。

 
 

【表示オプション追加】メニュー表示設定を増やす

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

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

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

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

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

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

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


 

【複数メニュー作成】メニューを複数作成して位置に合わせて使い分ける

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

複数のメニューを使い分ける
 

複数のメニューを作成??

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

 

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

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

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

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

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

Footer Navigationにチェックを入れて保存します。
Footer Navigationにチェックを入れる
 

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

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


 

複数のメニューを利用する場合は後述の「位置の管理」を使って設定すると便利ですよ。

 
 

【位置の管理】位置の管理で複数のメニューを一元管理

位置の管理で各メニューをどこに配置するか設定ができます。
メニュー>位置の管理
 

位置の管理から、各メニューを編集することができます。

複数のメニューと位置管理を設定できるので便利ですね!

 
 

まとめ WordPressメニューバーの作り方

まとめです。今回は、WordPressでメニュー(ナビゲーション)を作る方法について、下記の内容で説明しました。
 

  • メニューの作り方基本
  • 固定ページ以外をメニューに割り当てる方法(カスタムリンク、カテゴリー、投稿)
  • メニュー(副項目)の作り方
  • メニュー項目の表示名の変え方
  • メニューオプションの設定
  • 複数メニューを使い分ける方法

 

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

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

合わせて読みたい記事

WordPressの基本的な使い方を「【2019年度版 WordPress使い方総まとめ】ワードプレスの使い方を徹底解説」にまとめました。WordPressの使い方をしっかり覚えたい方はあわせてご参考ください。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-,

© 2020 WEBST8のブログ Powered by AFFINGER5