WordPressメガメニューをプラグインと手動で作る方法

サイト設計において、WordPressメガメニューはスムーズなナビゲーションを実現する重要な要素。特に多様な商品カテゴリーを扱うECサイトでは欠かせない機能といえるでしょう。

メガメニューを活用すれば、メニュー内容を複数の列や行に整理でき、大量の情報をすっきり表示できます。つまり、ユーザーは複数ページを行き来する必要なく、サイト内のさまざまなセクションにダイレクトにアクセスできるようになるわけです。

このWordPressチュートリアルでは、プラグインを使ったメガメニュー導入方法と、コード編集による手動追加の手順をご紹介します。さらに、おすすめのメガメニュープラグインや、シンプルなドロップダウンメニューの作り方も解説していきます。

メガメニューは主に以下のレベル構造で成り立っています。

• トップレベルメニュー：サイトを開いたときに最初に表示されるメインメニューです。通常は「製品」や「サービス」といったサイトの主要カテゴリーが並びます。
• セカンドレベルメニュー：トップレベル項目にホバーまたはクリックすると現れるサブメニューです。例えばファッションサイトなら「衣料品」などの商品カテゴリーがここに表示されます。
• サードレベルメニュー：セカンドレベルメニューからさらに枝分かれするサブカテゴリーです。「衣料品」の下に「シャツ」「セーター」「ジャケット」といった具合に細分化されます。

サブメニューをさらに細分化することもできますが、ユーザビリティの観点から3段階程度に抑えるのがベストプラクティスです。訪問者を混乱させないよう、シンプルな構造を心がけましょう。

WordPressでメガメニューを作る方法

WordPressでメガメニューを実装する最も手軽な方法はプラグインの活用です。ある程度のコーディング知識があれば、カスタムCSSを使って手動で作成することも可能です。

ここでは両方のアプローチを詳しく解説していきますので、ご自身に合った方法を選んでください。

Max Mega Menuプラグインでメガメニューを導入する

Max Mega Menuは複数のメニュー位置に対応する多機能なメニュー管理プラグインです。この柔軟性を活かして、サイトの各セクションごとに最適なメガメニュー設定をカスタマイズできます。

詳しい機能を見る前に、まずはプラグインのインストールと基本設定を進めましょう。

1. Max Mega Menuプラグインを設定する

WordPressにプラグインをインストールする際は、WordPressダッシュボードにログインし、プラグイン→新規追加へ進みます。検索バーに「Max Mega Menu」と入力し、見つかったら今すぐインストールをクリックして、有効化を押します。

次に、左サイドバーからMega Menuを選択し、基本設定を行います。例えばメニュー位置を追加するには以下の手順に従ってください。

• 外観→メニューに移動
• メニューロケーションを選び、別のメニュー位置を追加をクリック
• メニューを表示したいサイト領域（ヘッダー、フッター、サイドバーなど）を入力
• 作成済みのカスタムメニューを選択
• メニュー位置を追加をクリック

作成したら、一般設定の有効ボックスにチェックを入れます。イベントでは、メニュー表示のトリガーとなる3つの主要オプションから選べます。

• ホバー遷移：ユーザーがサブメニューを表示させるには、親メニュー上に数秒間マウスを置く必要があります。この遅延は誤操作防止に役立ちます。
• ホバー：マウスポインタを親メニュー上に置くと、すぐにサブメニューが開きます。遅延がないため、スムーズなナビゲーション体験を提供できます。
• クリック：訪問者がサブメニューを開くには、親メニューをクリックまたはタップする必要があります。タッチスクリーンデバイスや精密なマウス操作が難しい環境に最適です。

クリックを選んだ場合は、詳細設定タブのクリックイベントの動作で次のいずれかを設定できます。

• 1回目のクリックでサブメニューが開き、2回目で閉じる
• 1回目のクリックでサブメニューが開き、次のクリックでページリンクへ移動
• 1回目のクリックで直接ページリンクへ移動

設定後、一般設定タブに戻り、エフェクトエリアを確認します。

ここではフェード、フェードアップ、スライド、スライドアップなど、メガメニューのアニメーション種類を選択できるだけでなく、アニメーション速度も速い・中程度・遅いから設定可能です。

