メガメニューを使用すると、ホームページに素晴らしいメニューを柔軟に追加できます。メガメニューがSEO的な面ではあまり望ましくないけど多く使われているから Avada, Newspaper などの人気 WordPress テーマにメガメニュー機能が搭載されています。エレメントプロ（Elementor Pro）にもメガメニュー機能が付属しているため、別のメガメニュープラグインをインストールする必要なく、この機能を使用できます。
この記事では、 Elementor Proが提供するメガメニュー機能について見てみましょう。テーマやプラグインが提供するメガメニュー機能は、韓国でよく使われる韓国型メガメニューとは若干違いがあります。韓国型メガメニューを実装する方法についても簡単に取り上げてみましょう。
エレメント（Elementor) メガメニューの作成
エレメンプロを使用している場合は、テーマビルダーのヘッダーテンプレートからメガメニュー機能を適用できます。
メガメニュー機能を使用するには WordPress 管理ページ » Elementor »設定 » 機能 タブで次の機能を有効にする必要があります。
- フレックスボックスコンテナ（Flexbox Containers）
- 入れ子になった要素 (Nested Elements)
- メニュー(Menu)
1 WordPress 管理者ページ » テンプレート » Theme ビルダーに移動し、 ヘッダーテンプレートを作成します。
すでに作成した既存のヘッダーテンプレートを使用するには、そのテンプレートの右端にある[編集]をクリックして編集します。
2 2つのメニューウィジェットがあります。 WordPress Menu & Menu.メガメニュー機能を実装するには、メニューウィジェットを使用します。 Menu要素を目的の位置にドラッグします。
3 Menu 編集から アイテムを追加 ボタンを押して、トップレベルのメニュー項目として使用する項目を追加します。
4 各メニュー項目について、Title（メニュータイトル）、Link（リンク設定）などを適切に指定します。トップレベルメニューにはリンクを適用しないことが多いため、リンクを設定する必要はありません。アイコンなども設定できます。
個々のメニュー項目に対してメガメニュー機能を有効にできます。メガメニューとして機能させるには Dropdown Content オプションを有効にします。
5 Dropdown Content オプションを有効にすると、対応するメニュー項目の横に矢印記号が表示されます。矢印をクリックすると、下にコンテンツ領域が表示されます。 Drag widgets here に表示されている領域に必要なウィジェットを追加してコンテンツを作成できます。
6 コンテンツエリアには、最上位メニューのサブメニューを追加したり、画像などを自由に追加することができます。
たとえば、以下のように列に分割し、各列に WordPress メニューを追加することができます。
WordPress メニュー ウィジェットを追加した場合は、メニューを指定してレイアウトなどを設定します。 [スタイル]タブでメニューのスタイルをカスタマイズできます。
ここからはエレメントの使い方と関連しています。エレメントに慣れている場合は、好きなようにスタイルを作成できます。
7 完了したら、保存して表示条件にヘッダーテンプレートを表示するページなどを指定します。 Entire Site を選択すると、そのメニューがサイト全体に表示されます。
サイトを更新すると、ヘッダーはメガメニューとして機能します。 （変更が適用されない場合は、キャッシュを削除してください。）
そのメニューにマウスを置くと、コンテンツが下に広がります。背景色を変更したり、背景に透明度を適用したりすることもできます。
エレメンターで韓国型メガメニューを作る
韓国では、最上位メニューにマウスを置くと全体の小メニュー（サブメニュー）が表示されるようにする形式のメニューが多く使われます。
上記のような形でメニューが作動するようにしたい場合、エレメーターでは ElementsKit(エレメントキット)という追加のプラグインを使用できます。
ただし、思ったように単純ではなく、必要な方法で動作させるには、追加のコーディング作業が必要になる場合があります。このようなプラグインで作られたメガメニューを制御するのは少し難しいかもしれません。
ElementsKit などの追加のアドオンプラグインを使用する場合、長所と短所があります。
- エレメントの機能を拡張することで、サイトの作成時間とコストを削減できます。
- サイトの速度に影響を与える可能性があります。
- 他のプラグインと競合する可能性があります。
プラグイン間の競合は他のプラグインにも当てはまるので、この部分は大きな問題ではないかもしれません。エレメントでは、より多くの機能を使用してサイトの作成時間とコストを削減できますが、一方ではサイトの速度に影響を与える可能性があるため、使用するかどうかを慎重に決定してください。
エレメントプロのヘッダテンプレートに直接機能を実装することを検討することができます。可能であれば、エレメント自体の機能を使用して実装することは、将来のメンテナンス時に有利であり、サイトの速度への影響も最小限に抑えることができます。 （追加のプラグインを使用している場合、後でそのプラグインがクラッシュやアップデートの問題などとして使用できなくなる可能性があります。）
図のようにトップレベルメニューとコンテンツ（サブメニュー）領域を作成し、トップレベルメニューのいずれかの項目にマウスを置くと同じコンテンツが表示されるようにコードを追加できます。
トップレベルメニューにはMenuウィジェットや WordPress メニューウィジェットの中から好きなものを使うことができます。 Menuウィジェットを使用している場合 Dropdown Content オプションは無効にします。
コンテンツエリアに WordPress メニューや画像、投稿など、好きなウィジェットを配置できます。上記では、例として WordPress メニューのみ配置しました。
デザイン » メニューで各サブメニューを個別に作成して指定できます。たとえば、上記の画像では、一例としてトップメニューにトップメニューを配置し、各カラムにサブメニュー（SubMenu1〜Submenu6）を配置しました。
最上位メニューと下の小メニューの位置が同じになるように調整することも可能です。この部分はエレメントの使用法に関連しています。下図のように各サブメニューについて 詳細タブ » レイアウトセクションから マージン(Margin)과 パディングを設定して位置を調整します。
一番右の連鎖アイコンをオフにすると、上、右、下、左マージン/パディングを個別に指定できます。このアイコンが有効な場合、上下左右の余白/パディングは同じ値を指定します。
また、ヘッダーがスクロール時に上部に固定されているかどうかに応じてコードを適切に作成する必要があります。ヘッダーを上部に固定すると、考慮すべき事項が多くなり、コードが少し複雑になります。
私はクライアントの要請で韓国型（？）メガメニューの実装をお願いして進めました。最初は単純に考えましたが、ヘッダーを固定するなど追加的な事項を考慮してみるとコードが少し複雑になりますね。
チャットGPTに必要なものを要求すると、基本的なコードを作成できます。
📍エレメンター Astra, GeneratePress テーマ などで韓国型メガメニューを構成するのが難しい WordPress またはWebホスティング関連のトラブルシューティングが必要な場合 ここでサービス（有料）をご依頼することができます。
便利なメニュー関連プラグイン
メニュー項目全体（最上位メニューと小メニュー）を含むメニューを使用している場合は、上のYouTubeビデオのように機能させるには、最上位メニューと小メニューを別々に作成する必要があります。
メニュー項目が多い場合は、次の2つのメニュープラグインが便利です。
1 メニュー複製プラグイン Duplicate Menu
Duplicate Menuは既存のメニューを複製して新しいメニューを作成します。
2 メニュー項目の削除プラグイン Easy remove item menu
Easy remove item menuはメニュー項目を削除するプラグインです。メニュー項目を削除するには少し面倒です。このプラグインを使用すると、個々のメニュー項目またはサブメニュー項目を含むメニュー項目を簡単に削除できます。メニューの削除操作が一層簡単になります。
下の図では、Xをクリックすると1つのメニュー項目が削除され、XXを押すとそのメニュー項目とともにサブメニュー項目まで削除されます。サブメニュー項目が多い場合は簡単に削除できます。
このプラグインは4年以上更新されていませんが、最新 WordPressとPHPバージョン（PHP 8.3）でうまく動作します。
これらのプラグインは使用時にのみしばらくインストールして使用し、通常は削除することを検討してください。
こんなメニューが欲しいお客様が本当に多いです。もし有料で韓国型メガメニュープラグイン製作を依頼できますか？
お問い合わせページからご連絡いただけますか？
https://www.thewordcracker.com/forum/support-system
ちなみに、エレメントプロを使用している場合は簡単に可能で、そうでない場合はコードを再作成する必要があるため、プラグインの作成に時間がかかることがあります。