8)WordPressのナビゲーションメニューを設定しよう
WordPressには「ナビゲーションメニュー(グローバルメニューとも言います)」が設置できます。
ナビゲーションメニューは、Webサイトの中でも一番目立つメニューです。
↓ このようなメニューをナビゲーションメニューといいます ↓
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/73404d723479352f1d43f85d92ccc5ed.png)
ナビゲーションメニューは、「ナビ」=「導く」という意味通り、特にうまくユーザーに見て欲しいページに誘導しやすいメニューなのでぜひ効果的に活用したいところです。
そこで今回は、WordPressサイトのナビゲーションメニューの設定方法を解説していきます。
【作業】ナビゲーションメニューの設定をしよう
↓ まずは「外観」⇒「メニュー」をクリックしましょう。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/ef2524cac52d6ba5cb5af95c6091f6dc.png)
↓ 初めてメニューを作る場合は、以下のような画面になります。
- メニュー名:好きな名前を付けましょう(Webサイトのどこに設置するか?を名前にすると管理しやすくなります)
- メニューの位置:Webサイトのどこのメニュー部分に設置するか?を選択します。(複数選択できます)
これで「メニューを作成」をクリックします。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/ed22023cf9e9acbe2e93baf78e852b11.png)
↓ まだ今の状態では、メニューに何も入っていない状態です。ここからユーザーに来て欲しいメニューやページを設定していきます。この画面では、
左側にある項目を右側に追加して、メニューを作っていくことになります。
![ナビゲーションメニュー設定16](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/0f139bf0661d0f8ceec21f07fec14b28.jpg)
左側の項目を、右側に追加する方法
↓ 例えば、左側にある「固定ページ」の中から設置したいページにチェックし、「メニューに追加」をクリック。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/d278430b3ee9451a4212f9819f443661.png)
↓ すると右側に項目が追加されます。右側に入った項目が実際Webサイト上に表示されます。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/95914bb5f1f4fe0e3684554a496325fe.png)
自由度が高い「カスタムリンク」の設置方法を覚えよう
左側にはいろんな項目がありますが、その中でも一番使い勝手がいい自由度の高い「カスタムリンク」というものがあります。
これは、飛ばしたい先のページのURLさえわかっていれば、
- 自分のWebサイト内でも
- 外部のサイトでも
どこでも飛ばすことができます。
↓ 以下のように「カスタムリンク」をクリックして以下の2点を入力します。
- URL:飛ばしたい先のページのURL
- リンク文字列:ナビゲーションメニューに表示させたい名前
- そして「メニューに追加」をクリックしましょう
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/608e78c74f366c85138d3c8a3028b6c2.png)
↓ すると右側にメニューが追加されます。これだけです。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/47b92619293a341fb2cbd3154646f35b.png)
表示させる場所を決めて保存するとWebサイトに反映されます
↓ 追加したいメニューを全て右側に追加できたら、
メニューの位置を決めて(お使いのWordPressテーマによって設置できる箇所が違います)
「メニューを保存」をクリックするだけです。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/8da0f97a816c98cfce7706b86c95498a.png)
これで実際にWebサイトにナビゲーションメニューが表示されるようになります。
ドロップダウンメニューを作るには?
お使いのWordPressテーマによっては、ドロップダウンメニュー(マウスを置くとさらにメニューが出てくるもの)を設置したい人もいると思います。
↓ こんなのがドロップダウンメニューといいます ↓
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/ca1f7e4b747b3927beb05d518f8bd702.jpg)
↓ ドロップダウンメニューにするには、初めに隠しておきたいメニューを右に少しずらします。(マウスの左クリックを押したままメニューをつかんで右に寄せる感じです)
![ナビゲーションメニュー設定18 (1)](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/45df640fee4cedc6a57a5dbfa46344a0.jpg)
これで忘れずに保存すればOK!
表示させるメニューの順番を変えるには?
↓ 移動させたいメニューを上下に移動させましょう。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/2f7c99d4762cc712c6fd69a26a195623.png)
メニューが横並びの際は、上に行くほど左にいきます。逆に下に行くほど右のほうに表示されるようになります
【補足】WordPressテーマdeerで設定できるメニュー4種
WordPressテーマdeerでは、以下の4箇所にナビゲーションメニューが設置できます。
- メインメニュー
- 左メニュー
- スマホナビ
- フッターナビ
それぞれ実際Webサイトのどの部分に表示されるのか?をお伝えします。
1.メインメニュー
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/8da0f97a816c98cfce7706b86c95498a.png)
↓ メインメニューはパソコンから見たときに一番上部に表示されるメニューです。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/73404d723479352f1d43f85d92ccc5ed.png)
2.左メニュー
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/4c3a0cc71db87ec529d32d080b1b120f.png)
↓ 左メニューは、スマホとタブレットのみに表示されます。以下のように、左上のハンバーガーメニュー(三のようなメニューボタン)をクリックしたときに出てくるメニューです。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/f957fef876c42b12c14a96b36a16fec3-534x1024.png)
↓ 出てくるメニューが「左メニュー」です。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/77a398e41abdf56b8880c0809a822c1b-535x1024.png)
3.スマホナビ
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/a73d5e5aafa4f02a9632f717b9e07ff2.png)
↓ スマホナビは、スマホとタブレットのみに表示されるメニューです。ロゴのすぐ下に出てくれるのでとても目立ちます。
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/cb3dce944386d310313e9c50f59c4290-538x1024.png)
4.フッターナビ
![ナビゲーションメニュー設定](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/67f74ae95bf05cf169def4b561875c9e.png)
↓ フッターナビは、Webサイトの一番下に表示されます。(パソコンのみ)
![](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/f657f014bd2655277f01b88b09cba5f6.jpg)
以上で今回は、WordPressサイトにナビゲーションを設置する方法を解説しました。
結果を出すために、派手さはいらない
「集客」に使うことだけを徹底的に考えて作ったWordPressテーマ
![deerのロゴ(白)文字入り](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/6fc9dfa4a44ab47d794f3145134a7d91-2.png)
決して多機能ではありませんが、使う機能を必要最低限に限定してシンプルにしているからこそ使いやすい、初心者さんに優しいテーマです。