モバイルメニュー用のアニメーションもエフェクト（モバイル）で選べます（スライドダウン、スライドレフト、スライドライトなど）が、派手なエフェクトはモバイルデバイスや低速回線環境でのパフォーマンス低下を招く可能性がある点に注意しましょう。

設定が完了したら変更を保存をクリックして確定します。

2. メニューのレイアウトと外観を設定する

Max Mega Menuには使いやすいデフォルトテーマが用意されていますが、自分好みのカスタムテーマも簡単に作れます。

カスタマイズするには、Max Mega Menu設定からメニューテーマを開き、編集するテーマを選択横の3点アイコンをクリックして新しいテーマを追加を選びます。

一般設定では、テーマ名の変更や矢印スタイルの選択、サブメニュー項目の行の高さ調整、メガメニューへのシャドウ効果適用などが可能です。

続いてメニューバータブを開き、トップレベルメニューをカスタマイズしましょう。ここでの設定が訪問者に最初に見せるナビゲーションメニューの見た目を決定します。

タブ上部ではメニューの高さや背景色を調整できるだけでなく、カスタムパディングの設定や、メニュー項目周りに境界線を追加して視覚的な区別をつけることも可能です。

下にスクロールすると、トップレベルメニュー項目専用のカスタマイズセクションがあります。

• メニュー項目の配置：全メニュー項目をサイトの左・中央・右上に配置
• 項目のフォント：フォントファミリー、サイズ、太さ、色などのタイポグラフィ設定
• 項目の背景：各メニュー項目の背景色設定（メニュー背景を既に設定している場合は透明のままに）
• 項目の間隔：メニューレイアウトを微調整するためのマージンとパディング設定
• 項目の境界線：境界線の色、幅、角丸の半径を自由に設定
• 現在の項目をハイライト表示：有効にすると訪問者のホバー時に項目がハイライトされ、直感的なナビゲーションを実現

トップメニュー設定後はメガメニューセクションに進みます。このタブではセカンドレベルとサードレベル項目のフォント、背景色、間隔、境界線をカスタマイズできます。

ユニークな外観を作るために、親メニューとサブメニューに異なる配色を割り当てるとよいでしょう。ただし一貫性を保つためにも、フォントは同じものを使うのがおすすめです。

設定が終わったら必ず変更を保存しておきましょう。

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

Max Mega Menuではドラッグ＆ドロップで簡単にコンテンツを追加できます。テキストリンクだけでなく、WooCommerce商品、画像、検索フィルターなども組み込めます。

外観→メニューから新規メニュー作成か既存メニュー編集を行い、以下の手順で進めます。

• 左側のMax Mega Menu設定で有効ボックスにチェックを入れます。この画面では複数の場所のメニュー設定も可能です。
• 下にスクロールしてページを選び、必要なページを選択してメニューに追加をクリック。
• 投稿、カテゴリー、商品カテゴリーについても同じ手順を繰り返します。
• メニュー構造内で、サブカテゴリーを対応するメインカテゴリーにドラッグ＆ドロップ。さらにセカンドレベルメニューを右側にドラッグしてサードレベルメニューを作るなど、階層構造も自由に構築できます。

デフォルトではフライアウトまたはドロップダウンスタイルが適用されますが、メガメニューに変更するには、いずれかのページにホバーしてメガメニューボタンをクリックします。

ポップアップが表示されたら、サブメニュー表示モードをグリッドレイアウトか標準レイアウトから選びます。

グリッドレイアウトでは複数の列と行を使ったメニューが作れる一方、標準レイアウトでは列数のみ変更可能です。

パネルに追加するウィジェットを選択をクリックすれば、メニューをより魅力的にするリッチコンテンツを追加できます。ドロップダウンリストから検索バー、画像ギャラリー、カレンダー、オーディオ、動画、商品フィルターなど多彩なウィジェットを選択可能です。

リンクが多い複雑なメニューなら、各項目にアイコンを設定すると訪問者体験が向上します。左サイドバーのアイコンから様々なプラットフォームのアイコンを選ぶだけで簡単に設定可能。

メガメニューポップアップを閉じ、各トップレベルページでこの作業を繰り返します。すべての設定が完了したらメニューを保存をクリックして、サイト上でメガメニューを有効にしましょう。

コードでWordPressメガメニューを手動作成する方法

コードを使ったメガメニュー作成なら、デザインと機能をより細かく制御できますが、カスタムCSSの知識とテーマファイルを調整する技術が必要になります。

