WordPressでナビゲーションメニューを作って設定する方法

こんにちは!エンジニアのノムラです。

みなさんのサイトはナビゲーションメニューを設定していますか?
Webサイトにおいて、ナビゲーションメニューはとっても重要な要素です。

この記事では、

【基礎】ナビゲーションメニューとは?
【基礎】管理画面でメニューを作成
【応用】レスポンシブメニューを作るプラグインの紹介

といった流れで、サイトのメニューを作成する方法を解説していきたいと思います。

メニューがあると、探しているページを見つけやすくなり、ユーザビリティの高いサイトになります。
しっかりマスターしていきましょう!

ナビゲーションメニューとは

ナビゲーションメニューとは、以下のようなメニューバーのことです。

WordPressでは、固定ページや投稿ページだけでなく、任意のリンク先を設定してメニューを作成することができます。

メニューバーがあることで、ユーザがコンテンツを見つけやすくなります。

メニューを作成してみよう

それでは早速、管理画面からメニューを作成してみましょう。

メニューの追加

外観>メニューから設定します。

メニュー名に今回作成するメニューの名前を入力し、メニューを作成します。
今回はサンプルメニューという名前で作成しました。

次に左のサイドメニューから、メニューに入れる項目を作成します。

今回は固定ページを追加しましょう。
メニューに入れたい固定ページにチェックを入れて、メニューに追加します。

右のサンプルメニューの中に、選択した固定ページが追加されました。

追加したページをクリックするとドロップダウンメニューが開き、詳細設定を行うことができます。
メニュー項目の削除もここで行います。

ナビゲーションラベルをメニューに表示したい名前に変更します。


メニューを変更した場合は、メニューを保存で変更が保存されます。

メニューを作成し、項目を追加されるだけでは、表示されないので、メニューの位置トップメニューにチェックを入れて保存しましょう。

サイトを確認すると、メニューが表示されています。

複数の項目があり、順番を入れ替えたいときは、ドロック&ドロップで入れ替えていくことができます。

コードを書かずに簡単にメニューが作れてしまいますね。

プルダウンメニューに変更

カテゴリーの項目など、メニュー項目をプルダウン形式にしたい場合もあるかと思います。

そういった場合も管理画面から簡単に設定できてしまいます。

まずは、プルダウンにしたい項目を全てメニューに追加します。

次に順番を入れ替えるときと同じように、ドラッグ&ドロップで項目を横にずらします
ナビゲーションラベルの横に、副項目と出たらプルダウンメニューになっています。

副項目の上にある項目が親項目になります。

親項目であるCATEGORYの下に、副項目が表示されていますね。

プラグインでレスポンシブ対応

ここまで、管理画面でカスタマイズを行ってきましたが、設定したメニューがレスポンシブではない場合自作でテーマを作りレスポンシブ対応でなかった場合にオススメのプラグインを紹介します。

WP Responsive Menu

https://wordpress.org/plugins/wp-responsive-menu/

最近では、Webサイトをスマホから閲覧する人がほとんどなので、レスポンシブ対応は必須と言えます。

このプラグインでは、アニメーション付きのハンバーガーメニューなどを作成することができ、初心者でもリッチなデザインのメニューを作成することができます。

コードを書いていくのが不安な人でも、プラグインを使えば簡単に実装できますね。

そもそも、レスポンシブって何?という人は、以下の記事を参考にしてみてください。

レスポンシブとは?メリットは?といった基礎的な解説から、レスポンシブ対応のテーマを紹介しています。

まとめ

ここまで、WordPressでメニューを作成カスタマイズする方法から、プラグインの紹介まで行ってきました。

メニューのないサイトは、見たいページが探しにくいだけでなく、情報の探しにくさからサイトのファンを減らしてしまうことにも繋がります。

しっかりマスターして、魅力的なサイトを作っていきましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ノムラ

ノムラ

WEBエンジニアをやっています。
プログラミング初心者にもわかりやすく解説ができるよう頑張ります。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習やキャリアのお悩み、お気軽にご相談ください。