WordPressサイトにメガメニューを追加する方法（ステップバイステップ）

メガメニューを使用すると、構造化されたナビゲーションしやすいレイアウトで、さまざまなリンクやコンテンツカテゴリを表示できます。

これにより、サイトのナビゲーションがより直感的でアクセスしやすくなり、訪問者のブラウジング体験を大幅に向上させることができます。

WPBeginnerでは、ページ上部に最も重要なリンクを表示するためにメガメニューを使用しています。ユーザーがそれをクリックするとドロップダウンメニューが開き、追加の主要リンクが表示されます。この設定により、ページが散らかって見えないようにしながら、幅広いオプションを提示する、クリーンで整理されたナビゲーションメニューを作成することができました。

この記事では、WordPressウェブサイトにメガメニューを簡単に追加する方法をステップバイステップでご紹介します。

WordPressサイトにメガメニューを追加する理由

WordPressには、ドロップダウンメニュー、ヘッダーメニューなど、あらゆる種類のメニューを作成できるドラッグアンドドロップビルダーが付属しています。WordPressテーマでカスタムナビゲーションメニューを作成できるプラグインもあります。

ただし、サイトにコンテンツが多い場合は、代わりにメガメニューを作成する必要があるかもしれません。これにより、標準のWordPressメニュー構造にマルチカラムのドロップダウンを追加できます。

メガメニューを使用して、コンテンツをさまざまな見出しと小見出しの下に整理できるため、訪問者は探しているものをすばやく見つけることができます。たとえば、オンラインマーケットプレイスを作成する場合、すべての製品カテゴリとサブカテゴリをメガメニューに配置することができます。

メガメニューは、動画、テキスト、検索、最新の投稿など、訪問者にリッチコンテンツを表示することもできます。

画像を追加することもできます。画像があると、メガメニューが見やすくなります。

それでは、WordPressウェブサイトにメガメニューを簡単に追加する方法を見てみましょう。

WordPressサイトでメガメニューを作成する方法

WordPressサイトにメガメニューを追加する最も簡単な方法は、Max Mega Menuを使用することです。このプラグインを使用すると、動画、画像ギャラリー、検索など、リッチコンテンツをメガメニューに追加できます。

このようにして、より魅力的で役立つメニューを作成できます。

また、異なる色を追加したり、フォントサイズを変更したり、異なるアイコンを使用したりすることで、メニューのスタイルを変更することもできます。

まず、プラグインをインストールして有効にする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

WordPressウェブサイトでメガメニューを有効にする

有効化したら、WordPressダッシュボードからメガメニュー » メニューロケーションページに移動して、メガメニューを追加できるさまざまなエリアを確認してください。

WordPressのテーマによって、さまざまなオプションが表示される場合があります。

まず、メガメニューを使用したいすべての場所でメガメニューを有効にする必要があります。

これを行うには、場所をクリックして展開し、「有効」ボックスをチェックするだけです。

その後、メガメニューを開く「イベント」を変更できます。

デフォルト設定は「ホバーインテント」で、訪問者がメガメニューに数秒間マウスカーソルを合わせるとトリガーされることを意味します。これはほとんどのWordPressウェブサイトでうまく機能しますが、「エフェクト」ドロップダウンを選択して代わりに「ホバー」または「クリック」を選択することもできます。

「クリック」を選択した場合、訪問者はクリックしてメガメニューを探索する必要があります。これは、訪問者が誤ってメニューをトリガーしてしまうことを心配している場合に役立ちます。これはイライラする可能性があります。

一方、「ホバー」は、訪問者がマウスをメニューの上に移動するとすぐにメガメニューを開きます。これにより、訪問者はサイトのさまざまなエリアを探索しやすくなるため、ランディングページやウェブサイトのホームページで「ホバー」を使用すると良いでしょう。

この決定を行った後、「エフェクト」設定を使用してメニューの開き方を変更できます。

Max Mega Menuには、フェードやスライドアップなど、試せるさまざまなアニメーションがあります。アニメーションの速度を変更することもできます。さまざまなアニメーションを試すことで、訪問者の注意を引くメガメニューを作成できます。

