ワードプレスを整える

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

もりのゆか

こんにちは@moriyuka317 もりのです^^

今日は、

  • ワードプレスにメニューバーを作りたい
  • ナビゲーションメニューが何のことかわからない
  • そもそもメニューバーの作り方がわからない

こんな風に、「ワードプレスのメニューバーの作成」に悩まれている方に向けて「メニューバーの作り方と、設定方法」についてわかりやすくお伝えします。

今日の記事を読んでいただけると

・ワードプレスのメニューバーを作れる
・ナビゲーションメニューが設置できる
・ピックアップメニューが設置できる
・スマホ画面用のメニューが作成できる

ぜひ最後まで読んでみてください。

WordPressに設置できるメニューの種類

まずは、ワードプレスのメニューの種類についてお伝えします。

もりのゆか

私はメニューって1種類だけ作成すればいいと思ってたんですが、実は場所によって変更することが可能なんです

WordPressのメニューに追加できる項目の種類は以下の通りです。

  1. グローバル(ナビゲーション)メニュー
  2. ピックアップコンテンツ
  3. フッターメニュー
  4. 【スマホ用】ボタンメニュー
  5. 【スマホ用】フッターメニュー

(※テーマによってメニュー名が違うこともあります。ちなみに私が使っているワードプレスのテーマはJINです)

「メニューだけでもこんなに・・」と、
パソコンが苦手な人はパタン…とパソコンを閉じてしまうかもしれませんね(笑)

でも安心してください!専門用語が多いので、画像を使いながらもう少し噛み砕いて説明していきます。

まず、各メニューの位置はこちらです。
(パソコン画面の上部↓↓)

メニュー

①グローバル(ナビゲーション)メニュー
これがメインのメニューになります。
②ピックアップコンテンツ
なくてもOKですが、設置すると結構目立ちます!
(パソコン画面の下部↓↓)

メニュー1

③フッターメニュー
サイトの一番下にあるメニューです。

(続いてスマホで見た画面↓↓)

メニュー2

【スマホ用】ボタンメニュー
右上の3本ラインの入ったボタンをタップすると現れるメニューです。
⑤【スマホ用】フッターメニュー
スマホの一番下にあるメニューです。

これらのメニューは各場所ごとに内容を変えることも可能です。
(もちろん全て同じでもOK)

それでは次の章からメニューバー設置のやり方をお伝えしていきます。

WordPressでメニューバーを作る方法

まず、メニューバーに追加できる項目は以下の通りです。

これらの項目のうち、どのページをどの場所に入れるかをまず決めておきましょう!

1.ワードプレス管理画面からメニュー設定へ

WordPress管理画面にある左側のメニューから
【外観】≫【メニュー】を選択します。

メニューバーの設定1
もりのゆか

今回は実際に私が設定しているページを追加していきます。

2. 新しいメニューを作成

「メニュー」画面が開いたら「新しいメニューを作成しましょう」の青いリンクをクリックします。

メニューバーの設定2

まず、「メニュー名」を入力します。

もりのゆか

ここでは『グローバルナビゲーション』と入力しましたが、自分がわかればなんでもOKです!

何種類かメニューを作成する予定のある方は、
設置する場所の名前(ヘッダー・フッター・ピックアップ)などを入れておくとわかりやすいかもしれません。

その後、設置したい位置(場所)にチェックを入れ、「メニューを作成」をクリックします。
(ここではグローバルメニューにチェックを入れます)

3. メニューへ項目を追加する

メニューが作成できたら、次に「項目を追加」していきます。

今回は左から

ホーム提供中のメニューお客様の声お問い合わせ

を作成していきます。

ちなみにこれらの項目は

■ホーム→(カスタムリンク)
■提供中のメニュー→(固定ページ)
■お客様の声→(カスタムリンク)
■お問い合わせ→(固定ページ)

で作成してありますので、それぞれの項目を追加していきます。

カスタムリンク

まずは「ホーム」というメニューを作成します。

「ホーム」は自分のブログのトップページになるので、ここはカスタムリンクを追加していきます。

