サイトナビゲーションは、ユーザーがアクセスしたい場所にアクセスできるための鍵です。適切に設計されたメニューは、ユーザーエクスペリエンス（UX）の向上、および直帰率の低下にさえ大きく貢献します。ただし、不便なメニューなら、逆効果となります。
さいわい、WordPressを使用すると、サイトのニーズに合ったカスタムメニューを作成できます。ネイティブ機能を使用してコンパクトなWordPressドロップダウンメニューを追加し、スペースを節約しながら、訪問者に明確な指導を提供することもできます。
本記事では、ウェブサイトのナビゲーションが重要である理由と、ドロップダウンメニューが特に役立つ理由について説明します。次に、WordPressでドロップダウンメニューを作成する方法と、便利なプラグインもいくつか紹介します。
それでは参りましょう。
WordPressのナビゲーションとドロップダウンメニューの概要
あまり目立てないものであっても、ナビゲーションメニューはウェブサイトの重要な要素です。ユーザーが目標を達成するために最も関連性の高いページをすばやく見つけられ、初めての訪問者もウェブサイトの内容を一目で把握できます。
うまく設計されたナビゲーションメニューは、コンバージョン率が向上し、直帰率が低下するための鍵となります。商品ページやメールマガジンの登録フォームなどのコンバージョンを達成するコンテンツをユーザーが簡単に見つけられるようになると、購入またはサインアップする可能性が高くなります。
さらに、ユーザーがウェブサイトで迷子にならないと、間違ったページに移動してしまったためページを離れることもありません。元々正しいものにすると、UXがを改善し、不満を最小限に抑えることができます。
WordPressでは、メニューは固有の機能です。このプラットフォームを使用して作成されたサイトは、1つ以上のメニューを表示できます。一方、メニューのスタイル設定と配置に関してはWordPressテーマも重要な役割を果たします。
このため、WordPressメニューの姿はぞれぞれです。最もよく知られているのは、標準のヘッダーメニューです。
ページの下部に追加のフッターメニューを含めることもできる場合もあります。メインメニューと同じコンテンツを表示するか、わずかに異なるコンテンツを表示できます。
または、ユーザーは自由に開閉できるオーバーレイメニューもあります。
それに、サイドバーメニューも検討できます。
または、ドロップダウンメニュー（サブメニュー）を組み込むこともできます。
この種類のナビゲーションは、様々なサイトに最適です。オーバーレイメニューのようにコンテンツを覆い隠すことはありませんが、大きなヘッダーバーやサイドバーメニューほど煩わしくはありません。
必一部のコンテンツを要になるまで非表示にすることにより、画面スペースを節約しながら、ユーザーを簡単に移動できるようにします。
WordPressでドロップダウンメニューを作成する方法（5ステップ）
WordPressサイトでドロップダウンメニューにすると決定した場合、設定は非常に簡単です。WordPressで利用可能ネイティブ機能を使用することにより、わずか5ステップでニーズに合ったカスタムナビゲーションシステムを作成できます。
ステップ1：メニュー項目を作成する
メニュー作成の最初のステップは、メニューの項目をを決定することです。まず、WordPressダッシュボードの「外観」> 「メニュー」に移動します。
メニューエディタに表示される内容は、テーマによって若干異なります。
ここで注意する必要があるのは、「メニューの編集」タブの最初のオプションです。既存のメニューの一つを選択して編集するオプションと、新規メニューを作成するオプションが表示されます。
この例では、後者のオプションを選択して、新しいメニューを作成します。タイトルを入力して、「メニューを作成」ボタンをクリックします。
これで、WordPressメニューに項目を追加する準備が整いました。ユーザーがアクセスしたい内容にアクセスできるために十分な情報のみを提供し、メニューをできるだけシンプルにした方が良いでしょう。
あまりにも多くのページを組み込むと、ビゲーションを容易にするのではなく、困難にする可能性があります。
メニュー項目を追加する方法はいくつかあります。最初の2つの方法は固定ページと投稿です。この2つの方法は非常によく似ています。
メニューエディターのサイドバーで、追加する各固定ページまたは投稿のチェックボックスをオンにして、「メニューに追加」ボタンをクリックします。
次のオプションは、カスタムリンクの組み込みです。ユーザーにアクセスしてほしいページのURLを入力し、短いが説明的なラベルを作成します。その後、もう一度「メニューに追加」をクリックできます。
ナビゲーションメニューに、「 固定ページや投稿のカテゴリ」も追加することができます。これにより、ユーザーは特定のトピックに関するすべてのコンテンツが表示されるアーカイブページに移動します。
ブログなどのコンテンツの多いサイトでは、この機能が特に役立つでしょう。
「固定ページ」と「投稿」オプションと同様に、追加するカテゴリのチェックボックスをオンにして、「メニューに追加」を選択します。
ステップ2：WordPressメニューを整理する
すべてのメニュー項目を追加した後、項目がエディターの「メニュー構造」に個々のタイルでリストされているはずです。
メニューの項目は追加した順に表示されますが、希望の位置にドラッグアンドドロップすることにより、表示の順番を簡単に変更できます。これにより、ドロップダウン機能のないシンプルなメニューを作成できます。
WordPressメニューにドロップダウンを追加するには、いくつかの方法があります。
最も簡単なのは、項目のドラッグアンドドロップを行う際にドロップするときに少し頭を下げて配置し、サブメニューにすることです。
たとえば、上記の画像では、メニューに追加した3つの投稿カテゴリを「Blog」の下に移動して、「サブメニュー」にしています。フロントエンドでは、次のようなドロップダウンメニューが作成されます。
サイトのすべてのカテゴリをドロップダウンメニューに追加するには、メニューに「カスタムリンク」を追加します。URLには「＃」、ラベルには「カテゴリ」などを使用します。
次に、すべてのカテゴリをメニューに追加して、このラベルの下のサブメニューにすることができます。各カテゴリはクリック可能ですが、ラベルはクリック可能ではありません。
同様に、単一のドロップダウンメニューですべてのメニュー項目を非表示にすることもできます。
URLに「＃」、ラベルに「メニュー」を使用して、別のカスタムリンクを追加します。次に、すべてのメニュー項目をその下に入れます。
フロントエンドでは、サイトの主要ページを含むドロップダウンメニューが作成されます。
以下の「カテゴリ」項目のように、サブ項目のとして入れたコンテンツはすべてサブメニューに表示されます。
このようにドラッグアンドドロップメニューエディターを使用することで、WordPressドロップダウンメニューの任意のスタイルと組み合わせを作成できます。ただし、メニュー項目が多すぎるとユーザーが混乱する可能性があることに注意してください。
ナビゲーションが分かりにくくならないように、サブメニューの数も制限することをお勧めします。
ステップ3：WordPressメニューに画像を組み込む
ステップ2を実施して、ドロップダウンメニューが想像したとおりになった場合は、ステップ5に進んでメニューを公開できます。ただし、メニューをカスタマイズして拡張する場合は、追加の手順が必要になる場合があります。
検討すべき戦術の一つは、ビジュアルな要素をメニューに組み込んで、訪問者をよりよく案内することです。説明ラベルは不可欠なものですが、画像やアイコンを使用すると、ナビゲーションリンク先の内容をユーザーがすばやく把握できるようになる場合があります。
カスタムCSSを使用して画像を追加することは可能ですが、これについては後程説明します。ただし、Menu Image, Icons Made Easyなどのプラグインを入手することをお勧めします。
プラグインでは、コードなしでもドロップダウンメニューに画像などを追加できます。
プラグインをインストールして、「外観」> 「メニュー」に戻ります。
メニューに追加した各ページの画像オプションが表示されます。各ページの写真と、そのサイズや位置を特定できます。完了したら、変更を必ず保存してください。
ステップ4：ドロップダウンメニューにカスタムCSSを追加する
初心者にはお勧めしませんが、中級および上級ユーザーは、WordPressドロップダウンメニューに独自のスタイルを組み込むことができます。ただし、CSSの作業を開始する前に、メニューにクラスを追加する必要があります。
このステップをスキップすると、カスタムCSSがサイトの他のメニューの問題を引き起こす可能性があります。たとえば、メインのドロップダウンメニューのみを対象としたスタイルを、誤ってフッターメニューにも適用してしまう場合があります。
メニューエディタの右上隅にある「画面オプション」をクリックします。
次に、「CSSクラス」のチェックボックスをオンにします。
これにより、メニューの各ページに「CSSクラス」のフィールドが追加されます。
メニュー項目に1つ以上のCSSクラスを追加すると、スタイルシートに追加するカスタムコードは、指定したクラスのメニュー項目にのみ適用されます。
これで、スタイルシートまたはカスタマイザーに移動して、カスタムスタイルに取り掛かることができます。
ステップ5：メニューを公開する
WordPressドロップダウンメニューをニーズに合わせて、必要なカスタマイズを組み込んでから、サイトに公開する準備が整いました。
公開プロセスは、ご利用のテーマとテーマがサポートするメニューの場所によって若干異なります。この例では、Twenty Twentyテーマを使用します。
メニューエディターで、「メニュー設定」セクションまでスクロールダウンします。
新しい固定ページを自動的にメニューに追加するには、最初のチェックボックスを選択します。サイトを使い始めたばかりで、主要な固定ページをまだすべて追加していない場合は、この機能が役立つことがありますが、メニューの項目が多すぎないように注意してください。
このオプションの下に、サイトのメニューを表示できるさまざまなエリアのチェックボックスのリストがあります。
Twenty Twentyテーマには、デスクトップ水平メニュー、デスクトップ展開メニュー、モバイルメニュー、フッターメニューと、ソーシャルメニューというメニューの位置があります。
今回の例で作成したメニューは、サイトのヘッダーにある「デスクトップ水平メニュー」の位置に最適です。
ダッシュボードの「メニュー」の「位置の管理」タブに移動することにも価値があります。ここでは、現在のテーマで利用可の名すべてのメニューの位置と、それぞれに割り当てられているメニューのリストが表示されます。
メニューの位置を設定する際に、フロントエンドでのメニューの外観を確認できると便利です。
「ライブプレビューで管理」ボタンをクリックすると、WordPressカスタマイザを使用して、メニューの指定した位置での外観を表示して確認できます。
完了後、カスタマイザーから直接にメニューを公開できます。ドロップダウンメニューに項目を追加したり削除したりする場合は、メニューエディターに戻って必要な調整を行うだけです。
ドロップダウンメニューを強化するWordPressプラグイン
追加のツールなしでも完全に機能するWordPressナビゲーションメニューを作成できますが、メニューの機能を拡張すると便利な場合もあるでしょう。あなたのサイトに上記が当てはまる場合は、人気のあるWordPressメニュープラグインを確認してみてください。
Nested Pagesは、コンテンツの多いブログでドロップダウンメニューを作成する際に便利です。このプラグインは主に投稿と固定ページを整理するために使用されますが、コンテンツの構造を反映するメニューも自動的に生成されます。
メニューに多数の項目を組み込むことは必ずしも推奨されませんが、避けられない場合もあります。
あなたのサイトに上記が当てはまる場合は、Max Mega Menuは既存の各WordPressメニューを組み合わせて1つの「メガメニュー」にします。
モバイルブラウジングが増えている中、メニューをモバイルでも読み取り可能にすることが重要です。
WP Mobile Menuは、いずれのレスポンシブなテーマと組み合わせると、サイトの外出中のユーザー向けのナビゲーションシステムを作成します。
最後に、前述のとおり、説明的なメニュー項目だけでは不十分な場合もあります。その場合、上記のステップ3でご案内したMenu Image, Icons Made Easyを検討することをお勧めします。
上記のプラグインのいずれかを使用して、現在のナビゲーションシステムを強化し、WordPressドロップダウンメニューをより効果的なものにすることができます。一方、ナビゲーションなら、シンプルさ第一であることにご注意ください。UXが改善され、サイトが乱雑しない場合にのみ、追加の機能を使用しましょう。
WordPressドロップダウンメニューのトラブルシューティング
上記の手順に従ってメニューを設定しても、ドロップダウン機能が機能しない場合は、考えられる原因がいくつかあります。
本記事ではすべての考えられる原因をカバーできませんが、原因を絞り込み、適切な解決策を見つけるお手伝いをします。
メニューの誤動作の原因は、カスタムメニューとテーマの間のコードのコンフリクトである場合が多いです。メニューが機能しない場合に最初にすべき対策は、Twenty Twentyなどのデフォルトのテーマに切り替えることです。メニューが機能し始めると、問題がテーマに関連していることがわかります。そこで、テーマの開発者に連絡して解決策を探すことができます。
その他の考えられる原因は次のとおりです。
- コードの入力ミス：追加したカスタムCSSが正しいか、およびステップ4でご案内したCSSクラスが使用されているかを再確認してください。
- プラグインの非互換性： インストールしたメニュー関連のプラグインを無効にして、問題が解決するかどうかを確認してください。
- 古いjQuery： 最新版のjQueryにアップグレードして、もう一度ドロップダウンメニューを開いてみてください。
ただし、前述したように、メニューの誤動作の考えられる原因は多数あります。上記の解決策を実施しても問題が解決しない場合は、WordPressサポートフォーラムにアクセスするか、Kinstaの専門家からなるWordPressサポートチームに連絡するか、WordPress開発者を雇って修正してもらうことをお勧めします。
まとめ
大したことでないように思えるかもしれませんが、WordPressサイトのナビゲーションがサイトの成功を左右する場合があります。ドロップダウンメニューを使用すると、ユーザーの画面スペースが節約され、サイトがナビゲートしやすくなり、コンバージョン率が改善します。