アニメーションを使用したくない場合は、最初のドロップダウンを開いて「なし」を選択するだけです。

デフォルトでは、メガメニューはモバイルデバイスでアニメーションを使用しません。スマートフォンやタブレットは通常、処理能力が低いためです。ただし、モバイル訪問者向けに独自の Сustom アニメーションを作成したい場合は、「エフェクト（モバイル）」領域の設定を使用できます。

モバイルでメガメニューをテストしたい場合は、デスクトップからWordPressサイトのモバイルバージョンを表示する方法に関するガイドを確認してください。

「イベント」ドロップダウンメニューから「クリック」を選択した場合は、次に「詳細設定」タブを選択してください。

ここでは、「クリックイベントの動作」を使用して、訪問者がメガメニューをクリックしたときに何が起こるかを定義できます。たとえば、2回目のクリックでメニューが閉じたり、新しいリンクが開いたりします。

他にも設定を確認できますが、ほとんどのWordPressブログやウェブサイトにはこれで十分です。

プラグインの設定が完了したら、「変更を保存」をクリックしてください。

より多くの場所でメガメニューを有効にするには、上記と同じ手順に従ってください。

ウェブサイトでのメガメニューの外観をカスタマイズする

次のステップは、メガメニューがウェブサイトでどのように表示されるかを構成することです。

画面左側の「メニューテーマ」タブを選択することで、これを行うことができます。

この画面では、矢印アイコンの方向を変更したり、異なる行の高さを設定したり、影を追加したりできます。

設定に満足したら、「変更を保存」をクリックすることを忘れないでください。

これらの変更をいつでも削除したい場合は、「Reset Widget Styling」ボックスにチェックを入れ、「Save Changes」をクリックするだけです。

次に、メニューがデフォルトの折りたたまれた状態のときに訪問者が見るバーであるメニューバーをカスタマイズできます。

これらの変更を行うには、「メニューバー」タブをクリックし、設定を使用して背景色、パディング、境界線の半径などを変更してください。

「メニューの背景」セクションで2つの異なる色を選択することで、カラーグラデーションを作成することもできます。

下にスクロールすると、トップレベルメニューの外観を変更できます。

これは、メガメニューが折りたたまれた状態で表示される最初の行の項目です。

これらは非常に重要なので、最上位レベルのメニュー項目を目立たせたいと思うかもしれません。

例えば、以下の画像では、異なる背景色を使用しています。

「ホバーステート」セクションでは、現在選択されているトップレベルのメニュー項目をハイライト表示できます。

例えば、次の画像では下線効果を使用しています。

これにより、訪問者はメニュー上の現在地を把握しやすくなり、大規模なメガメニューが必要なサイトで特に役立ちます。

ホバー状態を追加する場合は、画面の下部までスクロールして「現在の項目をハイライト」ボックスをチェックしてください。

その後、サブメニューの外観を変更できます。

これは、以下の画像でご覧いただけるように、最上位の親の下に表示されるメニューです。

サブメニューをカスタマイズするには、「Mega Menus」タブをクリックします。

これらの設定を使用して、サブメニューの背景色を変更したり、半径を大きくして角を丸くしたり、パディングを追加したりできます。

メガメニューにはウィジェットを使用してコンテンツを追加します。例えば、ギャラリーウィジェットを追加して最も人気のあるWooCommerce製品を表示したり、メガメニュー内にタグクラウドを埋め込んだりできます。これらのウィジェットは追加情報を提供したり、訪問者が特定のメニュー項目をクリックするように促したりすることができます。

これらのウィジェットの外観は、「ウィジェット」セクションまでスクロールしてカスタマイズできます。たとえば、ウィジェットのタイトルの色を変更したり、フォントサイズを大きくしたり、パディングを追加したり、配置を調整したりできます。

この画面では、ウェブサイト、ブログ、またはオンラインマーケットプレイスで、2レベルメニュー項目と3レベルメニュー項目の表示方法をカスタマイズすることもできます。これらは、トップレベルメニュー項目の子項目です。

