WordPressドロップダウンメニューの作成方法とベストプラクティス

ドロップダウンメニューは、多くのウェブサイトにとって欠かせないナビゲーション機能です。コンテンツを整理してアクセスしやすくする、ユーザーに優しい方法として活用されています。WordPressは直感的な操作が可能なため、WordPressドロップダウンメニューの作成も簡単です。

この記事では、ドロップダウンメニューを作成する3つの方法をご紹介します。また、ユーザー体験を高め、ウェブサイトのナビゲーションを最適化するためのベストプラクティスについても解説します。

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

以下のステップに従って、WordPressサイトにドロップダウンメニューをスムーズに統合しましょう。ここでは、Site Editor、Max Mega Menuプラグイン、手動での追加という3つの方法をご紹介します。

まずは、Site Editorを使った方法から始めましょう。

サイトエディターでWordPressドロップダウンメニューを追加する方法

Site Editor内の「ナビゲーション」ブロックでは、ドラッグ＆ドロップでメニュー項目を作成・整理できるインターフェースが用意されており、wordpressドロップダウンメニューの作成も簡単に行えます。なお、この方法は現在、ブロックテーマにのみ対応しています。

以下は、「ナビゲーション」ブロックを使ってドロップダウンメニューを作成する手順です：

• WordPressのダッシュボードから「Appearance（外観）」→「Editor（エディター）」を開きます。
• 画面上部のメニューバーにあるブロック挿入アイコン「＋」をクリックし、「ナビゲーション」ブロックを検索します。エディター内の任意の場所にドラッグ＆ドロップします。

• Settings（設定）サイドバーで、既存のメニュー項目を下の階層にドラッグすると、その項目がメインメニュー内にネストされた子メニューになります。

• 新しいメニューリンクでドロップダウンメニューを作成するには、親メニュー項目の横にある「Options （オプション）」→「Add submenu link（サブメニューリンクを追加）」を選択します。

• ブロック挿入アイコン「＋」をクリックし、別のブロックを選択して、他のコンテンツタイプ用のサブメニューを作成します。そのブロックを、目的の親メニュー項目の下にドラッグ＆ドロップします。

• 各メニュー項目をクリックして、ラベル、URL、説明などのメニュー設定を行います。

• 同じ親メニュー項目の下に新しいサブメニューを作成するには、既存の子メニュー項目の下にあるブロック挿入アイコン「＋」を選択します。

• 最終的な表示は次のようになります：

プラグインを使ってWordPressにドロップダウンメニューを追加する方法

カスタムのドロップダウンメニューを作成するもう1つの方法として、ドロップダウンメニュー専用のプラグインを使う方法があります。WordPressのプラグインディレクトリには、優れたメニュープラグインが多数そろっています。このチュートリアルでは、「Max Mega Menu」プラグインを使って、wordpress ドロップダウンメニューを作成する手順をご紹介します。

• WordPressプラグインをインストールして有効化します。
• ダッシュボードから「Mega Menu（メガメニュー）」に移動します。「Menu Locations（メニューの位置）」セクションで、使用するプライマリメニューをクリックし、「Enable Max Mega Menu for this menu location（このメニューの位置で Max Mega Menu を有効にする）」にチェックを入れて、ドロップダウン機能を有効にします。同じセクション内で、「Event（イベント）」からサブメニューを表示させるトリガーを選択し、「Effect（エフェクト）」からドロップダウンメニューのアニメーション（デスクトップおよびモバイル）を設定します。最後に「Save Changes（変更を保存）」をクリックします。

• このプラグインは、デフォルトで現在のテーマのスタイルを引き継ぎます。メニューのスタイルやアニメーション、サイズを調整したい場合は、「Menu Themes（メニューテーマ）」タブを開きます。その際、「Select theme to edit（編集するテーマを選択）」の項目が、使用しているプライマリメニューを指していることを確認します。

• 「Appearance（外観）」→「Menus（メニュー）」に移動し、Max Mega Menu機能を有効にしているデフォルトメニューまたはプライマリメニューに項目を追加します。追加が完了したら、「Save Menu（メニューを保存）」をクリックします。

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

WordPressでドロップダウン型のナビゲーションメニューを手動で作成するには、WordPress本来の機能を使用します。この方法の利点は、WordPressテーマを変更したり、新しいプラグインをインストールしたりしても、ドロップダウンメニューがそのまま機能し続ける点です。

