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

サイトをデザインする際、WordPressのメガメニューはスムーズなナビゲーションに欠かせません。特に多くの商品カテゴリを扱うECサイトでは、その重要性が高まります。

WordPressのメガメニューを使えば、メニューの内容を複数の列や行で表示でき、大量の情報を整理しやすくなります。その結果、ユーザーは複数のページを移動することなく、サイト内のさまざまなセクションにアクセスできます。

このWordPressチュートリアルでは、プラグインを使ってメガメニューを追加する方法と、コード編集による手動での作成方法を解説します。さらに、最適なWordPressメガメニュープラグインの提案や、代替案としてドロップダウンメニューを作成するステップも紹介します。

通常、WordPressのメガメニューは複数の階層で構成されます：

• トップレベルメニュー：Webサイトにアクセスしたときに最初に表示されるメインメニューです。一般的には「商品」ページのように、サイトの主要カテゴリやセクションが含まれます。
• セカンドレベルメニュー：ユーザーがトップレベルメニューにカーソルを合わせたりクリックしたりすると表示されます。例えば、ファッションブランドでは「商品」セクションの中に「衣類」がセカンドレベルとして表示されることが多いです。
• サードレベルメニュー：セカンドレベルメニューにさらにカーソルを合わせたり操作したりすると表示されるサブメニューです。例えば「衣類」のサードレベル項目として「シャツ」「セーター」「ジャケット」があります。

さらに階層を増やすことも可能ですが、訪問者に負担を与えないよう3階層までにとどめるのがおすすめです。

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

WordPressでメガメニューを作成する最も簡単な方法は、プラグインを利用することです。ある程度の技術知識があれば、カスタムCSSコードを使って手動で追加することも可能です。

このセクションでは、両方の方法について詳しく解説します。ご自身のやりやすい方法から始めてみてください。

Max Mega Menuプラグインを使ってWordPressメガメニューを作成する方法

Max Mega Menuは、複数のメニュー位置に対応した包括的なメニュー管理プラグインです。この柔軟性によって、サイト内の異なるセクションごとにメガメニューの設定をカスタマイズできます。

具体的な操作方法を解説する前に、まずはプラグインをインストールして設定を行いましょう。

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

WordPressプラグインをインストールするには、WordPressダッシュボードにログインし、「Plugins（プラグイン）」→「Add New（新規追加）」に進みます。検索バーに「Max Mega Menu」と入力し、プラグインが見つかったら「Install Now（今すぐインストール）」をクリックし、「Activate（有効化）」を選択してください。

次に、左サイドバーから「Mega Menu」にアクセスし、デフォルト設定を行います。例えば、メニューの表示位置を追加したい場合は、以下のステップを実行してください：

1. 「Appearance（外観）」→「Menus（メニュー）」に進みます。
2. 「Menu Locations（メニュー位置）」を選択し、「Add another menu location（別のメニュー位置を追加）」をクリックします。
3. メニューを表示したいWebサイトのセクション（ヘッダー、フッター、サイドバーなど）を入力します。
4. 作成済みのカスタムメニューを選択します。
5. 「Add menu location（メニュー位置を追加）」をクリックします。

メニューを作成したら、「General Settings（一般設定）」の「Enabled（有効化）」にチェックを入れます。次に「Event（イベント）」の横で、メニューを表示させる方法を3つのオプションから選びます：

• Hover Intent（ホバーインテント）：ユーザーがトップレベルメニューに数秒間カーソルを合わせると、セカンドレベルメニューが表示されます。誤ってクリックするのを防ぐために、この遅延が設けられています。
• Hover（ホバー）： ユーザーが親メニューにマウスを合わせると、サブメニューが即座に開きます。遅延がないため、スムーズなナビゲーションを実現したい場合に適しています。
• Click（クリック）：訪問者がメガメニューをクリックまたはタップすると、セカンドレベルの項目が開きます。タッチスクリーン端末や、マウス操作で正確にホバーするのが難しい状況に最適です。

