WordPressでドロップダウンメニューを作成する方法（初心者ガイド）

WordPress でドロップダウンメニューを作成したいですか？

ドロップダウンメニューは、メニュー項目にマウスカーソルを合わせるとリンクのリストを表示します。これらのメニューを使用して、小さなスペースに多くのオプションを表示し、リンクをカテゴリに整理することで、訪問者が探しているものを見つけるのを助けることができます。

この初心者向けガイドでは、WordPressでドロップダウンメニューを作成する方法を説明します。

WordPressでドロップダウンメニューを使用する理由

WordPressには、サイトにナビゲーションメニューを簡単に追加できる組み込みのメニュー管理システムが付属しています。

ナビゲーションメニューは、ウェブサイトの最も重要なページへのリンクであり、通常はウェブサイトのロゴの隣に一列に表示されます。

WordPressブログを始めたばかりの場合や、数ページしかないウェブサイトを作成している場合は、メニューを1行で作成するのが理にかなっています。これにより、訪問者はすべての重要なページを一目で確認できます。

ただし、オンラインストアや大規模なウェブサイトを運営している場合は、多くのコンテンツがある可能性があります。これらのリンクをすべてメニューに追加すると、圧倒されてサイトが乱雑に見える可能性があります。

ドロップダウンメニューは、訪問者が親項目にマウスを合わせたときにのみメニューリンクを表示することで、この問題を解決します。また、コンテンツをトピック、カテゴリ、またはグループに整理することもできます。メニューにタイトルを追加することもできます。

縦型ナビゲーションメニューと同様に、限られたスペースで多くのコンテンツを表示するのに最適です。

それでは、WordPressのドロップダウンメニューを簡単に作成し、ウェブサイトに追加する方法を見ていきましょう。

動画チュートリアル

WPBeginnerを購読する

動画が気に入らない場合や、さらに詳しい説明が必要な場合は、読み進めてください。

ステップ1：ドロップダウンメニュー対応のテーマを選択する

WordPressには組み込みのメニュー管理システムがありますが、これらのメニューの外観は、WordPressテーマによって異なります。

ほとんどすべてのWordPressテーマは、デフォルトでドロップダウンメニューをサポートしています。ただし、一部のテーマではドロップダウンのサポートが適切でない場合があります。まず、テーマがドロップダウンメニューをサポートしていることを確認する必要があります。

テーマがドロップダウンナビゲーションをサポートしているかどうかはどうすればわかりますか？

公式WordPressリポジトリからテーマをダウンロードした場合、そのテーマのページにアクセスし、「プレビュー」ボタンをクリックするとライブデモを確認できます。

その後、デモにドロップダウンメニューが含まれているかどうかを確認できます。

有料のWordPressテーマを使用している場合、開発者がウェブサイトにライブデモを用意していることがあります。テーマのドキュメントを確認して詳細情報を得ることもできます。

それでも不明な場合は、いつでも開発者にヘルプを求めることができます。このトピックの詳細については、WordPressサポートの適切な依頼方法と取得方法に関するガイドを参照してください。

WordPressテーマがドロップダウンメニューをサポートしていない場合は、サポートしているテーマを見つける必要があります。多くのヒントについては、完璧なWordPressテーマの選び方に関するガイドをご覧ください。

お役に立てるよう、ドロップダウンメニューをサポートする優れたテーマをいくつかご紹介します。

• Astra – 複数のスターターサイトと豊富な機能を備えた多目的WordPressテーマです。
• StudioPressテーマ – Genesisテーマフレームワークの上に構築されたこれらのプロフェッショナルなテーマは、ウェブサイトの読み込み速度を向上させるのに役立ちます。
• OceanWP – あらゆる種類のウェブサイトに適した人気のWordPressテーマです。
• Ultra – Themifyビルダー搭載のこのドラッグ＆ドロップWordPressテーマには、美しいテンプレートと柔軟なテーマオプションが付属しています。
• Divi – Elegant Themes による人気のテーマで、Divi ページビルダーを使用し、ドロップダウンメニューを含む多くのドラッグ＆ドロップ機能が付属しています。

それでは、WordPressのドロップダウンメニューを作成する方法を見てみましょう。

ステップ 2: WordPress でナビゲーションメニューを作成する

まずは簡単なメニューを作成しましょう。

ウェブサイトにナビゲーションメニューをすでに設定している場合は、次のステップに進んでください。

開始するには、WordPressダッシュボードの外観 » メニューに移動し、「新しいメニューを作成」リンクをクリックします。

注意: 代わりに外観 » エディターが表示される場合は、テーマがフルサイト編集（FSE）をサポートしていることを意味します。その場合は、下のFSEセクションにスキップできます。

