WordPress にメガ メニューを追加する方法 (+5 ベスト プラグイン)

メニューは、Web サイトのデザインと機能において重要な役割を果たします。 訪問者がページ間を移動するのに役立ち、全体的な使いやすさを向上させることができます。 それでも、大量のコンテンツがある場合、混雑したり混乱したりせずに表示する方法を見つけるのは難しい場合があります.

そこで、メガ メニューの出番です。WordPress メガ メニューは、Web サイトをよりプロフェッショナルな外観にし、人々が探しているコンテンツをより簡単に見つけられるようにします。 さらに、ウェブサイトに追加するために使用できる方法は複数あります。

この投稿では、メガ メニューとは何か、WordPress でメガ メニューを使用する利点について説明します。 次に、1 つを作成するためのオプションについて説明し、最高のメガ メニュー プラグイン オプションの 5 つを探ります。

WordPressのメガメニューとは？

WordPress メニューは、Web サイトのページを整理して表示するために使用する構造です。 通常はサイトの上部に表示されますが、横に表示したり、別の方法で表示したりすることもできます。

組み込みのメニュー システムにアクセスするには、まず WordPress サイトにログインします。 次に、管理ダッシュボードから、[外観] → [メニュー]に移動します。

デフォルトでは、WordPress はページのリストを表示する標準メニューを使用し、場合によっては 1 列のドロップダウンを使用します。 画像や説明などの追加情報やコンテンツはありません。単なる一連のリストです。 通常は非常にシンプルで簡単ですが、含めることができるページ数、ボリューム、または情報に関しては制限があります. WooCommerce の例を次に示します。

メガ メニューは、ユーザーが 1 つの場所で大量のコンテンツにアクセスできるようにするドロップダウン メニューの一種です。 メガ メニューは e コマース Web サイトでよく使用され、他のタイプでも人気が高まっています。 製品の写真、スライダー、その他のコンテンツを横長のスタイルで紹介している Nalgene サイトの例を見ることができます。

主な違いは、通常、メガ メニューにはコンテンツの複数の列があるのに対し、従来のドロップダウン メニューには 1 つの列しかないことです。 これにより、はるかに堅牢で包括的なメニューが可能になり、多くの情報を持つ Web サイトで特に役立ちます.

WordPress でメガメニューを使用する理由

メガ メニューを使用する利点の 1 つは、特定のコンテンツに移動するために必要なクリック数を減らすことができることです。 これは、Web サイトで特定の何かを探している訪問者に最適ですが、初めての訪問者がサイトをより効率的に探索できるようにすることで、ユーザー エクスペリエンスも向上させます。

メガ メニューを使用して、Web サイトのルック アンド フィールを改善したり、特定のコンテンツを宣伝したり、訪問者に実行してもらいたい行動を促したりすることもできます。 さらに、それらは高度にカスタマイズ可能であるため、ブランドの残りの部分を引き継ぎ、シームレスで視覚的に魅力的なエクスペリエンスを提供できます。

WordPress メガメニューの作り方

WordPress でメガ メニューを作成するには、いくつかの方法があります。 1 つのオプションは、カスタム コードを追加して手動で行うことです。 もう 1 つの (より迅速で簡単な) オプションは、プラグインを使用することです。 これらの両方の方法を使用して、WordPress にメガ メニューを追加する方法を見てみましょう。

手動でメガ メニューを作成する (プラグインなし)

サイト ファイルの操作に慣れている場合は、非常にユニークなものを作成するのに適したオプションです。

これを行う前に、WordPress サイトをバックアップすることが重要です。 また、ライブにプッシュする前に、メガ メニューを構築およびテストするためのステージング サイトの作成を検討することもできます。 これにより、ライブ サイトの機能を損なう問題を回避できます。

まず、WordPress ダッシュボードで [外観] → [メニュー] を参照し、メニューに名前を付けます。

「メニューを作成」ボタンをクリックします。 メガ メニューに含めたいページをドラッグ アンド ドロップし、必要に応じてサブメニューとしてインデントします。

完了したら、 [メニューの保存]を選択できます。

次に、cPanel のファイル マネージャーに移動するか、ファイル転送プロトコル (FTP) クライアントを使用して Web サイトのファイルに接続します。 / wp-content → /themes → /your-theme-or-child-theme → /style.cssに移動して、テーマのスタイルシートを見つけます。 下部に、次のコード行を追加します。

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