「Click（クリック）」を選んだ場合は、「Advanced（詳細設定）」タブ→「Click Event Behaviour（クリックイベントの動作）」に進みます。そこで、ユーザーがメガメニューをクリックしたときの動作を次のいずれかから選択してください：

• １回目のクリックでサブメニューが開き、2回目のクリックで閉じる。
• １回目のクリックでセカンドレベルメニューが開き、次のクリックでページリンクに移動する。
• １回目のクリックで直接ページリンクを開く。

その後、「General Settings（一般設定）」タブに戻り、「Effect（エフェクト）」のエリアを探します。

ここでメガメニューのアニメーションタイプを選択できます。fade（フェード）、fade up（フェードアップ）、slide（スライド）、slide up（スライドアップ）などから選びましょう。さらに、アニメーション速度をfast（速い）、medium（普通）、slow（遅い）に設定できます。

モバイルメニューでアニメーションを有効にする場合は、「Effect (Mobile)（モバイル用エフェクト）」の横でスタイルを選びます。slide down（下にスライド）、slide left（左にスライド）、slide right（右にスライド）が利用可能です。ただし、インタラクティブな要素を使用すると、モバイル端末や回線速度の遅い環境ではサイトの動作が重くなる場合があります。

設定に満足したら、「Save Changes（変更を保存）」をクリックしてください。

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

Max Mega Menuにはすぐに使えるデフォルトのメニューテーマが用意されています。ただし、オリジナルのテーマを作りたい場合も、簡単にメガメニューをカスタマイズできます。

そのためには、「Max Mega Menu」の設定から「Menu Themes（メニューテーマ）」にアクセスします。「Select theme（テーマを選択）」の横にある三点アイコンをクリックし、「Add new theme（新しいテーマを追加）」を選びます。

「General Settings（一般設定）」では、新しいテーマのタイトルを変更したり、矢印のスタイルを選択したり、サブメニュー項目の行の高さを設定したり、メガメニューレイアウトに影を付けたりすることが可能です。

次に「Menu Bar（メニューバー）」タブを開き、トップレベルメニューをカスタマイズします。ここでの設定によって、ナビゲーションメニューが最小化表示された際の見え方が決まります。

このタブの上部では、メニューの高さや背景色を調整できます。また、レイアウトを整えるためにカスタムパディングを設定したり、メニュー項目の周囲に枠線を追加して視覚的に区別することも可能です。

スクロールしていくと、トップレベルメニュー項目をカスタマイズするための専用セクションも表示されます：

• Menu Items Align（メニュー項目の配置）：すべてのメニュー項目を、サイトの左寄せ・中央・右上に配置できます。
• Item Font（フォント設定）：フォントファミリー、サイズ、太さ、色、スタイルなどを調整して、サイトデザインに合ったタイポグラフィを設定できます。
• Item Background（背景色）：各メニュー項目の背景色を変更できます。「Menu Background（メニュー背景）」を設定済みの場合は透明のままにできます。
• Item Spacing（スペーシング）：余白（マージンやパディング）を調整し、メガメニューのレイアウトを微調整できます。
• Item Border（枠線）：枠線の色、太さ、角の丸みを設定して、異なるビジュアル効果を出せます。
• Highlight Current Item（現在の項目を強調）：有効化すると、ユーザーがカーソルを合わせた際に現在のメニュー項目が強調表示され、より直感的にナビゲーションできます。

トップメニューの設定が終わったら、「Mega Menu」セクションに進みます。このタブでは、セカンドレベルやサードレベル項目のフォント、背景色、余白、枠線を変更できます。

独自のデザインにするためには、親メニューとサブメニューに異なる配色を割り当てるのがおすすめです。ただし、統一感を保つために同じタイポグラフィを使うことを推奨します。

設定が完了したら、変更を保存するのを忘れないでください。

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