次に、ナビゲーションメニューの名前を入力する必要があります。

これは参照用ですので、WordPress管理画面内でメニューを識別するのに役立つものであれば、何でも使用できます。

[メニュー名] フィールドにタイトルを入力したら、[メニューを作成] をクリックします。WordPress は空のメニューを作成します。

次に、ナビゲーションメニューにトップリンクを追加する必要があります。これらはドロップダウンメニューの最上段に表示され、他のすべての投稿やページの親となる項目です。

左側の列で、追加したい各ページの横にあるチェックボックスをオンにするだけです。次に、「メニューに追加」ボタンをクリックします。

これらのページは、[メニュー構造] の下にある右側の列に表示されます。

ブログ投稿やカテゴリーを選択したり、カスタムリンクを追加したりすることもできます。より詳しい手順については、WordPressでナビゲーションメニューを追加する方法のガイドをご覧ください。

ステップ3：メニューにサブアイテムを追加する

次に、ドロップダウンメニュー内に表示されるサブアイテムを追加する必要があります。既存のどのメニューアイテムの下にもサブアイテムを追加できます。

このガイドでは、「ブログ」メニュー項目に件名カテゴリを追加する方法を示しますが、追加するコンテンツに関係なく、手順は同様です。

左側の列で、サブアイテムとして追加したいすべてのページを選択し、「メニューに追加」ボタンをクリックするだけです。これで、右側の列にアイテムが表示されます。

ただし、デフォルトでは、これらのリンクはすべて通常のメニュー項目として表示され、一番上の行に追加されます。

それらを親のサブアイテムにする必要があります。

これを行うには、メニュー項目をドラッグアンドドロップして、目的の親の下に配置するだけです。次に、少し右に移動すると、サブアイテムになります。

ドロップダウンに表示したいサブアイテムごとに、このプロセスを繰り返します。

メニューの設定が完了したら、変更を保存するために「メニューを保存」ボタンをクリックすることを忘れないでください。

ステップ4：ドロップダウンメニューを公開する

すでにウェブサイトで公開されているメニューを編集している場合、訪問者はすぐに変更を確認できます。

ただし、新しいメニューを作成する場合は、そのメニューの場所を選択する必要があります。

各WordPressテーマには独自のメニュー場所があり、画面の右側にある「メニュー設定」セクションで見つけることができます。使用したい場所の横にあるチェックボックスをオンにしてから、「メニューを保存」ボタンをクリックするだけです。

または、WordPressテーマにカスタムナビゲーションメニューを追加することもできます。

これで、ウェブサイトにアクセスしてドロップダウンメニューが機能していることを確認できます。

フルサイトエディターを使用してドロップダウンメニューを作成する方法

ブロックベースのテーマ（例：Hestia Pro）を使用している場合、フルサイトエディターを使用してサイトの任意の場所にドロップダウンメニューを追加できます。

開始するには、WordPress ダッシュボードで テーマ » エディター に移動するだけです。

デフォルトでは、フルサイトエディターにはテーマのホームページテンプレートが表示されます。

ウェブサイトの別の場所にドロップダウンメニューを追加するには、「テンプレート」または「パターン」のいずれかをクリックします。

エディタには、WordPressテーマを構成するすべてのテンプレートまたはテンプレートパーツのリストが表示されます。

ドロップダウンメニューを追加したい領域をクリックするだけです。たとえば、メインナビゲーションメニューを作成している場合は、通常、ヘッダーテンプレートパーツを選択します。

WordPressは、テンプレートまたはテンプレートパーツのプレビューを表示します。

このテンプレートを編集するには、小さな鉛筆アイコンをクリックしてください。

これが完了したら、左上にある青い「+」アイコンをクリックします。

表示される検索バーに「Navigation」と入力します。

右側のブロックが表示されたら、デザイン上にドラッグ＆ドロップします。

これで、そのブロックをクリックして選択するだけで、ナビゲーションブロックをカスタマイズするために使用できるさまざまな設定が表示されます。

例えば、レイアウトを変更したり、表示設定を編集したり、テキストや背景の色を変更したり、フォントサイズを調整したりできます。

メニューにトップレベルのページを追加するには、「+」ボタンをクリックするだけです。

表示されるポップアップで、追加したいページのタイトルまたはURLの入力を開始します。目的のページが表示されたら、クリックしてメニューに追加します。

このプロセスを繰り返して、すべてのトップレベル項目をドロップダウンメニューに追加します。

これで、親項目のいずれかにサブメニューを追加できます。