メニューを構築する際、ネストされたメガメニューを作成するために4つ以上のレベルを追加することが可能です。このようにすると、WordPressは単純に3番目のレベルのスタイルをそれ以降のすべてのレベルに使用します。

次の画像でこれを実際に見ることができます。2番目のレベルは赤色のテキストで、3番目と4番目のレベルの両方で同じ青色のテキストが使用されています。

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

WordPressサイトにメガメニューを追加する方法

メガメニューのカスタマイズが完了したら、それをウェブサイトに追加する時間です。

管理画面のサイドバーから、外観 » メニュー ページにアクセスしてください。

既存のメニューをメガメニューにしたい場合は、「編集するメニューを選択」ドロップダウンを開き、リストから選択してください。選択したメニューは、メガメニュー機能を有効にした場所に割り当てられている必要があることに注意してください。

最初から始めたい場合は、「新しいメニューを作成」をクリックし、新しいメガメニューのタイトルを入力してください。

次に、使用したい場所を選択し、「メニューを作成」をクリックします。ここでも、メガメニューを有効にした場所である必要があります。

WordPressメニューにコンテンツを追加する

その後、メガメニューに含めたいすべてのページ、投稿、WooCommerceの商品、その他のコンテンツを追加します。

WordPressでのナビゲーションメニューの追加方法については、WordPressでのナビゲーションメニューの追加方法に関する初心者向けガイドをご覧ください。

次に、メガメニューで使用したい親メニューとサブメニューに項目を配置する必要があります。サブメニューを作成するには、項目を親メニューの下にドラッグし、右に少しドラッグしてから離します。

複数のレベルを作成するには、アイテムを右にドラッグし続けるだけで、互いの下にインデントされて表示されます。これは、WordPressでドロップダウンメニューを作成するのと似ています。

メガメニュー機能を有効にする

完了したら、「Max Mega Menu Settings」をクリックして展開し、「Enable」の横にあるボックスにチェックを入れます。

このボックスでは、デフォルトのメガメニュー設定を上書きすることもできます。これにより、WordPressウェブサイトのさまざまな領域にユニークなメガメニューを作成できるため、好きなように変更してください。

その後、「保存」をクリックします。

メガメニューレイアウトを作成する

次に、最初の最上位アイテムにマウスカーソルを合わせると、新しい「メガメニュー」ボタンが表示されます。そのボタンをクリックしてください。

これで、このトップレベル項目のすべての設定が表示されます。

デフォルトでは、Max Mega Menuはフライアウトスタイルを使用します。サブメニューは横から「フライアウト」します。代わりにメガメニューを作成するには、「サブメニュー表示モード」ドロップダウンを開き、「標準レイアウト」または「グリッドレイアウト」のいずれかを選択します。

標準レイアウトは、すべてのサブメニューを列で表示します。

一方、グリッドレイアウトを使用すると、サブメニュー項目を列と行に整理できます。

オンラインストアのすべてのデジタル製品など、多くのコンテンツを表示したい場合や、非常に具体的なレイアウトを考えている場合に最適です。

標準またはグリッドレイアウトを選択すると、この親に割り当てられたすべてのサブメニューが表示されます。

これで、これらの項目がメガメニュー内でどのように配置されるかを変更できます。

標準レイアウトを使用している場合は、右上隅のドロップダウンメニューを使用して列数を変更できます。

グリッドレイアウトを使用している場合は、「+列」および「+行」ボタンを使用して列と行を追加できます。

レイアウトに満足したら、ドラッグアンドドロップを使用してサブメニュー項目を異なる列と行に配置できます。

その後、各項目が列内でどれだけのスペースを占めるかを変更する時間です。Max Mega Menuは、現在のサイズを利用可能な全幅の分数で表示します。

たとえば、次の画像では、両方の列が利用可能なスペースの半分を占めています。

アイテムのサイズを変更するには、矢印ボタンをクリックして分数値を大きくしたり小さくしたりするだけです。

モバイルフレンドリーなメガメニューを作成する（グリッドレイアウトのみ）