Max Mega Menuはドラッグ＆ドロップ式のインターフェースを備えているため、新しいコンテンツを簡単に追加できます。テキストリンクだけでなく、WooCommerceの商品、画像、検索フィルターなども追加可能です。

「Appearance（外観）」→「Menus（メニュー）」に移動し、新しいメニューを作成するか、既存のメニューを編集します。その後、以下のステップを行ってください：

1. 左側の「Max Mega Menu Settings（Max Mega Menu設定）」で「Enable（有効化）」にチェックを入れます。このチェックボックスでは、複数のメニュー位置に対する設定も行えます。
2. 「Pages（固定ページ）」までスクロールし、すべてのページを選択して「Add to Menu（メニューに追加）」をクリックします。
3. 同じステップを「Posts（投稿）」「Categories（カテゴリー）」「Product Categories（商品カテゴリー）」でも繰り返します。
4. 「Menu Structure（メニュー構造）」では、サブカテゴリーをそれぞれのメインカテゴリーにドラッグ＆ドロップします。さらに、セカンドレベルメニューの右側にドラッグするとサードレベルメニューを作成でき、その後も同様に階層を追加できます。

デフォルトでは、このプラグインはフライアウトメニューまたはドロップダウンメニューのスタイルを使用します。メガメニューを作成するには、ページの1つにカーソルを合わせ、「Mega Menu」ボタンをクリックしてください。

ポップアップが表示されたら、サブメニューの表示モードを「Grid Layout（グリッドレイアウト）」または「Standard Layout（標準レイアウト）」に設定します。

グリッドレイアウトのメガメニューでは、複数の列や行を使ったメニューを作成できます。一方、標準レイアウトでは変更できるのは列数のみです。

メニューをより視覚的に魅力的にするために、「Select a widget to add to the panel（パネルに追加するウィジェットを選択）」をクリックしてリッチコンテンツを追加しましょう。ドロップダウンリストからは、検索バー、画像ギャラリー、カレンダー、音声コンテンツ、動画、商品フィルターなどのウィジェットを選べます。

サイトに多数のリンクを含む複雑なメニューがある場合は、各項目にアイコンを割り当てることでユーザー体験を向上できます。左サイドバーの「Icons（アイコン）」に移動し、さまざまなプラットフォームからアイコンを選択してください。

その後、「Mega Menu」ポップアップを閉じ、各トップレベルページに対して同じ手順を繰り返します。すべての設定が完了したら、「Save Menu（メニューを保存）」をクリックして、サイトでメガメニューを有効にしましょう。

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

コードで手動作成すると、メガメニューのデザインや機能をより細かくコントロールできます。ただし、この方法にはカスタムCSSの知識と、テーマのスタイルシートを調整するスキルが必要です。

以下のステップガイドに従って、WordPressサイトにメガメニューを追加しましょう。

1. 開発環境を準備する

WordPressはオープンソースのCMSのため、カスタムコードでテーマやプラグインを調整できます。

ただし、本番サイトで直接コードを編集すると予期せぬ不具合につながることがあります。これを防ぐために、まずWordPressサイトのバックアップを取り、検証用の安全な環境を用意しましょう。

HostingerのマネージドWordPressホスティングには自動バックアップが用意されており、ファイルを安全に保てます。さらに、BusinessプランとCloud StartupプランにはWordPressのStagingツール（ステージング環境）が付属しており、本番反映前にサイトを複製して変更点をテストできます。

HostingerでWordPressステージング環境を設定する方法：

1. hPanelにログインし、「Websites（ウェブサイト）」に移動します。
2. ドメイン名を選択し、「Manage（管理）」をクリックします。
3. 左サイドバーの「WordPress」→「Staging（ステージング）」を選択します。
4. 「Staging」タブに進み、「Create Staging（ステージングを作成）」をクリックします。

5. ステージング環境用のサブドメインを作成します。処理が完了するまで最大で15分ほどかかる場合があります。

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

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

