バズログ BUZZLOG

MENU

2019-01-22ホームページ制作

サクッとできる!WordPressのナビゲーションメニューの作り方

かまとりーぬ 4

目次

WordPressでメニューを表示させる方法って、どうやってやるの?

上記の様にお悩みでは無いでしょうか?

WordPressで作成中のサイト等にメニューを追加する事で、サイト内のナビゲーションを向上させる事が出来ます。メニューの作成はユーザー側からしてもSEO的にも、作成した方が良いでしょう。

今回はそんな便利なメニューの作成方法について詳しく解説していきます。

1:WordPressでナビゲーションメニューを作成する方法

WordPressのメニュー作成方法について紹介していきましょう。

メニューとは、ヘッダー部分の下に位置するナビゲーションメニューの事です。

メニュー 位置

バズログのサイトでいうと、赤色で囲った部分をメニューと呼びます。

メニューを作成する事で、ユーザーがサイトへ訪問した際に「どこに何があるのか」直ぐに見つける事が可能になります。またメニューを作成する事で、Googleの検索ロボット「クローラー」も巡回しやすくなりSEO対策にも繋がるのです。今回は、そんなメニューの作成に関する4つの事を順に紹介していきます。

  • ① メニューの作成方法
  • ② 並び替える方法
  • ③ ドロップダウンメニューにする方法
  • ④ メニューを削除する方法

上記4つの方法を手順に沿って詳しく紹介していきましょう。

ぜひメニュー作成の参考にしてみて下さい。

1-1:作成方法

メニューの作成方法を紹介していきます。

WordPress管理画面から簡単に作成する事が可能です。

(1) 外観→「メニュー」選択

WordPress メニュー

(2) 「新規メニューを作成」選択

画面上部に「編集するメニューを選択:または新規メニューを作成してください。」と表記されています。

「新規メニューを作成」をクリックして下さい。

WordPress メニュー

(3) 新規メニュー作成ページにて「任意のメニュー名」を入力

メニュー名に任意のメニュー名を入力します。

分かりやすい様にグローバルメニューや、ナビゲーションメニュー等にすると良いでしょう。

入力後、右の「メニューを作成」をクリックします。

WordPress メニュー

(4) メニュー作成画面

メニューの作成画面になります。

画面左のカラムからメニュー項目を追加していきましょう。

WordPress メニュー作成

(5) メニューに追加する項目を選択

固定ページ・投稿・カスタムリンク・カテゴリーの中から、メニューに追加したい項目を選択し「メニューに追加」を選択しましょう。

WordPress メニュー項目

(6) メニュー構造に項目が追加される

項目を選択するとメニュー構造に追加されます。

WordPress メニュー

(7) メニュー設定の中から「グローバルナビ」を選択し「メニューを保存」をクリック

画面下の「メニュー設定」でメニューをどこに表示させるか選択します。

グローバルナビ」を選択し「メニューを保存」をクリックしましょう。

WordPress メニュー

(8) メニューの作成完了

プレビューでサイトを確認してみると、メニューが追加されています。

以上が基本的なメニューの作成方法です。

WordPress メニュー

1-2:並び替える方法

メニュー項目を並び替える方法を紹介します。

メニュー項目を選択し、追加しただけでは並び順がグチャグチャです。

そんな時はドラッグ&ドロップをするだけで簡単に並び替える事が出来ます。

(1) 並び順を変更したい項目をクリックして、おきたい場所に持っていく

たったこれだけで自由にメニュー項目の並び順を変更する事が可能です。

メニュー 並び替え

1-3:ドロップダウンメニューにする方法

ドロップダウンメニューにする方法を紹介します。

ドロップダウンメニューにする方法も、ドラッグ&ドロップで項目を副項目に追加するだけで簡単に設定する事が可能です。※クローラーの巡回が悪くなる可能性があるので、オススメではありません。

(1) 親メニュー直下にドラッグ&ドロップする

親メニューにまとめたい項目をドラッグ&ドロップで、親テーマ直下右側に持っていきます。

まとめた項目に「副項目」もしくは「サブアイテム」と記載されていればOKです。

