この記事では、WordPressでナビゲーションメニューを作成・設定する方法を解説します。
こんにちは！エンジニアのノムラです。
みなさんのサイトはナビゲーションメニューを設定していますか？
Webサイトにおいて、ナビゲーションメニューはとっても重要な要素です。
この記事では、
【基礎】管理画面でメニューを作成
【応用】レスポンシブメニューを作るプラグインの紹介
といった流れで、サイトのメニューを作成する方法を解説していきたいと思います。
メニューがあると、探しているページを見つけやすくなり、ユーザビリティの高いサイトになります。
しっかりマスターしていきましょう！
- WordPressでのメニュー作成は「外観」から行う
- メニューのレスポンシブ対応はプラグインで設定可能
なお、休日やふと空いたすきま時間に収入が増やせるスキルを身につけたい人は、ぜひ「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。月5~10万円の収入獲得を見据え、スキルの習得から仕事の取り方・進め方まで一貫して学べます。
未経験から副業で収入を増やしたい人は、ぜひ一度お試しください。
＼ 給付金で受講料が最大80%OFF ／
ナビゲーションメニューとは
ナビゲーションメニューとは、以下のようなメニューバーのことです。
WordPressでは、固定ページや投稿ページだけでなく、任意のリンク先を設定してメニューを作成することができます。
メニューバーがあることで、ユーザがコンテンツを見つけやすくなります。
なお、IT企業への転職や副業での収入獲得を見据えたどの言語が自分にあうのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。
かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。
効率よくスキル習得したい人は、ぜひ一度お試しください。
＼ 4つの質問に答えるだけ ／
メニューを作成してみよう
それでは早速、管理画面からメニューを作成してみましょう。
メニューの追加
外観>メニューから設定します。
メニュー名に今回作成するメニューの名前を入力し、メニューを作成します。
今回はサンプルメニューという名前で作成しました。
次に左のサイドメニューから、メニューに入れる項目を作成します。
今回は固定ページを追加しましょう。
メニューに入れたい固定ページにチェックを入れて、メニューに追加します。
右のサンプルメニューの中に、選択した固定ページが追加されました。
追加したページをクリックするとドロップダウンメニューが開き、詳細設定を行うことができます。
メニュー項目の削除もここで行います。
ナビゲーションラベルをメニューに表示したい名前に変更します。
メニューを変更した場合は、メニューを保存で変更が保存されます。
メニューを作成し、項目を追加されるだけでは、表示されないので、メニューの位置のトップメニューにチェックを入れて保存しましょう。
サイトを確認すると、メニューが表示されています。
複数の項目があり、順番を入れ替えたいときは、ドロック&ドロップで入れ替えていくことができます。
コードを書かずに簡単にメニューが作れてしまいますね。
なお、副業での収入獲得を目指しているものの、どんな仕事が自分に合うかわからない人は「副業診断」をお試しください。
かかる時間はたった1分ほど。5つの質問に答えるだけで、自分にあう副業を診断してもらえます。
自身が取り組みやすい副業で収入を獲得したい人は、ぜひ一度お試しください。
＼ 5つの質問に答えるだけ ／
プルダウンメニューに変更
カテゴリーの項目など、メニュー項目をプルダウン形式にしたい場合もあるかと思います。
そういった場合も管理画面から簡単に設定できてしまいます。
まずは、プルダウンにしたい項目を全てメニューに追加します。
次に順番を入れ替えるときと同じように、ドラッグ&ドロップで項目を横にずらします。
ナビゲーションラベルの横に、副項目と出たらプルダウンメニューになっています。
副項目の上にある項目が親項目になります。
親項目であるCATEGORYの下に、副項目が表示されていますね。
なお、IT企業への転職や副業での収入獲得を見据え、独学でWordpPressスキルを習得できるか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。
「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。
＼ 給付金で受講料が最大80%OFF ／
プラグインでレスポンシブ対応
ここまで、管理画面でカスタマイズを行ってきましたが、設定したメニューがレスポンシブではない場合、自作でテーマを作りレスポンシブ対応でなかった場合にオススメのプラグインを紹介します。
WP Responsive Menu
https://wordpress.org/plugins/wp-responsive-menu/
最近では、Webサイトをスマホから閲覧する人がほとんどなので、レスポンシブ対応は必須と言えます。
このプラグインでは、アニメーション付きのハンバーガーメニューなどを作成することができ、初心者でもリッチなデザインのメニューを作成することができます。
コードを書いていくのが不安な人でも、プラグインを使えば簡単に実装できますね。
そもそも、レスポンシブって何？という人は、以下の記事を参考にしてみてください。
レスポンシブとは？メリットは？といった基礎的な解説から、レスポンシブ対応のテーマを紹介しています。
なお、ITの仕事に興味はあるものの、どの職種が自分にあうのかわからない人もいますよね。そんな人は「ITキャリア診断」をお試しください。
かかる時間はたったの1分。5つの質問に答えるだけで、自分にあうIT職種を診断してもらえます。
自身に適した職種が知りたい人は、手軽に試してみると良いですよ。
＼ 5つの質問に答えるだけ ／
まとめ
ここまで、WordPressでメニューを作成、カスタマイズする方法から、プラグインの紹介まで行ってきました。
メニューのないサイトは、見たいページが探しにくいだけでなく、情報の探しにくさからサイトのファンを減らしてしまうことにも繋がります。
しっかりマスターして、魅力的なサイトを作っていきましょう！