以下の手順でWordPressサイトにメガメニューを実装していきましょう。

1. 開発環境を準備する

WordPressはオープンソースのCMS（コンテンツ管理システム）で、カスタムコードでテーマやプラグインを自由に調整できます。

ただし公開中のサイトで直接コードを編集すると予期せぬトラブルが発生する可能性があります。安全のため、まずWordPressサイトをバックアップし、テスト用の環境を用意しましょう。

HostingerのWordPress向けマネージドホスティングなら自動バックアップ機能でファイルを安全に保護できます。BusinessプランとCloud StartupプランではWordPressステージングツールも利用可能。この機能を使えば、サイトを複製して変更をライブ環境に反映する前に十分テストできます。

HostingerでWordPressのステージング環境を設定する方法は以下のとおりです。

• hPanel にログインしてWebサイトへ進む
• ドメイン名を選択し管理をクリック
• 左メニューからWordPress→ステージングを選択
• ステージングタブでステージングを作成をクリック

• ステージング用のサブドメインを設定（完了まで最大15分程度かかることも）

2. テーマのスタイルシートファイルにアクセスする

次に新しく作ったステージングサイトでテーマのstyle.cssファイルをカスタマイズします。

多くのレンタルサーバーでは外部FTPクライアントの接続が必要ですが、HostingerユーザーならhPanelから簡単に操作できます。

• ファイル→ファイルマネージャーから（ドメイン）のファイルにアクセスを選択
• public_html→ステージング→wp_content→テーマを開く
• 編集したいWordPressテーマを選んでフォルダを開く
• テーマのstyle.cssファイルをダブルクリックして編集
• テキストエディターの最下部に次のコードを追加しましょう。

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

これにより訪問者がホバーした際にセカンドレベルとサードレベルの項目が表示されるようになります。

3. メガメニューをカスタマイズする

メニューのスタイルをさらに調整するには、独自のコードをテーマのスタイルシートに直接追加します。以下はよく使われるWordPressメガメニューのCSSスニペット例です。

メガメニュー内に列を作る方法：

.mega-menu li.mega-menu-column {
  width: 25%; /* for a 4-column layout */
  float: left;
  padding: 10px;
}

各メニュー項目の色、余白（パディング）、テキストスタイルをカスタマイズ：

.mega-menu ul.mega-sub-menu li a {
  color: #555;
  padding: 8px 15px;
  display: block;
  text-decoration: none;
}

モバイル表示用のレイアウト最適化：

@media screen and (max-width: 767px) {
  .mega-menu li.mega-menu-column {
    width: 100%;
    float: none;
  }
}

上記のコードがうまく機能するかどうかはサイトの既存CSSやHTML構造によって変わってきます。そのため各コードを実際にテストして必要に応じて調整することが大切です。

おすすめのWordPressメガメニュープラグイン

プラグインなしでメガメニューを作るのは可能ですが、コーディング経験がほとんどない方には向いていません。初心者の場合は、専用プラグインを使って作業を効率化するのがおすすめです。

Max Mega Menu以外にも、メガメニュー作成におすすめのWordPressプラグインを3つ紹介します。QuadMenuはWordPressプラグインディレクトリから直接インストールできますが、WP Mega Menu ProとJetMenuはサードパーティのマーケットプレイスでの購入が必要です。

1. QuadMenu

QuadMenuはオープンソースの純正WordPressメガメニュープラグインで、多様なテーマと配置オプションを提供しています。

無料版でもナビゲーションメニューウィジェットの表示やモバイル表示切替ポイントのカスタマイズが可能です。さらにオフキャンバス、固定、水平、垂直など様々なスタイルのメガメニューが作れます。

プロプランは年間49ドルからで、タブ機能、ログイン/登録フォーム、ソーシャルアイコン、カルーセルメニューなどの追加機能が使えるようになります。

2. WP Mega Menu Pro

WP Mega Menuは初心者向けの使いやすいメガメニュービルダーです。セットアップが簡単で、レスポンシブなメガメニューをすぐに作成できます。

操作性の良さが特徴ですが、カスタマイズ機能も充実しています。フォント、メニュータイプ、投稿メタデータ、カラースキーム、アニメーションなどを簡単に調整可能です。

