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

WordPressサイトにメガメニューを追加したいですか？

メガメニューでは、何十、何百ものリンクをユーザーフレンドリーなカラムや行に並べることができます。また、画像や動画などのリッチコンテンツを追加することで、メガメニューの利便性を高め、ユーザーエクスペリエンスを向上させることができます。

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

なぜWordPressサイトにメガメニューを追加するのか？

WordPressには、ドロップダウンメニューやヘッダーメニューなど、すべてドラッグ＆ドロップで作成できるビルダーが用意されています。WordPressテーマでカスタマイナビゲーションメニューを作成できるプラグインもあります。

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

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

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

また、画像を追加することで、メガメニューをスキャンしやすくすることもできる。

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

WordPressサイトのメガメニューの作り方

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

こうすることで、より魅力的で役に立つメニューを作ることができる。

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

まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。

WordPressサイトでメガメニューを有効化する

有効化した後、WordPressダッシュボードからMega Menu ” Menu Locationsページにアクセスすると、メガメニューを追加できるすべてのエリアが表示されます。

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

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

これを行うには、単にクリックして場所を展開し、その「有効化」ボックスをチェックします。

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

初期設定は「Hover intent」で、訪問者がメガメニューの上にマウスを数秒間オーバーさせないと発動しません。これはほとんどのWordPressサイトで有効ですが、代わりに’Effect’ドロップダウンを開き、’Hover’または’Click’を選択することもできます。

クリック」を選択した場合、訪問者はメガメニューを探索するためにクリックする必要があります。これは、訪問者が誤ってメニューを起動してしまうことを心配している場合に便利です。

一方、「マウスオーバー」は、訪問者がマウスを乗せるとすぐにメガメニューが開きます。これは訪問者にサイトの様々なエリアを探索することを促すことができるので、ランディングページやサイトのトップページで’ホバー’を使用するとよいでしょう。

この決定後、「エフェクト」設定でメニューの開き方を変更することができます。

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

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

初期設定では、スマートフォンやタブレットの処理能力が一般的に低いため、メガメニューはモバイル端末ではアニメーションを使用しません。しかし、モバイル訪問者のためにユニークなアニメーションを作成したい場合は、「効果（モバイル）」エリアの設定を使用することができます。

メガメニューをモバイルでテストしたい場合は、WordPressサイトのモバイル版をデスクトップから表示する方法をご覧ください。

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

ここでは、’Click Event Behavior’を使って、訪問者がメガメニューをクリックしたときに起こることを定義することができます。例えば、2回目のクリックはメニューを閉じたり、新しいリンクを開いたりします。

もっと多くの設定に目を通すことができるが、ほとんどのWordPressブログやサイトではこれで十分だろう。

プラグインの設定に満足したら、「変更を保存」をクリックします。

より多くのロケーションでメガメニューを有効化するには、上記と同じ手順を踏むだけです。

サイト上のメガメニューの見え方をカスタマイズする

次のステップは、サイト上でメガメニューがどのように見えるかを設定することです。

画面左の「メニューテーマ」タブを選択することで可能です。

この画面では、矢印アイコンの向きを変えたり、線の高さを変えたり、影をつけたりすることができる。

設定に満足したら、『変更を保存』をクリックするのをお忘れなく。

これらの変更を削除したい場合は、’ウィジェット・スタイルをリセット’ボックスをチェックし、’変更を保存’をクリックしてください。

次に、メニューバーをカスタマイズすることができます。メニューバーは、メニューが初期設定の折りたたまれた状態のときに訪問者に見えるバーです。

これらの変更を行うには、「メニューバー」タブをクリックし、設定を使って背景色、パディング、枠線の半径などを変更する。

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

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

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

とても重要な項目なので、トップレベルのメニュー項目は目立たせたほうがいいかもしれない。

例えば、次の画像では背景色を変えている。

マウスオーバーの状態」では、現在選択されているトップレベルメニュー項目をハイライトすることができます。

例えば、次の画像では下線エフェクトを使っている。

これは、訪問者がメニューのどこにいるかを確認するのに役立ち、大きなメガメニューが必要なサイトには特に便利です。

マウスオーバー状態を追加する場合は、画面を一番下までスクロールし、「現在の項目を強調表示する」にチェックを入れる。

その後、サブメニューの見栄えを変更することができます。

これは、以下の画像にあるように、トップレベルの親の下に外観されるメニューである。

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

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

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

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

この画面では、第2レベルメニュー項目と第3レベルメニュー項目があなたのサイト、ブログ、オンラインマーケットでどのように見えるかをカスタマイズすることもできます。これらはトップレベルメニュー項目の子供です。

