SWELLでメガメニューを実装するカスタマイズ

※2023年5月11日追記

SWELL最新バージョン（2.7.5.1）でも有効です。

仕事でWebサイトを制作をした際、WordPressテーマ「SWELL」のグロナビに「メガメニュー」を実装しました。その際の作業メモです。

メガメニューって何だ？

メガメニューとは、グロナビのメニューにカーソルを合わせたタイミングでメニューエリアが拡張される機能のことです（↓下記Gifアニメーション参照）。

言葉で説明するより動きのあるデモサイトを見るのが確実です。

以下のデモサイトではSWELLにメガメニューを実装しています。
※PC閲覧時のみメニューエリアが広がる仕組みです。

【メガメニューを実装したデモサイト】

①デモサイト
②デモサイト
③デモサイト
④デモサイト

その他有料テーマSWELLで作ったデモサイト一覧

メガメニューのカスタマイズ構成

複数のサイトで使い回しできるよう、できるだけ簡単な構成でメガメニューを実装しました。

テーマファイルは直接編集しません。

テーマファイルを編集してしまうと、テーマのバージョンアップで上書きされるので今回のカスタマイズで一切編集していません。

【WordPress】
バージョン：6.2
この記事公開時の最新バージョンです。

【SWELL】
バージョン：2.7.5.1

【サーバー】
一般的な共有レンタルサーバーです。
今回のカスタマイズはサーバー依存のものではありません。

SWELLにメガメニューを実装する手順

クリーンインストールしたWordPressサイト上でSWELLを有効化した状態からメガメニューを実装する作業のメモです。

メガメニューはブログパーツで作成したものを表示する形式です。
「HTMLって何？」ってリテラシーのクライアントでも自由にメガメニューを修正できる仕組みです。

PHP・HTML・JSの知識はなくてOKです。今回のカスタマイズには使いません。