多くのレンタルサーバーでは、サードパーティのFile Transfer Protocol（FTP）クライアントに接続する必要があります。ですが、Hostingerをご利用中のお客様なら、hPanelから簡単に操作できます。

1. Files（ファイル） → File Manager（ファイルマネージャー）に進み、Access files of（ドメインのファイルにアクセス）を選びます。
2. public_html → staging → wp_content → themes を開きます。
3. 編集したいWordPressテーマを選んで、そのフォルダを開きます。
4. style.cssファイルをダブルクリックして内容を編集します。
5. テキストエディターの最後までスクロールし、次のコードを入力します：

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

これにより、ユーザーがカーソルを合わせたときに、第2階層や第3階層の項目が表示されるようになります。

Step 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;
  }
}

これらのコードスニペットが意図した通りに動作するかどうかは、Webサイト全体のCSSやHTML構造によって異なります。そのため、各コードをテストして必要に応じて調整することが重要です。

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

WordPressでプラグインを使わずにメガメニューを作成することも可能ですが、この手動の方法はコーディング経験がほとんど、またはまったくないユーザーには適していません。完全な初心者であれば、WordPressのメニュープラグインを利用して、作業全体をスムーズに進めるのがおすすめです。

Max Mega Menuに加えて、メガメニューを作成できるおすすめのWordPressプラグインを3つご紹介します。QuadMenuはWordPressのプラグインディレクトリからインストールできますが、WP Mega Menu ProとJetMenuはサードパーティのマーケットプレイスのみで提供されています。

1. QuadMenu

QuadMenuはオープンソースのWordPressネイティブメガメニュープラグインで、幅広いテーマや配置オプションを提供しています。

無料版では、ナビゲーションメニューウィジェットをメニュー内に表示したり、メニューの折りたたみ用ブレークポイントをカスタマイズしたり、多彩なメガメニューを作成できます。利用可能なスタイルには、オフキャンバス、追従（sticky）、水平、垂直タイプのメガメニューなどがあります。

Proプランは年額49ドルから利用でき、タブ、ログイン、登録、ソーシャル、カルーセルメニューといった追加機能が含まれます。

2. WP Mega Menu Pro

WP Mega Menuは、初心者向けに設計された使いやすいメガメニュー作成ツールです。インスタントセットアップ機能により、すぐにレスポンシブ対応のメガメニューを作成できます。

ユーザーフレンドリーさに重点を置いている一方で、このWordPressメガメニュープラグインは幅広いカスタマイズ機能も提供しています。フォント、メニュータイプ、投稿メタデータ、メニューの配色、アニメーションなどを簡単に調整できます。

WP Mega Menuは有料版のみの提供で、料金はライセンス1つにつき19ドルです。無制限のWebサイトで利用でき、1年間のアップデートと優先サポートが含まれています。

3. JetMenu

JetMenuは、画像・動画・音声ファイルなどのインタラクティブコンテンツを含むWordPressメガメニューを作成できる有料プラグインです。

年額43ドルのサブスクリプションに登録すると、ドラッグ＆ドロップエディターや複数のメニュー表示レイアウト（ハンバーガー、水平、垂直メニュー）を利用できます。

さらに注目すべき機能として、プリセットマネージャーが用意されています。これにより、異なるメニュー用に複数のテンプレートを作成し保存することが可能です。

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

従来のメニューと比べて、WordPressでメガメニューを導入するとWebサイトにさまざまなメリットがあります：

• より整理された構造：WordPressサイトに大量のコンテンツや商品カテゴリがある場合、メガメニューを活用することで見やすく整理し、ユーザーに分かりやすく提示できます。
• 視覚的な魅力の向上：メガメニューはWebサイトのブランドデザインに合わせてカスタマイズでき、統一感があり視覚的に魅力的なレイアウトを実現します。
• ユーザーエンゲージメントの向上：ユーザーは必要な情報を簡単に見つけられると、サイト内をより積極的に探索するようになります。メガメニューはナビゲーションをシンプルにし、滞在時間の増加やコンテンツとのやり取りを促します。
• スペースの効率的な活用：メガメニューを使えば、Webサイトのレイアウトを乱さずに幅広い選択肢を提示できます。
• 競争上の優位性：メガメニューを提供することで、競合サイトとの差別化につながり、優れたユーザー体験を提供していることをアピールできます。