これにより、誰かがトップレベルのアイテムにカーソルを合わせると、サブメニュー アイテムが表示されます。 ここで、コードをカスタマイズして視覚的に魅力的なものにし、各サブレベル アイテムが全幅で表示され、アイテムのセクションが互いに隣り合って表示されるようにします。 次のコードを追加します。

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

次に、スタイルを調整して、ブランドやサイトの他の部分に合わせて、希望どおりに見えるようにすることができます. たとえば、メガ メニューの背景色や特定のアイテムを太字にしたい場合があります。 列の間隔を調整したり、写真などの要素を追加したりすることもできます。 あなたが開発者であるか、ある程度のコード経験がある場合は、メガ メニューを好きなように作成できます。

より詳細なガイドが必要ですか? Tuts+ は完全なウォークスルーを提供します。

プラグインなしでメガ メニューを作成する別のオプションは、テーマの組み込みオプションを確認することです。 Hestia テーマのように、デフォルトでメガ メニュー オプションが含まれているものもあります。 ただし、常にそうであるとは限りません。

WordPressプラグインでメガメニューを作る

サイト ファイルの編集に慣れていない場合や、テーマに組み込みのメガ メニュー オプションが用意されていない場合は、WordPress でメガ メニューを作成するために使用できる別の方法として、プラグインを使用する方法があります。 利用可能なオプションはたくさんありますが、これについては次のセクションで説明します。

これは手動で作成するよりも安全なオプションですが、変更を加える前に WordPress サイトをバックアップする必要があります。

プラグインの特定の機能と機能は、使用するツールによって異なります。 しかし、全体として、コンセプトは同じです。

例として Max Mega Menu を使用します。 開始するには、WordPress Web サイトにプラグインをインストールしてアクティブ化します。

次に、 Appearance → Menusに移動して、メガ メニュー機能を有効にする必要があります。 メニューの目的の場所を選択してから、[有効にする] の横にあるボックスをクリックします。

完了したら、変更を保存します。 メガ メニューの外観と設定をカスタマイズするには、 Mega Menu → Menu Themesに移動します。

ここには、メニューのスタイルを設定するためのさまざまなオプションがあります。 メニューの種類だけでなく、外観や機能も変更できます。

5つの最高のWordPressメガメニュープラグイン

メガ メニューの WordPress プラグインを使用する場合は、選択肢がたくさんあります。 それらを調査するときは、探している特定の機能と予算を考慮することが重要です。 それを念頭に置いて、5つの最高のWordPressメガメニュープラグインを詳しく見てみましょう.

1.マックスメガメニュー

Max Mega Menu は、高品質でカスタマイズ可能なメニューを WordPress サイトに簡単に追加できる、非常に人気のあるプラグインです。 使いやすいドラッグ アンド ドロップ ビルダーが含まれています。 また、サイト全体のさまざまな場所の複数のメガ メニューもサポートしています。

最大メガ メニューの主な機能:

• 個別に設定可能な複数のメニューの場所
• グリッド レイアウト ビルダー
• メニューのホバーと遷移オプション
• ドラッグ アンド ドロップ ビルダー
• ショートコード
• メニュー項目のアイコン
• 検索ボックス
• メニューのロゴ

最大メガ メニューの長所:

• 無料オプションとプレミアム オプションを利用できます。
• 軽量で、クリーンなコードです。
• WooCommerce と Easy Digital Downloads のサポートが含まれています。
• メガ メニューは複数の場所に配置できます。
• ウィジェットを使用すると、マップ、連絡先フォームなどを追加できます。
• メガ メニューを最初から作成することも、既存のメニューを使用することもできます。
• キーボード ナビゲーションにより、アクセシビリティが向上します。

最大メガ メニューの短所:

• 高度なカスタマイズ オプションは、プロ ライセンスでのみ利用できます。
• プレミアム プランの無料トライアルはありません。

使いやすさ:

Max Mega Menu は非常に使いやすいです。 既存のメニューをメガ メニューに自動的に変換します。 ナビゲートしやすいユーザーフレンドリーなインターフェースを備えています。 プロ ライセンスには、アップデートと優先サポートも含まれています。

価格:

Max Mega Menu は、カスタマイズ オプションが制限された無料バージョンを提供します。 高度な機能を備えたプロ プランは、単一サイト ライセンスで 29 ドルからです。 これには、1 年間のサポートも含まれます。

2.クアッドメニュー

QuadMenu は、経験レベルに関係なく使いやすいもう 1 つの人気のメガ メニュー プラグインです。 柔軟なツールには、直感的なドラッグ アンド ドロップ ビルダーと、WordPress のメニューとサブメニューを構築するためのさまざまなスタイル設定とカスタマイズ オプションが含まれています。

QuadMenu の主な機能:

• ドラッグ アンド ドロップ ビルダー
• 複数のメニューの場所
• オフキャンバス、スティッキー、垂直メニュー
• リンクを整列するためのオプション
• フロート ドロップダウン メニュー
• Font Awesome アイコンと Google フォント
• ドロップダウン アニメーション
• 多彩なフィルター
• ウィジェットを表示する

クアッドメニューの長所:

• 無料版とプレミアム版の両方があります。
• 初心者や開発者に適しています。
• 子テーマに対応しています。
• 自動および手動のメニュー統合があります。
• 直感的で使いやすいです。
• プロ版で利用可能なタブとカルーセル メニューがあります。

クアッドメニューの短所:

• 高度なスタイリング オプションにはプロ ライセンスが必要です。
• ライブ プレビュー オプションは限られています。

使いやすさ:

QuadMenu は、初心者にも開発者にも適しています。 ドラッグ アンド ドロップ ビルダーを使用すると、メガ メニューをすばやく簡単に作成およびカスタマイズできます。

価格:

QuadMenu には無料版があります。 Pro ライセンスは、1 つのサイトで 30 ドルから利用できます。

3. ウーバーメニュー

プレミアム メガ メニュー ビルダーを探しているなら、UberMenu を試してみる価値があります。 この強力で機能豊富なツールは、洗練されたグリッド システムを使用して、プロフェッショナルな外観のメガ メニューをすばやく構築できます。

UberMenu の主な機能:

• 独自のグリッドシステム
• 50 以上のスタイル設定
• 動的アイテム生成
• 投稿、カテゴリなどに基づくサブメニュー
• メニュー内にタブを追加するオプション
• タッチ対応メニュー
• ドロップダウン CSS3 トランジション
• 複数のメニュー トリガー (ホバー、ホバー インテント、クリック)
• さまざまなメニューの場所
• 柔軟なレイアウト

UberMenu の長所:

• WordPress サイトの所有者の間で広く使用され、高い評価を得ています。
• カスタム HTML、ショートコード、およびウィジェットを追加するオプションがあります。
• ネイティブの WordPress カスタマイザー インターフェイスを使用します。
• 無制限のメニューテーマがあります。

UberMenu の短所:

• 利用できるのはプレミアム バージョンのみです。
• テーマによっては、CSS/PHP プログラミングのスキルがない場合、最適なオプションではない場合があります。

使いやすさ:

インターフェイスはネイティブのカスタマイザーに基づいて構築されているため、経験豊富な WordPress ユーザーにとって UberMenu の使用はおそらく簡単です。 メニューを作成しながら、メニューのリアルタイム プレビューを表示できます。 ただし、WordPress の初心者にとって、これは直感的なドラッグ アンド ドロップ ビルダー インターフェイスよりもナビゲートするのが難しい場合があります。

価格:

単一サイトの UberMenu ライセンスは 26 ドルです。 これには、6 か月間の開発者サポートが含まれます。

4.ElementsKit

Elementorページビルダーに精通していて使用している場合、ElementsKitは検討すべき優れたメガメニュープラグインです. このツールには、ヘッダーとフッターのビルダーを備えたカスタム モジュールの広範なライブラリが含まれています。

ElementsKit の主な機能:

• ライブ コンテンツ インターフェイス
• カスタム モジュール ライブラリ
• ヘッダーとフッターのビルダー
• 視差スクロール
• 200 以上のデザイン済みページ テンプレート
• カウントダウン タイマー ウィジェット
• ドロップダウン アニメーション
• オフキャンバス、スティッキー、垂直メニュー
• Font Awesome アイコン
• 明るいテーマと暗いテーマ
• 2 つのモバイル メニュー レイアウト
• カスタム CSS

ElementsKit の利点:

• Elementorページビルダーと完全に統合されています.
• ドラッグ アンド ドロップ機能が含まれています。
• 初心者向けで使いやすいです。
• アイコンとバッジのテキストの色をカスタマイズできます。
• WooCommerce 機能が組み込まれています。
• 高度なメガ メニュー オプションを提供します。

ElementsKit の短所:

• Elementor ページ ビルダーを使用しない限り、理想的ではありません。
• メガ メニュー ビルダー ツールだけを探している場合は、圧倒される可能性があります。

使いやすさ:

ElementKits は、簡単で用途の広いツールです。 Elementor に慣れていない場合は、インターフェイスに慣れるまでに時間がかかる場合があります。 ただし、既にページ ビルダー プラグインを使用している場合は、このアドオンのコツがすぐにつかめるでしょう。

価格:

ElementsKit は無料版を提供しています。 プレミアム ライセンスは、1 つのサイトで年間 39 ドルからです。

5.WPメガメニュー

WordPress でメガ メニューを作成するためのシンプルでわかりやすいフリーミアム ツールを探しているなら、WP Mega Menu はもう 1 つの確かな選択肢です。 このプラグインは使いやすく、さまざまなサイト向けの高品質のメガ メニューを構築するために必要なすべての基本機能と機能を提供します。 無料のツールとしては、カスタマイズとスタイリングのための優れたオプション セットも付属しています。

WP メガ メニューの主な機能:

• 直感的なナビゲーション
• ドラッグ アンド ドロップ インターフェイス
• メニューテーマを作成して保存するオプション
• ロゴ、検索バー、背景画像
• Google Fonts と Font Awesome のアイコン
• ソーシャル アイコン
• メニューのラベル付け

WPメガメニューの長所：

• ダウンロードして使用するのは完全に無料で、プロのアップグレードが利用可能です.
• ナビゲートして使用するのは簡単です。
• 他のプラグインがプレミアム バージョンにのみ含まれる機能があります。
• 複数の Web サイトで使用するメニュー テーマを作成して保存するオプションがあります。

WPメガメニューの短所：

• 他のプラグイン オプションと比較して、開発者向けに設計されたツールが不足しています。
• 無料版には、スティッキーまたはオフキャンバスのオプションはありません。

使いやすさ:

WP Mega Menu は、多くのオプションを備えた初心者向けのプラグインです。 理解しやすく、ナビゲートしやすい直感的なインターフェイスが付属しています。

価格:

WPメガメニューは無料です。 ただし、単一ライセンスで年間29ドルからのプレミアムプランも提供しています.

WordPressのトップメガメニュープラグインの比較

メガ メニューに関するよくある質問 (FAQ)

この時点で、WordPress でメガ メニューを作成および追加する方法を十分に理解していることを願っています。 しかし、よくある質問 (FAQ) で締めくくりましょう。

WordPress メガ メニューに画像やアイコンを追加できますか?

はい、WordPress メガ メニューに画像とアイコンを追加できます。 一部のプラグインには、これに対するサポートが組み込まれています。 または、Web サイトのコードを編集して画像やアイコンを追加することもできます。

WordPress サイドバーにメガ メニューを追加できますか?

はい、WordPress サイドバーにメガ メニューを追加できます。 サイドバーにメガ メニューを追加するために使用できるプラグインがいくつかあります。 メニューをウィジェットとして表示できるほとんどのプラグインでは、メニューをサイドバーに追加することもできます.

WordPress メニューのカスタマイズを開始する

メニューは、あらゆるサイトのルック アンド フィールを改善するために使用できるため、Web サイトのデザインと機能において重要な役割を果たします。 そのため、大量のコンテンツとページを含む大規模な WordPress Web サイトをお持ちの場合は、メガ メニューの追加を検討することをお勧めします。

この投稿で説明したように、WordPress でメガ メニューを作成するために使用できる主な方法は 3 つあります。 1 つは、テーマのオプションを使用してメガ メニューを追加することです。 2 つ目は、手動でコーディングすることです。 どちらも不可能な場合、または時間を節約したい場合は、Max Mega Menu、QuadMenu、ElementsKit などのメガ メニュー プラグインを試すことができます。

WordPress サイトのパフォーマンスをさらに向上させたいですか? 簡単な自動バックアップやその他の WordPress セキュリティ機能を提供することに加えて、Jetpack はサイトの速度と UX を向上させるのに役立ちます!