自分のブログの「URL」を準備しておきましょう

左側の「メニュー項目を追加」から「カスタムリンク」の箇所を開きます。
(「▼」をクリックすると開きます)

メニュー項目

すると、

  1. URL
  2. リンク文字列

を入力する欄が出てきます。

ホームをクリックすると自分のブログのTOPページに移動して欲しいので、ここには自分のブログのURLを入力します。

リンク文字列にはメニューバーに表示させたい文字(ここでは「ホーム」)を入力します。

メニューバーの設定3

入力できたら「メニューに追加」します。

固定ページ

続いて、「現在提供中のメニュー」というメニューを追加していきます。

このページは固定ページで作成していますので、固定ページを追加していきます。
「固定ページ」の箇所を開くと

  1. 最近
  2. すべて表示
  3. 検索

のタブと、記事一覧が出てきます。

メニューバーの設定4


ここから追加したいページを見つけ、✅を入れたら「メニューに追加」を押して追加します。

もりのゆか

投稿ページ・カテゴリーも同じ手順になります。

ピックアップコンテンツ

ピックアップコンテンツとはグローバルメニューとは別のメニューで、
ヘッダーの下に最大4つの画像付きのバナーを設置することができます。
(※テーマによっては名前が違うことがあります)

もりのゆか

ピックアップコンテンツは3つでも2つでもいいのですが、個人的に4つ設定しておく方がバランスが取れてキレイです^^

手順は先ほどお伝えした手順と同じです。

私はピックアップコンテンツのメニューには「カテゴリー」を追加していますので、その方法をお伝えしていきます。

まずはメニュー項目を追加ところから「カテゴリー」を選択します。

メニュー項目

ここで、ピックアップメニューにしたいカテゴリーを4つ選び、「トップページのピックアップコンテンツ」に✅を入れます。

すると、下の画像のようなメニューが完成します。

「画像がなくて真っ白なんだけど!!」

という人は、ワードプレスの管理画面から、「投稿」≫「カテゴリー」≫「カテゴリー編集画面」に移動し、

(画像を追加したい)「カテゴリー」≫「編集」≫「アイキャッチ画像の設定」からお好きな画像を設定しましょう!

サブメニューを作る

次に、メニューバーにマウスをのせると下の列に現れる「サブメニュー」を作成していきます。

下の画像のように、メニュー設定の画面で「メニュー追加」をし終わった後、
「サブメニュー」にしたい項目を少し右にずらします。

その際の注意点としては

サブ項目は「親メニューのすぐ下」に配置する

上の画像では

「現在提供中のメニュー」の下に
「ワードプレス記事作成依頼のお知らせ」という項目をサブにしました。

そうすることで下の画像のようにサブ項目になります。

メニューバーを作成する前に準備しておくこと

メニューバーを作成する前に準備しておくこととしては「メニュー」にするための以下の4つの項目です。

  1. 固定ページ
  2. 投稿ページ
  3. リンク
  4. カテゴリー

これらのページがないとメニューが作成できませんので、まだ作成してない方は作っておきましょう♩

カテゴリーの作成方法に関してはこちらを参考にしてください。

カテゴリーの決め方と設定方法
ブログのカテゴリーの決め方のコツと設定方法 もりのゆか こんにちは@moriyuka317 もりのです^^ 今日は、 ワードプレスのカテゴリーを作りたいカテゴリーを...

まとめ

メニューはあなたのサイトに来てくれた訪問者が最初に目に入る部分です。パッとみただけであなたのブログには「どんな内容があるのか」がわかるようにしておきましょう♩

トラストコーチングスクール

“コミュニケーションが武器になる”

トラストコーチングスクールは、コーチングを受けながらコーチングの技術を学べる新しい形のスクールです。
全てのプログラムはベーシック講座からスタートし、ニーズにあったステップへ進むことができます。コーチングを体系的に学び「認定コーチ」の資格を取得し、コーチとして活動することもできます。

トラストコーチング講座を受講する