WordPressでメニューナビゲーションを作成および編集する方法

ナビゲーションメニューは、Webサイトの最も重要な要素の1つです。 それがないと、訪問者は必要なコンテンツにアクセスできず、提供するコンテンツを理解できず、通常、サイトに関して混乱した状態で存在します。 残念ながら、WordPressメニューシステムはCMS（コンテンツ管理システム）の最も直感的な部分ではありません。 私たちはそれを理解しており、WPナビゲーションシステムを最適にナビゲートする方法を紹介したいと思います。 あなたとあなたのユーザーが可能な限り最高の体験をするために。

WordPressメニューを作成する前に

さて、WPメニュー構造を掘り下げる前に、これを計画するために少し時間を取ってみましょう。 メニューの作成は簡単ですが（[外観]- [メニュー]に移動してクリックを開始するだけです）、便利なメニューの作成はもう少し詳細です。 基本的に、2つの質問を自問してください。

• 誰のためにメニューを作っているのですか？
• 訪問者はどこに行きたいですか？

誰のためにメニューを作っているのですか？ 、それはばかげているように見えるかもしれません。 答えは間違いなく「あなたのユーザー」だからです。 しかし、それはそれほど単純ではありません。 ユーザーが異なれば、必要なものも異なります。 新規ユーザーは、返却ページと同じページが必要ですか？ ログインしたメンバーには、サインインしていないメンバーと同じメニューが表示されますか？

この特定のメニューを使用する人々のことを考えることによって、あなたはそれを単純に保つことができます。 あなたはそれを見る人々を圧倒するであろうページでそれをいっぱいにすることを避けることができます。 WordPressメニューの素晴らしいところは、多くのバージョンを作成して、さまざまな場所に表示できることです。

それは私たちに質問2をもたらします：私は私の訪問者をどこに行かせたいですか？ どのユーザーがどのメニューを必要としているかを手に取り、それらのユーザーをどこに移動させるかを決定することで、作成するメニューの種類が決まります。

実例としてのElegantThemes.com

たとえば、しばらく前にここエレガントテーマでヘッダーメニューの再設計を行いました。 Facebookグループ、Diviテーマユーザー、Meetupネットワークへのトラフィックの促進に焦点を当てたかったのです。 ディビ自体に加えて、しかしそれは言うまでもありません。 これを行うために、以前存在していたより堅牢なバージョンと比較して、ユーザーに少数のオプションのみを提供するようにメニュー構造を簡略化しました。

Diviにカーソルを合わせると、テーマの機能だけでなく、強調したいソーシャルネットワークへのリンクが表示されます。 すべての製品は、Diviを主力製品として表示します。また、メンバーシップオプションを検討する際の価格も表示されます。 アカウントはその新規ユーザーのパラダイムの外にありますが、新規ユーザーがメンバーシップにすばやくアクセスできるようにするだけでなく、新規メンバーのサインアップのオプションも提供します。 お問い合わせも、どなたでもご利用いただけます。

ご覧のとおり、すべてのメニュー項目は、選択した訪問者のセグメントを、最も多く見たいページに誘導します。 とはいえ、ページのフッターには、ブログ、リソース、個々の製品ページなどの場所にリンクする、より完全なメニューもあります。

ヘッダーメニューもまだあります。 しかし、ページの下部にあるメニューは、（最近のWeb標準のように）別のメニューを探して探しているものを見つけることを知っている、より具体的なニーズを持つ人々によって使用されることを私たちは知っています。

それを念頭に置いて、あなたはおそらくあなたがメニューを作成しているのは誰か、そしてあなたが彼らに何をしてほしいのかを理解しているでしょう。 それでは、WordPressメニューの作成に取り掛かりましょう。

WordPressメニューを作成する方法

WordPressダッシュボードの[外観] – [メニュー]に移動します。 次のようなものが表示されます。

このページはWordPressの最もユーザーフレンドリーな部分ではありませんが、上記で説明した内容に関連するいくつかの部分が表示されます。

メニュー名は参考用です。 これはユーザーには表示されません。 適切な名前を付けて、どのメニューがどこに移動するかを追跡します。 左側に、ページ、投稿、カスタムリンク、およびカテゴリが表示されます。 一部のテーマには、ここにさらに多くのオプションが含まれています。 あなたのものはそうでないかもしれません。 メニュー項目は、個々の投稿またはページ、およびカテゴリリンクにすることができます。 さらに、カスタムリンクを使用すると、何にでもリンクできます。https：//を覚えておくと、リンクが停止する可能性があります。

[メニュー設定]で、 [ページの自動追加]を無効のままにしておくことを強くお勧めします。 このオプションは、サイトで作成されたすべての新しいページをWordPressメニューに追加します。 ほとんどの人はこのボックスをチェックすることはありません。

WordPressメニューを表示できる場所に関してテーマごとにレイアウトが異なるため、[表示場所]オプションはテーマごとに異なります。 ただし、これらは、メニューが完全に表示されるサイト内の場所です。 画面上部の[場所の管理]タブで、メニューの場所を微調整する必要はありません。

次に、メニュー自体に必要なコンテンツを追加します。 横にあるチェックボックスをオンにして、[メニューに追加]をクリックするだけです。 そうすることで、メニュー構造の下に追加されます。 矢印をクリックして、ナビゲーションラベルなどの他のオプションを表示します。

