エレガント ThemesのDiviでメガメニューを作る

Avada, Enfold, Newspaper など一部有料 WordPress テーマにメガメニュー機能が組み込まれており、メニュー項目をクリックしたときにメニューがすべて表示されるように作成されるメガメニューを実装できます。 エレガント ThemesのDiviでも簡単にメガメニューを作成することができます。

ちなみにメガメニューはSEOに良くないと言われています。 SEOに有利なメニュー構造について」SEO（検索エンジン最適化）に有益なウェブサイトのメニュー構造」を参照してみてください。

[この記事は2021年12月13日に最終更新されました。 ]

エレガント ThemesのDiviテーマメガメニューを作る

Diviテーマメガメニューの作成ステップのまとめ

簡単な方法で WordPress Diviテーマにメガメニューを追加できます。 Diviでメニューメニューを作成するプロセスを簡単にまとめると、次のようになります。

1. メニューページに移動します。

お知らせ > ルックス > メニューに移動します。 WordPress バージョンに応じて、 ルックスは「テーマのデザイン”または“外観”などで表示されることがあります。

2.画面オプションでCSSクラスを表示するように有効にします。

右上隅にある「画面オプション」(Screen Options) をクリックして 詳細設定]メニューのプロパティを表示 以下の「CSSクラス」をチェックしてください。

3. 最上位メニュー項目に「mega-menu」クラスを追加します。

メガメニュー形式で表示する最上位メニュー項目の「CSSクラス」に「mega-menu」を追加します。

4. メニューがメガメニューとして機能します。

保存してサイトを更新すると、メニューはメガメニューとして機能します。 Diviテーマのメガメニューにハンバーガーアイコンを追加することも可能です。 詳しくは、Diviテーマのメガメニューにハンバーガーのアイコンを追加する」を参照してみてください。

実際の動作はここで確認できます。 詳細な方法をCreating Mega Menus In Divi (Diviでメガメニューを作成)「で確認できます。 そして上記の手順は次のビデオで説明されています。

メガメニューをサポートしていないテーマの場合、プラグインを使用してメガメニュー機能を実装することができます。

• UberMenuメガメニュー
• メガメニュープラグイン
• 反応型メニューのプラグインSuperfly

Enfold テーマでメガメニューを使用する

人気のテーマである Enfold テーマでも簡単にメガメニューを構成することができます。 Enfoldは ルックス>メニューで、メニュー項目の 「Use as Mega Menu」（メガメニューとして使用） オプションをクリックします。

これにより、次のようにMega Menuが動作します。

次の動画を参照してみてください。 （Enfold メガメニュー項目にイメージを追加する方法も説明しています。）

Avada テーマでメガメニューを使用する

WordPress 有料テーマの中で最も多く販売されているベストセラーのテーマである Avada(Avada)もメガメニュー機能はデフォルトで組み込まれています。 Avadaテーマオプションでメガメニュー設定を構成することができます。

そして、実際のメニューにメガメニュー機能を追加するには、外観>メニューから目的のメニューの1次のメニュー項目に表示される 「Avada オプション」をクリックします。

Avada Optoinsをクリックすると、メニューオプションが表示されます。 下部の Fusion Mega Menuのオプションを "オン"に設定すると、追加で 「Full Width Mega Menu」（全幅メガメニュー）、メガメニュー列数、Mega Menu Thumbnail（メガメニューサムネイル）という隠されたオプションが表示されます。

メガメニューオプションは、1次のメニュー項目（最上位のメニュー項目）のみの構成が可能です。

GeneratePress テーマメガメニューを作る

Zenra RatePressテーマにはメガメニュー機能が搭載されていませんが、シンプルなメガメニューが必要な場合は、CSSを使用してメガメニューを追加できます。 詳しくは「WordPress GeneratePress テーマメガメニューの作り方「を参照してください。

メモ：

• Diviで Slider Revolution（Revolution Slider）を全体の幅に追加する方法