この方法では、固定ページ、投稿、カテゴリー、カスタムリンクなどをメニューに含めることができます。ただし、ご利用のテーマがドロップダウンメニューに対応しているかどうかは、テーマのドキュメントで事前に確認しておきましょう。以下のステップに従って、WordPressでカスタムドロップダウンメニューを手動で作成します。

1. メニュー項目を作成する

まずは新しいメニューを作成します。WordPressのダッシュボードから「Appearance（外観）」→「Menus（メニュー）」に移動します。「Edit Menus（メニューの編集）」タブ内にある「Menu Structure（メニュー構造）」セクションで、新しいメニューを作成できます。

なお、このセクションの表示内容は、ご利用のテーマによって異なる場合があります。

テキストボックスにメニュー名を入力し、「Create Menu（メニューを作成）」をクリックします。続いて、「Add menu items（メニュー項目を追加）」セクションに切り替え、新しいサブメニューに追加したい要素を選びます。追加したい項目の横にあるチェックボックスにチェックを入れ、「Add to Menu（メニューに追加）」をクリックします。

サブメニュー項目として使用できるのは、固定ページ、投稿、カテゴリーなどです。

また、カスタムリンクを追加して、サイト内の特定のページへユーザーをリダイレクトすることも可能です。選択したメニュー項目は、「Menu Structure（メニュー構造）」セクションに表示されます。ドラッグ＆ドロップで項目やサブ項目を好きな順序に並べ替えることができます。

2. メニューをスタイル設定する

WordPressのドロップダウンメニューは、CSSを使ってカスタマイズできます。

この機能を有効にするには、「Menus（メニュー）」ページの右上にある「Screen Options（表示オプション）」をクリックし、「CSS Classes（CSSクラス）」にチェックを入れます。

メニュー項目を展開すると、「CSS Classes（CSSクラス）」というラベル付きの新しいテキストボックスが表示されます。ここにWordPressのCSSクラスを追加することで、新しいドロップダウンメニューのスタイルを自由にカスタマイズできます。ドロップダウンメニューを自分好みに仕上げるために、当社のCSSチートシートもぜひご活用ください。

3. メニューを公開する

新しく作成したメニューの表示位置を変更するには、「Menu Settings（メニュー設定）」セクション、または「Manage Locations（位置の管理）」タブから、利用可能なオプションを選択します。なお、選択肢は使用中のWordPressテーマによって異なります。

この例では、メニューを上部（ヘッダー）に表示します：

右下にある「Save Menu（メニューを保存）」ボタンをクリックして、変更を保存し、ドロップダウンメニューを公開します。

WordPressサイトにおけるドロップダウンメニューの利点

ドロップダウンメニューは、WordPressサイトにおけるデザイン性と機能性の両面で多くの利点をもたらします。主なメリットは以下の通りです：

• スペースの有効活用：サブメニューを使えば、多くのリンクをすっきりと表示できます。
• ユーザーの操作性向上：目的のページに素早くアクセスできるため、ナビゲーションがスムーズになります。
• 拡張性の高さ：新しいページやカテゴリーを追加しても、メニュー全体の構成を変更する必要がありません。
• デザイン性の向上：サイトのデザインに合わせてカスタマイズ可能で、視覚的な統一感を高めます。
• アクセシビリティの改善：認知的な障害を持つユーザーにも配慮された構成が可能です。
• コンテンツ構造の整理：階層構造によって情報が整理され、閲覧者にとってわかりやすくなります。

WordPressでドロップダウンメニューを作成する際のベストプラクティス

WordPressサイトにおいて、効果的なナビゲーションメニューはユーザー体験の向上に不可欠です。特にドロップダウンメニューを取り入れたメニューは、直感的かつ視覚的に魅力的であることが求められ、重要なコンテンツへ素早くアクセスできるように設計する必要があります。

以下は、ドロップダウンメニューを最適化するための重要なポイントです：

シンプルで直感的な構成にする

ドロップダウンメニューでは、シンプルさが最も重要です。わかりやすいメニュー構成は、ユーザーの混乱やストレスを防ぎます。もっとも重要なリンクを優先的に表示し、すぐにアクセスできるようにしておきましょう。

また、メニュー階層の数は最小限に抑えることも大切です。階層が多すぎると、ユーザーが目的のページにたどり着きにくくなり、結果的にサイトから離脱されてしまうリスクがあります。

わかりやすく具体的なラベルを使う