右側のメニューで、親項目の隣にある点線のアイコンをクリックします。次に、「サブメニューリンクを追加」を選択します。

表示されるポップアップで、ドロップダウンメニューに表示したいページのタイトルまたは URL を入力します。

右側のページが表示されたら、クリックしてサブメニューアイテムとして追加します。

これで、ドロップダウンメニューに表示したいすべての項目について、これらの手順を繰り返すだけです。

メニューの設定が完了したら、「保存」をクリックして変更を保存します。

さて、ウェブサイトにアクセスすると、ドロップダウンメニューが機能しているのがわかります。

インタラクティブなドロップダウンメニューを作成するためのヒント

ナビゲーションメニューは、訪問者が興味深いコンテンツや特定の情報を見つけるために最初にアクセスする場所であるため、重要です。

それらを正しく使用すると、訪問者はあなたのウェブサイト内を移動しやすくなります。また、ページビューを増やし、直帰率を減らしながら、コンバージョンと売上を向上させるのに役立ちます。ページビューを増やし、直帰率を減らすこともできます。

これを踏まえ、役立つユーザーフレンドリーなドロップダウンメニューを作成するためのヒントをいくつかご紹介します。

1.マルチレベルドロップダウンメニューを作成する

このガイドでは、トップ行と1セットのサブアイテムを作成する方法を説明しました。ただし、サブアイテムの下に別のサブアイテムを追加して、マルチレベルのドロップダウンメニューを作成することもできます。

これは、コンテンツが大量にあるサイトや、さまざまなコンテンツカテゴリがあるサイトに役立ちます。

例えば、オンラインストアを運営している場合、「電化製品」カテゴリと「ノートパソコン」サブカテゴリがあるかもしれません。しかし、「Apple製ノートパソコン」や「ノートパソコンバッグ＆ケース」のような、さらに細かいサブカテゴリがある場合もあります。

この場合、マルチレベルドロップダウンを作成するのが理にかなっているかもしれません。これを行うには、サブアイテムの下にページをドラッグし、少し右に移動するだけです。

2.複数のドロップダウンメニューを作成する

ドロップダウンメニューはいくつでも作成でき、ウェブサイトのさまざまなエリアに表示できます。例えば、商品カテゴリのみを表示するドロップダウンメニューを作成することもできます。

これは商品ページには最適ですが、買い物客がサイトのさまざまなエリア（お問い合わせフォームやブログなど）を見つけられるように、ホームページ用のユニークなドロップダウンメニューを作成したい場合もあります。

上記で説明したのと同じプロセスで新しいドロップダウンメニューを作成し、「場所」設定を使用して、そのドロップダウンがウェブサイトのどこに表示されるかを制御してください。

3. ライブプレビューでメニューを作成する

ダッシュボードでドロップダウンメニューを作成するのが複雑すぎる場合は、WordPressカスタムizerに切り替えることができます。単に外観 » カスタマイズに移動して、ライブのWordPressテーマカスタムizerを起動します。

ここから、「メニュー」タブをクリックし、次にナビゲーションメニューを選択します。左側の列にドラッグ＆ドロップエディタが表示され、右側のパネルにサイトのライブプレビューが表示されます。

これでメニューの編集作業を行うことができます。行った変更はすべてライブプレビューに表示されます。

4. WordPress でドロップダウンとして大きなメガメニューを作成する

コンテンツが多い場合、標準のドロップダウンメニューで整理するのが難しい場合があります。

その代わりに、ウェブサイトの全構造をメガメニューとして表示し、メインメニューにマウスカーソルを合わせたときにのみ表示させることができます。

メガメニューはドロップダウンメニューに似ていますが、より多くのリンク、サブメニュー、その他のアイテムを表示できます。詳細な手順については、WordPressでメガメニューを作成する方法のステップバイステップチュートリアルをご覧ください。

4. ドロップダウンメニューのエクスポート

複数のWordPressウェブサイトを運営していますか？その場合、すべてのサイトで同じメニューレイアウトとデザインを使用したいかもしれません。

デフォルトのWordPressのインポート/エクスポート機能では、メニューのみをインポートおよびエクスポートすることはできませんが、プラグインを使用してメニューを転送することは可能です。

詳細な手順については、WordPress でナビゲーションメニューをインポートおよびエクスポートする方法に関するガイドをご覧ください。

この記事がWordPressでドロップダウンメニューを簡単に作成する方法を学ぶのに役立ったことを願っています。また、メニューに検索バーを追加する方法に関するガイドをご覧になるか、WordPressナビゲーションメニューをマスターするための最高のチュートリアルの専門家のおすすめをチェックしてください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。