WP Mega Menuはプレミアム版のみで、無制限サイトに使える1年間のアップデートと優先サポート付きライセンスが19ドルからとなっています。

3. JetMenu

JetMenuは画像、動画、音声など多彩なインタラクティブコンテンツを組み込んだメガメニューが作れるプレミアムプラグインです。

年間43ドルのサブスクリプションで、ドラッグ＆ドロップビルダーと複数のメニュー方向（ハンバーガー、水平、垂直メニュー）が利用可能になります。

もう一つの優れた機能はプリセットマネージャーで、異なるメニュー用に複数のテンプレートを作成・保存できる点です。

WordPressメガメニューを使うメリット

従来のメニューと比べて、WordPressでメガメニューを導入すると以下のようなメリットがあります。

• 情報をスッキリ整理：コンテンツや商品カテゴリーが多いサイトでも、メガメニューならユーザーが見やすいように整理できます。
• 視覚的な魅力アップ：サイトのブランディングに合わせてカスタマイズでき、一貫性のある魅力的なデザインが実現します。
• ユーザーエンゲージメント向上：必要な情報がすぐ見つかれば、訪問者はサイト内をもっと探索したくなります。メガメニューは複雑なナビゲーションをシンプルにし、滞在時間とコンテンツとの相互作用を促進します。
• 限られたスペースを効率活用：サイトのレイアウトを崩すことなく、多くの選択肢を一度に表示できます。
• 競合サイトとの差別化：洗練されたメガメニューを提供することで、競合他社と一線を画し、優れたユーザー体験へのこだわりをアピールできます。

WordPressメガメニューの代替案

複雑なメニュー構造にはWordPressメガメニューが便利ですが、シンプルな設計を好む場合はドロップダウンメニューやフライアウトメニューといった選択肢もあります。

特にシンプルなメニュー階層でサイトデザインもすっきり保ちたい場合には最適な代替手段となるでしょう。

クラシックテーマでドロップダウンメニューを作る方法

クラシックテーマを使っている場合は、WordPressカスタマイザーを使ってドロップダウンメニューを簡単に作成できます。

• WordPressダッシュボードから外観→カスタマイズへ進む
• カスタマイザーの画面でメニューを選び、既存メニューを編集するか新規作成
• アイテムを追加をクリックして必要なページや投稿を追加
• サブメニューにしたい項目を親項目の下、少し右側にドラッグして階層構造を作る

• 完了したらメニュー位置へ移動し、作ったメニューを表示したい位置に割り当て
• 公開をクリックして変更を保存

ブロックエディターでドロップダウンメニューを作る方法

ブロックテーマユーザーならGutenbergエディターを使ってメニューを作成します。

• WordPressダッシュボードから外観→エディターへ進む
• エディター画面で上部のプラス（+）アイコンをクリックしブロックを選択
• ナビゲーションブロックを検索して好みの位置に配置

• ナビゲーションブロックを追加したら右サイドバーのブロック設定パネルを開く
• プラス（+）アイコンをクリックしてページリンクを選び、メインページとサブメニュー項目を追加

• ドロップダウンメニューを作るには、サブ項目を親項目の下にドラッグするか、既存メニュー横の3点アイコンからサブメニューリンクを追加を選択

• 設定タブからメニューの向き（垂直・水平）などのレイアウトを調整
• 満足のいく見た目と機能になったら公開または更新をクリックして保存

まとめ

WordPressサイト構築において、直感的なナビゲーション設計は非常に重要です。特にECサイトや多数のページを持つサイトではメガメニューが理想的な解決策となります。

通常のWordPressメニューと違い、メガメニューなら複雑な情報をシンプルかつ視覚的に魅力的な方法で整理できます。

メガメニュー実装には主に2つのアプローチがあります。初心者であればMax Mega Menuなどのプラグインを使い、トップレベルナビゲーションとサブメニューをかんたんに作成する方法がおすすめです。

上級者ならCSSコードでメニューを自由自在にカスタマイズできます。時間と労力を節約したいなら、WordPressステージング機能や組み込みコードエディターを提供するHostingerのような信頼性の高いレンタルサーバーを利用するのがよいでしょう。

このチュートリアルが、より良い訪問者体験を提供するための参考になれば幸いです。他に質問があれば、ぜひコメント欄に投稿してください。

WordPressメガメニューに関するよくある質問

メガメニューについての疑問にお答えします。

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。