こんにちは！エンジニアのノムラです。
みなさんのサイトはナビゲーションメニューを設定していますか？
Webサイトにおいて、ナビゲーションメニューはとっても重要な要素です。
この記事では、
【基礎】管理画面でメニューを作成
【応用】レスポンシブメニューを作るプラグインの紹介
といった流れで、サイトのメニューを作成する方法を解説していきたいと思います。
メニューがあると、探しているページを見つけやすくなり、ユーザビリティの高いサイトになります。
しっかりマスターしていきましょう！
ナビゲーションメニューとは
ナビゲーションメニューとは、以下のようなメニューバーのことです。
WordPressでは、固定ページや投稿ページだけでなく、任意のリンク先を設定してメニューを作成することができます。
メニューバーがあることで、ユーザがコンテンツを見つけやすくなります。
メニューを作成してみよう
それでは早速、管理画面からメニューを作成してみましょう。
メニューの追加
外観>メニューから設定します。
メニュー名に今回作成するメニューの名前を入力し、メニューを作成します。
今回はサンプルメニューという名前で作成しました。
次に左のサイドメニューから、メニューに入れる項目を作成します。
今回は固定ページを追加しましょう。
メニューに入れたい固定ページにチェックを入れて、メニューに追加します。
右のサンプルメニューの中に、選択した固定ページが追加されました。
追加したページをクリックするとドロップダウンメニューが開き、詳細設定を行うことができます。
メニュー項目の削除もここで行います。
ナビゲーションラベルをメニューに表示したい名前に変更します。
メニューを変更した場合は、メニューを保存で変更が保存されます。
メニューを作成し、項目を追加されるだけでは、表示されないので、メニューの位置のトップメニューにチェックを入れて保存しましょう。
サイトを確認すると、メニューが表示されています。
複数の項目があり、順番を入れ替えたいときは、ドロック&ドロップで入れ替えていくことができます。
コードを書かずに簡単にメニューが作れてしまいますね。
プルダウンメニューに変更
カテゴリーの項目など、メニュー項目をプルダウン形式にしたい場合もあるかと思います。
そういった場合も管理画面から簡単に設定できてしまいます。
まずは、プルダウンにしたい項目を全てメニューに追加します。
次に順番を入れ替えるときと同じように、ドラッグ&ドロップで項目を横にずらします。
ナビゲーションラベルの横に、副項目と出たらプルダウンメニューになっています。
副項目の上にある項目が親項目になります。
親項目であるCATEGORYの下に、副項目が表示されていますね。
プラグインでレスポンシブ対応
ここまで、管理画面でカスタマイズを行ってきましたが、設定したメニューがレスポンシブではない場合、自作でテーマを作りレスポンシブ対応でなかった場合にオススメのプラグインを紹介します。
WP Responsive Menu
https://wordpress.org/plugins/wp-responsive-menu/
最近では、Webサイトをスマホから閲覧する人がほとんどなので、レスポンシブ対応は必須と言えます。
このプラグインでは、アニメーション付きのハンバーガーメニューなどを作成することができ、初心者でもリッチなデザインのメニューを作成することができます。
コードを書いていくのが不安な人でも、プラグインを使えば簡単に実装できますね。
そもそも、レスポンシブって何？という人は、以下の記事を参考にしてみてください。
レスポンシブとは？メリットは？といった基礎的な解説から、レスポンシブ対応のテーマを紹介しています。
まとめ
ここまで、WordPressでメニューを作成、カスタマイズする方法から、プラグインの紹介まで行ってきました。
メニューのないサイトは、見たいページが探しにくいだけでなく、情報の探しにくさからサイトのファンを減らしてしまうことにも繋がります。
しっかりマスターして、魅力的なサイトを作っていきましょう！