WordPressメガメニューの代替方法

WordPressメガメニューを使えば複雑なメニュー構造を表示できますが、ドロップダウンメニューやフライアウトメニューを利用すれば、よりシンプルな代替手段も選択できます。

特に、メニュー階層がシンプルで、WordPressサイトのデザインをすっきり保ちたい場合に適しています。

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

クラシックテーマを使用している場合、WordPressカスタマイザーを使ってドロップダウンメニューを作成するステップは以下のとおりです：

1. WordPressダッシュボードにログインし、Appearance（外観） → Customize（カスタマイズ）に進みます。
2. Customizer（カスタマイザー）画面で「Menus（メニュー）」を選択し、既存のメニューを指定します。新しいメニューを作成することもできます。
3. 「Add Items（項目を追加）」をクリックして、新しいページや投稿を追加します。
4. サブメニューを親項目の下にドラッグし、少し右にずらすことで階層構造を作成します。

5. 作業が完了したら、Menu Locations（メニューの位置）に進み、作成したドロップダウンメニューを希望のセクションに割り当てます。
6. 最後に「Publish（公開）」をクリックして変更内容を保存します。

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

ブロックテーマを使用している場合、Gutenbergエディターを使ってドロップダウンメニューを作成できます：

1. WordPressダッシュボードからAppearance（外観） → Editor（エディター）に進みます。
2. Block Editor（ブロックエディター）で、上部メニューバーにある「＋」アイコンをクリックし、Blocks（ブロック）を選びます。
3. Navigation（ナビゲーション）ブロックを検索して、希望する場所にドラッグします。

4. Navigation（ナビゲーション）ブロックを追加したら、右サイドバーに移動し、Block settings panel（ブロック設定パネル）を開きます。
5. 「＋」アイコンをクリックし、Page Link（ページリンク）を選んでメインページやサブメニュー項目を追加します。

6. ドロップダウンメニューを作成するには、サブメニュー項目を親項目の下に配置し、少し右にドラッグします。または、既存メニューの横にある三点アイコンをクリックし、Add submenu link（サブメニューリンクを追加）を選択します。

7. Settings（設定）タブから、メニューのレイアウトを調整し、縦または横に表示させることができます。
8. ドロップダウンメニューの見た目と機能に満足できたら、「Publish（公開）」または「Update（更新）」をクリックして変更を保存します。

まとめ

WordPressサイトを公開する前に、直感的に操作できるナビゲーションを整えておくことが大切です。特にECサイトやページ数の多いWebサイトでは、メガメニューを導入するのが理想的な方法です。

標準のWordPressメニューとは異なり、メガメニューを利用すると複雑な情報をシンプルかつ視覚的に分かりやすく整理できます。

メガメニューをサイトに追加する方法は主に2つあります。初心者の方には、Max Mega Menuやその他のプラグインを使ってトップレベルのナビゲーションバーとサブメニューを作成する方法をおすすめします。

より柔軟なカスタマイズを求める上級ユーザーであれば、CSSコードを使って自由にメガメニューを調整できます。時間と手間を節約するためには、WordPressのステージングツールやビルトインコードエディターを備えたHostingerのような信頼できるレンタルサーバーに登録するのがおすすめです。

このWordPressメガメニューチュートリアルが、より良いユーザー体験を提供するための参考になれば幸いです。ご不明な点があれば、ぜひ下のコメント欄からお知らせください。

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

WordPressメガメニューについてよく寄せられる質問とその回答をご紹介します。

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