各メニュー項目には、リンク先のコンテンツを正確に表す明確なラベルを付けましょう。曖昧で一般的すぎる表現は避け、ユーザーがクリック先をイメージしやすいようにします。

ラベルの一貫性を保つことも重要です。明確なラベリングはユーザーの期待値を正しく設定できるだけでなく、サイト全体のブランディングの統一感にもつながります。また、ARIA（アクセシビリティ対応仕様）ラベルをメニュー項目に追加することで、スクリーンリーダー利用者にもメニュー内容を正確に伝えられ、アクセシビリティの向上にもつながります。誰にとっても使いやすいナビゲーションを目指しましょう。

ビジュアル要素を活用する

メニューをよりインタラクティブにする最も効果的な方法の一つは、プラグインを使って各メニュー項目にWordPressメニューアイコンを追加することです。

例えば、「Menu Image」プラグインを使用すると、FontAwesomeやDashIconsの豊富なアイコンコレクションから選択して、各メニュー項目にアイコンを追加できます。選んだアイコンは、ドロップダウンメニュー内のさまざまな位置に配置したり、マウスホバー時にアニメーションとして表示させたりすることも可能です。

ただし、不要なアイコンを詰め込みすぎるのは避けましょう。メニューの視認性が下がり、ユーザーがWordPressサイトを快適に閲覧できなくなる可能性があります。

カスタムCSSを追加する

先述のとおり、新しいメニューにカスタムCSSクラスを追加できます。各メニュー項目の色、フォントサイズ、間隔などを調整するために、カスタムCSSを活用してみましょう。

ダッシュボードで「Appearance（外観）」→「Customize（カスタマイズ）」に進み、「Additional CSS（追加CSS）」機能を使って、サイトにカスタムコードを追加します。

ブラウザの「Inspect Element（要素を検証）」ツールを使用して、テーマのCSSセレクターである#IDを特定します。これにより、カスタマイズしたい特定の要素を選択できるようになります。

この例では、トップメニューのフォントカラーを青に変更します。以下は、フォントカラーを変更するために使用したコードです：

#top-menu li.menu-item a {
color:#0051D7;
}

さまざまなCSSスタイルを試したり、あらかじめ用意されたコードを活用したりして、デザイン作業を効率化してみましょう。

メガメニューを作成する

多数のオプションを1つのドロップダウンメニューで表示したい場合は、WordPressメガメニューを作成するのがおすすめです。標準的なドロップダウンメニューとは異なり、メガメニューにはより多くのリンクやサブメニューを含めることができます。

このタイプのメニューでは、ウェブサイト全体の構造を一目で表示できるため、訪問者はメインメニューからサイトの最も深い部分へもすぐにアクセス可能です。ユーザーの移動経路を短縮できるため、大規模なウェブサイトに最適です。

カスタムメガメニューを簡単に作成できるWordPressメニュープラグインは多数あります。上記のメガメニューのデザイン例は、Max Mega Menuプラグインを使用して作成しました。その他の代表的なWordPress用メガメニュープラグインには、QuadMenuやSuperflyなどがあります。

ドロップダウンメニューを異なるブラウザやデバイスでテストする

すべてのインタラクティブ要素の互換性と機能性を確保するために、ドロップダウンメニューをさまざまなブラウザやデバイスでテストすることが不可欠です。

ステージング環境を活用することが強く推奨されます。これにより、実装前にメニューやデザインを安全にテスト・調整でき、すべてのプラットフォームで一貫性のあるスムーズなユーザー体験を確保できます。

ステージング環境を提供しているウェブホスティングプロバイダーは、この目的に非常に役立ちます。HostingerのBusinessプランおよびCloud Startupマネージド型WordPressホスティングプランには、便利なステージングツールが含まれています。

まとめ

WordPressのドロップダウンメニューは、ウェブサイトのナビゲーションシステムにおいて重要な役割を果たします。適切に作成されていれば、訪問者がサイトをスムーズに探索できるだけでなく、検索エンジンのクローラーによるインデックス登録も助けてくれます。

この記事では、WordPressでドロップダウンメニューを手動で作成する方法と、プラグインを使って作成する方法について解説しました。あわせて、ドロップダウンメニューを最適化するためのヒントも紹介しています。

このガイドが、WordPressのドロップダウンメニューに関する疑問を解消する手助けになれば幸いです。あなたのウェブサイト作りがうまくいきますように！

WordPressドロップダウンメニューに関するよくある質問

以下は、WordPressでドロップダウンメニューを作成する際によく寄せられる質問です。

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。