ドリップダウンメニュー

(2) ドロップメニューの設定が完了

カテゴリー1にマウスを持っていくと、下記画像の様にカテゴリー1の下に副項目として選択したメニューが表示されます。

ドロップダウンメニュー

1-4:メニューを削除する方法

メニューに設定した項目を削除する方法を紹介します。

(1) 消去したい項目の「▼」をクリック

wordpress メニュー削除

(2) 「削除」クリック

wordpress メニュー削除

(3) 削除完了

wordpress メニュー

2:メニューを画像で表示させる方法

WordPressでメニューを設定した!でも何か物足りないな〜。

サイトをより格好良くする為に、メニュー項目名を画像に置き換える事が出来ます。画像に置き換える事によって、文字のみのデザインよりも更に良いデザインになるでしょう。

ただしメニュー名を画像に置き換えると、alt属性の設定がされていないのでSEO的にはマイナスポイントになります。その点は気にせずにメニュー項目を画像に設定したい!

そんな時には便利なプラグインNav Menu Imagesを使うとCSSを編集せず簡単に画像へ置き換える事が可能です。また、alt属性も画像アップロード後に設定する事が出来ます。

100%画像への置き換えはNGという事では無いので、ぜひ参考にしてみて下さい。

2-1:画像設定の手順

メニューに表示する項目名を画像に置き換える方法を紹介します。

まずはプラグインをインストールして有効化する所から進めていきましょう。

(1) プラグイン→「新規追加」

WordPress プラグイン

(2) 「Nav Menu Images」をインストール

Nav Menu Images」を検索しインストールしましょう。

Nav Menu Images

(3) インストール完了後「有効化」クリック

Nav Menu Images

(4) メニュー編集画面にアクセス

プラグインの有効化が完了したら、いよいよ画像を設定します。

外観→メニューの順に進み、メニューの編集画面にアクセスしましょう。

(5) 画像に設定するメニュー項目(▼)をクリックし「Upload menu item image」クリック

Nav Menu Images

(6) 画像をアップロードして選択し「アイキャッチ画像に設定」クリック

メニュー画像

(7) 画像の指定が完了

メニュー画像

同じ様に他のメニュー項目にも画像を設定し保存しましょう。

画像の設定完了後、メニューに表示されます。

wordpress メニュー

3:ナビゲーションメニューとフッターメニューの違い

WordPress メニュー

WordPressには主に2つの種類のメニューがあります。

  • ナビゲーションメニュー
  • フッターメニュー

今回紹介したのは、ヘッダー下に表示されるナビゲーションメニューです。

フッターメニューはサイト下部に表示されるメニューになります。

上記2つのメニューはサイト内に設置する事によって、ユーザーがコンテンツを見つける手助けを行う役目を持っています。またSEO的にもクローラーが巡回しやすくなるのです。

2つのメニューを「どの様に使い分ければ良いのか」「違いは何なのか」について詳しく解説していきます。

3-1:使用目的と違いについて

ナビゲーションとフッターメニューの違いについて詳しく解説していきましょう。

メニュー種類

ナビゲーションメニューには、ユーザーがサイト内で探しているコンテンツをいち早く見つけやすくする為に儲けるメニューです。ナビゲーションメニューを作成しておけば、どこに何があるか直ぐに見つける事が出来ます。

フッターメニューには、頻繁には見られないが”会社概要”や”プライバシーポリシー”・”利用規約”などのサイト内に載せておかなければいけない情報を載せるメニューです。

フッターメニューの作成方法については、下記の記事をご覧ください。

初心者の為のWordPressでフッターメニューの作成と追加する2つの方法

まとめ

WordPressのメニューについて詳しく解説してきました。

メニューを作っておけば、ユーザーがサイトへ訪問した際に”どこに何があるのか”をいち早く見つけるナビゲーションの役割を果たします。

フッターメニューとも上手く使い分け、より使いやすいサイト作りを目指していきましょう。

  • このエントリーをはてなブックマークに追加

  • 4

    • このエントリーをはてなブックマークに追加
    目次
    ページ上部へ