WordPressに公開

A メガメニュー (モバイル) は セクション メニュー — 埋め込んだページの場所に表示されます。 WordPress では、Navi+ メニュービルダープラグインがショートコードまたは Gutenberg ブロックを介して配置します。テーマファイルを編集する必要はありません。

他のプラットフォーム (Wix、Squarespace、Webflow、カスタムサイト): Wix / Squarespace / その他に公開を参照してください。

ステップ

プラグインをインストール — Navi+ メニュービルダープラグインをインストールを参照してください。
外観 → Naviplus メニュービルダー で メガメニュー (モバイル) を構築します。メガメニュー (モバイル) — 使用方法を参照してください。
埋め込み ID をコピー (例: SF-123456789)。
以下のいずれかの方法を使用して埋め込みます。

[naviwp embed_id="SF-123456789"]

これを任意の投稿、ページ、またはショートコード対応ウィジェットに貼り付けます。

モバイルメガメニューをサイトのヘッダーに配置したい場合、最もクリーンな場所はテーマの モバイルヘッダー エリアです — またはモバイルにスコープされたフルサイトエディティングテンプレートパーツです。

ブロックエディタで、+ → Naviplus メニュービルダー を選択し、ブロックサイドバーに埋め込み ID を貼り付けます。 [naviwp embed_id="SF-..."] のプレーン ショートコード ブロックも同様に機能します。

[naviwp embed_id="SF-..."] を使用した ショートコード ウィジェット、または HTML ウィジェットを使用します:

<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>

タップターゲットは少なくとも 44 × 44 px にしてください — エディタの間隔とパディングコントロールを使用し、実際のデバイスでプレビューしてください。
2 つ以上のネストレベルを避けてください — 深いサブメニューはタッチスクリーンではフラストレーションの原因になります。より深いツリーにはスライドメニューを検討してください。
これをメガメニュー (デスクトップ) と組み合わせ、表示ルール → デバイス を使用して、各メニューをそのターゲットブレークポイントでのみ表示します。
スティッキー要素 (タブバー、FAB、チャットウィジェット) との重なりに注意してください。他の要素とメニューが重なるを参照してください。

エディタでの編集は次のフロントエンドページの読み込み時に適用されます — WordPress キャッシュのフラッシュは必要ありません。