今日は、
- ワードプレスにメニューバーを作りたい
- ナビゲーションメニューが何のことかわからない
- そもそもメニューバーの作り方がわからない
こんな風に、「ワードプレスのメニューバーの作成」に悩まれている方に向けて「メニューバーの作り方と、設定方法」についてわかりやすくお伝えします。
今日の記事を読んでいただけると
・ワードプレスのメニューバーを作れる
・ナビゲーションメニューが設置できる
・ピックアップメニューが設置できる
・スマホ画面用のメニューが作成できる
ぜひ最後まで読んでみてください。
目次
WordPressに設置できるメニューの種類
まずは、ワードプレスのメニューの種類についてお伝えします。
私はメニューって1種類だけ作成すればいいと思ってたんですが、実は場所によって変更することが可能なんです
WordPressのメニューに追加できる項目の種類は以下の通りです。
- グローバル（ナビゲーション）メニュー
- ピックアップコンテンツ
- フッターメニュー
- 【スマホ用】ボタンメニュー
- 【スマホ用】フッターメニュー
（※テーマによってメニュー名が違うこともあります。ちなみに私が使っているワードプレスのテーマはJINです）
「メニューだけでもこんなに・・」と、
パソコンが苦手な人はパタン…とパソコンを閉じてしまうかもしれませんね（笑）
でも安心してください！専門用語が多いので、画像を使いながらもう少し噛み砕いて説明していきます。
まず、各メニューの位置はこちらです。
（パソコン画面の上部↓↓）
①グローバル（ナビゲーション）メニュー
これがメインのメニューになります。
②ピックアップコンテンツ
なくてもOKですが、設置すると結構目立ちます！
（パソコン画面の下部↓↓）
③フッターメニュー
サイトの一番下にあるメニューです。
（続いてスマホで見た画面↓↓）
④【スマホ用】ボタンメニュー
右上の3本ラインの入ったボタンをタップすると現れるメニューです。
⑤【スマホ用】フッターメニュー
スマホの一番下にあるメニューです。
これらのメニューは各場所ごとに内容を変えることも可能です。
（もちろん全て同じでもOK）
それでは次の章からメニューバー設置のやり方をお伝えしていきます。
WordPressでメニューバーを作る方法
まず、メニューバーに追加できる項目は以下の通りです。
- 固定ページ
- 投稿ページ
- カスタムリンク
- カテゴリー
- CTA
これらの項目のうち、どのページをどの場所に入れるかをまず決めておきましょう！
1.ワードプレス管理画面からメニュー設定へ
WordPress管理画面にある左側のメニューから
【外観】≫【メニュー】を選択します。
今回は実際に私が設定しているページを追加していきます。
2. 新しいメニューを作成
「メニュー」画面が開いたら「新しいメニューを作成しましょう」の青いリンクをクリックします。
まず、「メニュー名」を入力します。
ここでは『グローバルナビゲーション』と入力しましたが、自分がわかればなんでもOKです！
何種類かメニューを作成する予定のある方は、
設置する場所の名前（ヘッダー・フッター・ピックアップ）などを入れておくとわかりやすいかもしれません。
その後、設置したい位置（場所）にチェックを入れ、「メニューを作成」をクリックします。
（ここではグローバルメニューにチェックを入れます）
3. メニューへ項目を追加する
メニューが作成できたら、次に「項目を追加」していきます。
今回は左から
| ホーム | 提供中のメニュー | お客様の声 | お問い合わせ |
を作成していきます。
ちなみにこれらの項目は
■ホーム→（カスタムリンク）
■提供中のメニュー→（固定ページ）
■お客様の声→（カスタムリンク）
■お問い合わせ→（固定ページ）
で作成してありますので、それぞれの項目を追加していきます。
カスタムリンク
まずは「ホーム」というメニューを作成します。
「ホーム」は自分のブログのトップページになるので、ここはカスタムリンクを追加していきます。
左側の「メニュー項目を追加」から「カスタムリンク」の箇所を開きます。
（「▼」をクリックすると開きます）
すると、
- URL
- リンク文字列
を入力する欄が出てきます。
ホームをクリックすると自分のブログのTOPページに移動して欲しいので、ここには自分のブログのURLを入力します。
リンク文字列にはメニューバーに表示させたい文字（ここでは「ホーム」）を入力します。
入力できたら「メニューに追加」します。
固定ページ
続いて、「現在提供中のメニュー」というメニューを追加していきます。
このページは固定ページで作成していますので、固定ページを追加していきます。
「固定ページ」の箇所を開くと
- 最近
- すべて表示
- 検索
のタブと、記事一覧が出てきます。
ここから追加したいページを見つけ、✅を入れたら「メニューに追加」を押して追加します。
投稿ページ・カテゴリーも同じ手順になります。
ピックアップコンテンツ
ピックアップコンテンツとはグローバルメニューとは別のメニューで、
ヘッダーの下に最大4つの画像付きのバナーを設置することができます。
（※テーマによっては名前が違うことがあります）
ピックアップコンテンツは３つでも２つでもいいのですが、個人的に４つ設定しておく方がバランスが取れてキレイです＾＾
手順は先ほどお伝えした手順と同じです。
私はピックアップコンテンツのメニューには「カテゴリー」を追加していますので、その方法をお伝えしていきます。
まずはメニュー項目を追加ところから「カテゴリー」を選択します。
ここで、ピックアップメニューにしたいカテゴリーを４つ選び、「トップページのピックアップコンテンツ」に✅を入れます。
すると、下の画像のようなメニューが完成します。
「画像がなくて真っ白なんだけど！！」
という人は、ワードプレスの管理画面から、「投稿」≫「カテゴリー」≫「カテゴリー編集画面」に移動し、
（画像を追加したい）「カテゴリー」≫「編集」≫「アイキャッチ画像の設定」からお好きな画像を設定しましょう！
サブメニューを作る
次に、メニューバーにマウスをのせると下の列に現れる「サブメニュー」を作成していきます。
下の画像のように、メニュー設定の画面で「メニュー追加」をし終わった後、
「サブメニュー」にしたい項目を少し右にずらします。
その際の注意点としては
上の画像では
「現在提供中のメニュー」の下に
「ワードプレス記事作成依頼のお知らせ」という項目をサブにしました。
そうすることで下の画像のようにサブ項目になります。
メニューバーを作成する前に準備しておくこと
メニューバーを作成する前に準備しておくこととしては「メニュー」にするための以下の４つの項目です。
- 固定ページ
- 投稿ページ
- リンク
- カテゴリー
これらのページがないとメニューが作成できませんので、まだ作成してない方は作っておきましょう♩
カテゴリーの作成方法に関してはこちらを参考にしてください。
まとめ
メニューはあなたのサイトに来てくれた訪問者が最初に目に入る部分です。パッとみただけであなたのブログには「どんな内容があるのか」がわかるようにしておきましょう♩
- 【ラジオ#1】 傷つきやすい自分はもう嫌！強くなりたいって方へ
- ブログに動画（YouTube）を埋め込む方法【グーテンベルク編】
- WordPressメニューバーの作り方・設定方法
- ブログのカテゴリーの決め方のコツと設定方法
- 簡単３ステップ！canvaでワードプレスのテーマカラーのパレットを作る方法
