メガメニューを使用すると、構造化されたナビゲーションしやすいレイアウトで、さまざまなリンクやコンテンツカテゴリーを表示できます。
これにより、サイトのナビゲーションがより直感的でアクセスしやすくなり、訪問者のブラウジング体験が大幅に向上します。
WPBeginnerでは、ページ上部に最も重要なリンクを表示するためにメガメニューを使用しています。ユーザーがクリックするとドロップダウンメニューが開き、さらに重要なリンクが表示されます。この設定により、ページが乱雑に見えることなく、幅広いオプションを提示し、すっきりと整理されたナビゲーションメニューを作成することができました。
この投稿では、WordPressサイトにメガメニューを簡単に追加する方法をステップ・バイ・ステップでご紹介します。
なぜWordPressサイトにメガメニューを追加するのか？
WordPressには、ドロップダウンメニューやヘッダーメニューなど、あらゆる種類のメニューを作成できるドラッグ＆ドロップビルダーが付属しています。WordPressテーマでカスタムナビゲーションメニューを作成できるプラグインもあります。
しかし、もしあなたのサイトに多くのコンテンツがあるのであれば、代わりにメガメニューを作成する必要があるかもしれません。これにより、WordPressの標準メニュー構造にマルチカラムドロップダウンを追加することができます。
メガメニューを使ってコンテンツを様々な見出しや小見出しで整理することで、訪問者は探しているものをすぐに見つけることができます。例えば、オンラインマーケットプレイスを作成する場合、商品カテゴリーとサブカテゴリーをすべてメガメニューに配置することができます。
メガメニューは、動画、テキスト、検索、最近の投稿などのリッチコンテンツを訪問者に表示することもできます。
また、画像を追加することで、メガメニューをスキャンしやすくすることもできる。
それでは、WordPressサイトにメガメニューを簡単に追加する方法を見ていきましょう。
WordPressサイトのメガメニューの作り方
WordPressサイトにメガメニューを追加する最も簡単な方法は、Max Mega Menuを使うことです。このプラグインを使用すると、動画、画像ギャラリー、検索などのリッチコンテンツをメガメニューに追加することができます。
こうすることで、より魅力的で役に立つメニューを作ることができる。
また、異なる色を追加したり、フォントサイズを変更したり、異なるアイコンを使用したりして、メニュースタイルを変更することもできます。
まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
WordPressサイトでメガメニューを有効化する
有効化した後、WordPressダッシュボードからMega Menu ” Menu Locationsページにアクセスすると、メガメニューを追加できるすべてのエリアが表示されます。
WordPressのテーマによって異なるオプションが表示される場合があります。
まず、メガメニューを使用したいすべての場所でメガメニューを有効化する必要があります。
これを行うには、単にクリックして場所を展開し、その「有効化」ボックスをチェックします。
その後、メガメニューを開く「イベント」を変更することができる。
デフォルトの設定は「マウスオーバーインテント」で、訪問者がメガメニューの上にマウスを数秒間置くことで発動します。これは、ほとんどのWordPressウェブサイトではうまく機能しますが、代わりに’効果’ドロップダウンを開き、’マウスオーバー’または’クリック’を選択することもできます。
クリック」を選択した場合、訪問者はメガメニューを探索するためにクリックする必要があります。これは、訪問者が誤ってメニューを起動してしまうことを心配している場合に便利です。
一方、「マウスオーバー」は、訪問者がマウスを乗せるとすぐにメガメニューが開きます。これは訪問者にサイトの様々なエリアを探索することを促すことができるので、ランディングページやサイトのトップページで’ホバー’を使用するとよいでしょう。
この決定後、「エフェクト」設定でメニューの開き方を変更することができます。
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のヘッダーメニューにボタンを追加するステップバイステップガイドや、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.
Moinuddin Waheed
I have thought many times over about implementing mega menu option like having a main menu with drop down of submenu with headline and description like the one wpbeginner has, but never knew that it can be achieved even without coding knowledge.
I will explore the mentioned options to see if it fits my present needs.
Thanks for the step by step guide for mega menu.
Paul Chapman
Ho
I have been looking for a mega menu plugin that allows me to have multi level mega menus… As in when I hover over a menu item within the 1st mega menu (1st level) another mega menu pops out with all the sub menu items in that, and so on and so forth. Is that possible?
WPBeginner Support
At the moment we do not have a specific plugin we would recommend for a multi-level mega menu like that. In the cases where you would want something like that you may want to consider having a landing page for the content where you have navigation into the content that you would want on the second mega menu.
管理者
Paul Chapman
Hi
Thanks for the advice… Coincidentally that’s exactly what I was thinking and I think it may be a better solution.
The thing that’s bothering me about that is ux. There’s a lot of sub menus/pages/categories so a lot of scrolling and I’d much rather people just point and click… That said, the majority of users will be on mobile devices so, they’ll be scrolling with the menu either way, if you catch my drift… It’s a kind of catch 22 situation.
Jiří Vaněk
I’ve been struggling with the megamenu plugin constantly. I wanted to create a menu similar to what you have. For instance, a main link for ‘contact’ and a submenu with two columns; one column with links to social networks and the other with text containing the address, phone number, email, and so on. However, I’m not succeeding. I manage to create a submenu with two columns and add text, but I’m struggling with the menu containing links to social networks. I created a new menu where I added links to social networks. I add this to the first column, but the links simply don’t show up. Instead, I see a message saying ‘if you are trying to display max mega menu, use the max megamenu widget’. I’m desperate about this. I’ve tried to set up the megamenu several times, and it always breaks somewhere. I use the GeneratePress theme. Despite having a good understanding of WordPress, I’m completely failing at this.
WPBeginner Support
If the plugin keeps breaking for you we would recommend reaching out to the plugin’s support and they should be able to take a look and assist in finding the root of the issue.
管理者
Jiří Vaněk
Thank you for the response and for your effort. Eventually, I looked into the template developer’s support. It’s GeneratePress. They have a detailed guide on how to create a mega menu using CSS code and other menu structure settings. I tried their solution on a test website, and it works. It does have limitations as it applies only to links, but for now, it partially solves my menu issues. So, for the time being, I’ll create a mega menu according to the template developer’s recommendations and continue investigating where I might be making a mistake or if there’s an issue with the template. I’ll also try reaching out to the developer’s support.
Ghazal Ba khadher
I want to add pages in the mega menu. I want to delete the word Pages as the headline. could you please help me in this regard please.
WPBeginner Support
In the menu settings, there should be the option to hide the text when you want to hide a section title like that.
管理者
taufeeq khan
How to create content on mega menu …..for example when i click on mega menu then it open the new page of content. just like we are use home contact et.
WPBeginner Support
For what it sounds like you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/wp-tutorials/how-to-redirect-users-to-a-random-post-in-wordpress/
管理者
Hart
Thanks a lot this is really helpful.
WPBeginner Support
Glad our guide was helpful
管理者
Anon
How to add a megamenu on your site: install this plugin
Come on, give an actual tutorial next time. Megamenus are totally within the realm of development.
WPBeginner Support
While there is certainly the capacity to create a custom mega menu with code, it is difficult to have that code affect every theme and be beginner friendly. We will certainly add the code for different articles when we’re able but for now, we will continue to recommend plugins that already have the code created
管理者
Ben
Is MaxMegaMenu compatible with WPML for multilingualism? They refer to POT files, but WPML only lists MegaMainMenu on their website. Am looking for an optimal combination of theme, menu builder, and multilingual plugin – to avoid problems with integration, for fast loading, and for liability.
Am comparing Avada, with MegaMainMenu, and WPML.
Thanks for your time in any knowledgeable reply.
WPBeginner Support
Sadly, you would need to reach out to the plugin’s support for if they are currently compatible or not.
管理者
Abel
Not helpful at all. The question is, how do you really add a post or page onto the mega menu. I dont want to add categories or widgets to the menu!!!I want to add real links to the menu
WPBeginner Support
For specific posts or pages you would create a menu with it organized how you want and add the Navigation Menu widget to the mega menu
管理者
Jay
Two beginner’s questions: Does Mega Menu work with any Wordpress theme?
&
Does Mega Menu allow for multiple mage menus?
WPBeginner Support
It should work on most themes. If you reach out to the plugin’s support they should be able to let you know of any conflicts.
You can have more than one mega menu if that is what you mean with your second question.
管理者
Nick
Max Mega Menu is hand down the best plugin for what it does. As a customer to the premium version let me say that it is well worth the money, and reasonably priced. The developer is very friendly and helpful too which is always a big plus.