ナビゲーションラベルはユーザーに表示されることに注意してください。 これはメニューに表示される部分です。 したがって、ページタイトルが長すぎる場合は、ここで短くすることができます。

さて、WordPressメニューを作成する上で最も重要な部分（そしておそらくすべてのプラットフォームで最も忘れられているアクションの1つ）は、画面の右側にある[メニューの保存]をクリックすることです。

保存すると、メニューが公開されます。 すでにサイトに表示されている場合、変更はすぐに行われます。

ドロップダウンWordPressメニューを作成する方法

ほとんどの場合、上記の手順は、WordPressでドロップダウンメニューを作成する場合も同じです。 ただし、サブメニューを表示するには、従う必要のある別の手順があります。

[メニュー構造]セクションで、各項目をドラッグできます。 ドロップダウンメニューを作成するには、目的のアイテムをクリックして、親として目的のアイテムにドラッグするだけです。 WordPressは、アイテムを別のアイテムに持ってきたら、次にそれらを持ちたいということを知っているほど賢いです。 それらをネストすると、フロントエンドにドロップダウンメニューが作成されます。

ドロップダウンで必要な数のアイテムに対してこれを繰り返します。 ネストされた階層は理解しやすいです。 構造内に新しいレベルが作成されるたびに、メニューに追加のドロップダウンが表示されます。

フロントエンドでは、次のようになります。

ここで、これらの手順は、存在するメニュー項目を使用していることを前提としています。 ただし、ドロップダウンメニューをトリガーするアイテムをナビゲート可能なリンクにしたくない場合は、URLの代わりに＃を含むカスタムリンクを作成するだけで済みます。

これを行うとメニュー項目が作成されますが、それをクリックしてもドロップダウンメニューが展開されるだけです。

WordPressサイト全体で複数のメニューを使用する方法

前に説明したことに戻り、表示する各メニューに焦点が当てられていることを確認したいと思います。 メガメニューがサイトナビゲーションに最適な場合があります。 たとえば、Amazonは、メガメニューを最大限に活用するサイトの優れた例です。 ただし、メガメニューを使用するほとんどのサイトはそれらを必要としません。 それらはサイトナビゲーションを不必要に複雑にします。

ただし、大規模なサイトがあり、それを区分化できる場合は、サイト全体で複数のメニューを使用することをお勧めします。 ユーザーが行う必要のある選択が少ないということは、ユーザーが希望する選択を行う可能性が高いことを意味します。

ここで、例として、ブログのサイドバーにのみ表示されるメニューを作成して、ユーザーを誘導できるようにするとします。 メニューを追跡するために、 S idebarWidgetのような名前を付ける場合があります。 [表示場所を見たり場所]タブを管理する場合でも、サイドバーのオプションがあるではないかもしれません。

つまり、メニューを手動で配置する必要があるということです。 WordPressダッシュボードで、 [外観] – [ウィジェット]に移動し、 [ナビゲーションメニュー]ウィジェットを見つけます。

ほとんどの場合、テーマには一般的なサイドバーオプションがあります。 ナビゲーションメニューウィジェットはデフォルトでWordPressになっています。 したがって、これはテーマに関係なく機能します。 ただし、テーマにメニューウィジェット用の何かが含まれている可能性があり、基本的な手順は引き続き適用されます。

ドロップダウンメニュー項目と同様に、クリックしてサイドバー領域にドラッグします。 WordPressでウィジェットがどのように機能するかにより、ウィジェットはすぐにサイトに表示されます。 ただし、表示するメニューを選択していないため、空白になります。

タイトルを選択すると、メニューの上に見出しとして表示されます。 [メニューの選択]オプションでは、表示する特定のメニューを選択します。 また、可視性のリンクをクリックして、上記を参照することを余分ボックスを開くことができます。 この新しいボックスには、条件付きの可視性のオプションがあります。 このため、このメニューをポッドキャストとして分類された投稿にのみ表示したい場合があるため、[保存]をクリックすると変更が保持されます。

それが彼らのすべてです。 ヘッダーメニューのドロップダウンとして作成したものはすべて、サイドバーウィジェットにネストされたメニューとして表示されることに注意してください。 したがって、＃を使用してプレースホルダーURLを作成した場合、それはこのメニューではクリックできないリンクになります。 それに応じてWordPressメニューの作成を計画するだけです。

WordPressメニューで締めくくる

WordPressのメニューシステムは威圧的である必要はありません。 少し不明瞭に見えることもありますが、ご覧のとおり、簡単にナビゲートできるプロセスであり、その方法を理解すれば非常に強力になります。 ただし、独自のサイトナビゲーションを作成し続けると、メニューが万能ではないことを忘れないでください。 誰がサイトのどのページを見つけたいかを考慮し、そのエクスペリエンスを作成するためのメニューシステムを作成してください。 すべてのページと投稿およびリンクが同じメニューに表示される必要はありません。 WordPressメニューの場合、それほど確実ではありません。

WordPressメニューをどのように構成しますか？ あなたのサイトにはいくつの異なるメニューがありますか？

Julia Tim /shutterstock.comによる記事特集画像