メニューを作るとき、4つ以上のレベルを追加して入れ子のメガメニューを作ることができます。この場合、WordPressは第3レベルのスタイリングを後続のすべてのレベルに使用します。

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

メニューの設定に満足したら、『変更を保存』をクリックするのを忘れないでください。

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

メガメニューのカスタマイザーが終わったら、いよいよサイトに追加します。

管理サイドバーから外観 ” メニューページに移動するだけです。

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

ゼロから始める場合は、「新規メニューを作成」をクリックし、新しいメガメニューのタイトルを入力します。

次に、使用したい場所を選択し、「メニューを作成」をクリックします。もう一度言いますが、これはメガメニューを有効化した場所でなければなりません。

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

その後、すべてのページ、投稿、WooCommerce商品、メガメニューに含めたいその他のコンテンツを追加します。ステップバイステップの手順については、WordPressでナビゲーションメニューを追加する方法の初心者向けガイドをご覧ください。

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

複数のレベルを作成するには、項目を右にドラッグし続け、互いの下にインデントされたように表示させるだけです。これはWordPressでドロップダウンメニューを作るのと同じです。

メガメニュー機能の有効化

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

このボックスでは、初期設定のメガメニューを上書きすることもできます。これにより、WordPressサイトの様々なエリアにユニークなメガメニューを作成することができます。

その後、『保存』をクリックする。

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

最初のトップレベル項目にマウスオーバーすると、新しい「メガメニュー」ボタンが表示されます。ボタンをクリックしてください。

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

初期設定では、Max Mega Menu はサブメニューが横から「フライアウト」するフライアウトスタイルを使用します。代わりにメガメニューを作成するには、’Sub menu display mode’ ドロップダウンを開き、’Standard Layout’ か ‘Grid Layout’ のどちらかを選択してください。

標準レイアウトでは、すべてのサブメニューがカラムで表示される。

一方、グリッドレイアウトでは、サブメニューの項目をカラムや行にまとめることができる。

オンラインストアのすべてのデジタル製品など、多くのコンテンツを表示したい場合や、特定のレイアウトを念頭に置いている場合に最適です。

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

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

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

グリッドレイアウトを使用している場合は、「+Column」と「+Row」ボタンでカラムと行を追加できます。

レイアウトに満足したら、ドラッグ＆ドロップでサブメニューの項目をカラムや行に並べることができます。

その後、各項目がカラムに占めるスペースを変更します。Max Mega Menuでは、現在のサイズが利用可能な幅の合計に対する割合で表示されます。

例えば、以下の画像では、両方のカラムが利用可能なスペースの半分を占めている。

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

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

初期設定では、Max Mega Menuはデスクトップとモバイル端末で同じコンテンツを表示します。スマートフォンやタブレットは一般的に画面が小さく、水平方向にスクロールするのが難しいため、これはグリッドレイアウトでは問題になることがあります。

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

小さな携帯電話のような「モバイル非表示」アイコンを使って、カラムや行全体を非表示にすることができる。

アイコンのオン・オフを切り替えるだけで、デスクトップとモバイルで異なるコンテンツを非表示にしたり、表示したりできる。

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

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

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

ウィジェットを追加するには、単にクリックして’ウィジェットを選択…’ドロップダウンを開きます。

リストからウィジェットを選択できます。

WordPressはウィジェットを自動的にカラムまたは行に追加しますが、ドラッグ＆ドロップを使って新しい場所に移動することができます。

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

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

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

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

完了したら、’Save’をクリックして変更を保存し、’Close’を選択してください。メガメニューにさらにウィジェットを追加するには、上記と同じ手順を踏むだけです。

メガメニューの初期設定を見直す

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

ここでは、チェックボックスを使って、サブメニューの異なるコンテンツを非表示にしたり、表示したりすることができます。

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

初期設定を変更した場合は、忘れずに『変更を保存』をクリックすること。

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

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

アイコンを使って、最も重要なコンテンツを目立たせることができます。例えば、「購入手続き」メニューにお買い物カゴのアイコンを追加することで、訪問者の購入手続きを促すことができます。

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

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

WordPressサイトのメガメニューの設定を終了する

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

各トップレベルの親について、このプロセスを繰り返すことができる。

メガメニューの設定に満足したら、「メニューを保存」ボタンをクリックし、本番のメニューにします。

さあ、あなたのサイトのフロントエンドにアクセスして、メガメニューの動きを見てみましょう。

この投稿がWordPressサイトにメガメニューを追加する方法を学ぶのにお役に立てば幸いです。また、最高のドラッグ＆ドロップWordPressページビルダーと ブログのトラフィックを増やす方法についてのステップバイステップガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.