デフォルトでは、Max Mega Menuはデスクトップとモバイルデバイスで同じコンテンツを表示します。これはグリッドレイアウトの場合、問題となる可能性があります。スマートフォンやタブレットは通常画面が小さく、水平スクロールが困難になるためです。

グリッドレイアウトを使用している場合、モバイルデバイス用に異なるメガメニューを作成できます。たとえば、ユーザーが水平スクロールする必要がないように、列数を少なくすることができます。このようにして、モバイル対応のWordPressメニューを作成できます。

「モバイルで非表示」アイコン（小さな携帯電話のようなアイコン）を使用して、列全体または行全体を非表示にすることができます。

アイコンをオン/オフするだけで、デスクトップとモバイルで異なるコンテンツを表示/非表示にできます。

メガメニューウィジェットでリッチコンテンツを追加

これで、メガメニューにウィジェットを追加できるようになります。これにより、最近のコメント、動画、ギャラリーなどをサブメニューに表示できます。

例えば、オンラインストアのセールを宣伝するために画像を使用したり、最新の商品を強調したりすることができます。

ウィジェットを追加するには、「ウィジェットを選択…」ドロップダウンをクリックして開くだけです。

リストからウィジェットを選択できるようになりました。

WordPressはウィジェットを列または行に自動的に追加しますが、ドラッグアンドドロップを使用して新しい場所に移動できます。

ウィジェットを設定するには、その小さなレンチアイコンをクリックしてください。

これにより、ウィジェットにコンテンツを追加したり、設定を変更したりできるポップアップが開きます。

作成しているウィジェットの種類によって、さまざまなオプションが表示されます。たとえば、メガメニューにオーディオミュージックプレーヤーウィジェットを追加する場合、オーディオトラックをアップロードできる設定が表示されます。

すべてのウィジェットには「タイトル」フィールドがあり、ウィジェットの上に表示されるテキストを追加できます。

完了したら、「保存」をクリックして変更を保存し、「閉じる」を選択します。メガメニューにさらにウィジェットを追加するには、上記と同じプロセスを繰り返してください。

デフォルトのメガメニュー設定を確認する

次に、「設定」タブをクリックします。

ここでは、チェックボックスを使用して、サブメニューのさまざまなコンテンツを表示または非表示にできます。

モバイルデバイスやデスクトップでサブメニューを表示または非表示にすることもでき、配置を変更してサブメニューが最上位の親の左側または右側に開くようにすることもできます。

デフォルト設定を変更した場合は、「変更を保存」をクリックすることを忘れないでください。

WordPressメガメニューに画像アイコンを追加する

画像アイコンは、訪問者がナビゲーションラベルを読まなくても、メニュー項目が何についてかを理解するのに役立ちます。これは、訪問者が各ナビゲーションラベルを読むよりもコンテンツを素早くスキャンすることを好む可能性のある大きなメニューで特に役立ちます。

アイコンを使用して、最も重要なコンテンツを際立たせることができます。たとえば、「チェックアウト」メニューにカートアイコンを追加して、訪問者に購入を完了するように促すことができます。

ナビゲーションメニューに画像アイコンを追加するには、「Icon」タブをクリックします。

内蔵ライブラリからダッシュアイコンを選択するか、独自の画像を使用できます。Max Mega Menu Proにアップグレードすると、他のアイコンフォント、Genericons、FontAwesomeにもアクセスできるようになります。

WordPressサイトでメガメニューの構成を完了する

これらの設定をすべて確認したら、ポップアップウィンドウを閉じて、メインの外観 » メニューページに戻ることができます。

これで、各トップレベルの親に対してこのプロセスを繰り返すことができます。

メガメニューの設定が完了したら、「メニューを保存」ボタンをクリックして公開してください。

次に、ウェブサイトのフロントエンドにアクセスして、メガメニューが機能していることを確認してください。

この記事がWordPressサイトにメガメニューを追加する方法を学ぶのに役立ったことを願っています。また、WordPressヘッダーメニューにボタンを追加する方法のステップバイステップガイドと、WordPressでスティッキーフローティングナビゲーションメニューを作成する方法のチュートリアルも参照してください。

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