WordPressに公開
グリッドメニューはセクションメニューです — 埋め込んだページの場所にレンダリングされます。カテゴリショートカット、ハブページ、そして”何をしたいですか？”パネルに最適です。WordPressでは、Navi+メニュービルダープラグインがショートコードまたはGutenbergブロックを介して配置され、テーマファイルを編集する必要はありません。
他のプラットフォーム（Wix、Squarespace、Webflow、カスタムサイト）：Wix / Squarespace / その他に公開を参照してください。
ステップ
- プラグインをインストール — Navi+メニュービルダープラグインをインストールを参照してください。
- 外観 → Naviplusメニュービルダーでグリッドメニューを作成します。グリッドメニュー — 使用方法とレスポンシブグリッドメニューを参照してください。
- 埋め込みIDをコピーします（例：
SF-123456789）。 - 以下のいずれかの方法を使用して埋め込みます。
メニューを挿入
オプション1 — ショートコード（推奨）
[naviwp embed_id="SF-123456789"]
これを任意の投稿、ページ、またはショートコード対応ウィジェットにドロップします。
典型的な場所：
- カテゴリタイルのあるホームページのヒーローセクション。
- 折り返しの上にあるランディングページ。
- カテゴリアーカイブの空の状態。
オプション2 — Gutenbergブロック
ブロックエディタで、+ → Naviplusメニュービルダーを選択し、ブロックサイドバーに埋め込みIDを貼り付けます。ショートコードブロックは[naviwp embed_id="SF-..."]と同等です。
オプション3 — ページビルダー（Elementor、Divi、Bricks、Oxygen）
ショートコードウィジェットを使用して[naviwp embed_id="SF-..."]を使用します。ビルダーにショートコードウィジェットがない場合は、埋め込みdivを使用したHTMLウィジェットが機能します：
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
オプション4 — CSSセレクター（Navi+アプリからの自動配置）
ショートコードを手動で配置する代わりに、Navi+がCSSセレクターを使用して要素を自動的に挿入または置き換えることができます — これは完全にNavi+アプリから設定されます。
CSSセレクターの理解
CSSセレクターは、ページ上の特定のHTML要素をターゲットにします。Navi+は、メニューを正確にどこに配置するかを知るためにこれを使用します — 既存の要素の前に挿入、後に挿入、または置き換えます。
適切なCSSセレクターを見つけるには、次を使用します：
- デバッグモード — 任意の要素にマウスをホバーして、そのセレクターを即座にコピー
- ブラウザDevTools — ブラウザインスペクターを介した手動方法
3つの公開オプション
Navi+アプリで：ウェブサイトに公開をクリック → “挿入/置き換え方式でメニューを公開”をオンにする → CSSセレクターを入力し、1つのオプションを選択します：
オプションA: 前に挿入
選択した要素の直前にグリッドメニューを挿入します。フルセクションとして表示されます。
例： main → グリッドメニューがメインコンテンツエリアの上に表示されます。
これはWordPressでのグリッドメニューの最も一般的な設定です。
WordPressテーマの一般的なセレクター：
main— ほとんどのテーマ#main— Twenty Twenty、Astra、OceanWP.site-main— 多くのテーマ#content— Divi、一部のデフォルトテーマ
オプションB: 後に挿入
選択した要素の直後にグリッドメニューを挿入します。
例： header → グリッドメニューがヘッダーのすぐ下に表示されます。
WordPressテーマの一般的なセレクター：
header— ほとんどのテーマ.site-header— OceanWP、Astra#masthead— Twenty Twenty-OneおよびデフォルトのWordPressテーマ
オプションC: 置き換え
ほとんどのWordPressサイトには置き換えるための組み込みのグリッドメニュー要素がありません。前に挿入するmainが推奨されるアプローチです。
テーマに置き換えたいグリッドスタイルの要素がある場合は、デバッグモードまたはブラウザDevToolsを使用してそのセレクターを見つけてください。
デバイス特有のターゲティング
特定のデバイスでのみセレクターを適用するためにサフィックスを追加します：
| サフィックス | 適用先 |
|---|---|
(M) |
モバイルのみ |
(D) |
デスクトップのみ |
| (なし) | 両方 |
例：main(D) — グリッドメニューをデスクトップのみに挿入します。
モバイルのヒント
- レスポンシブグリッドメニューを使用して、ブレークポイントごとに列数を切り替えます — 例：デスクトップで4列、モバイルで2列。
- タイルの内容は短く保ちます — アイコン、1語または2語のラベル、オプションで小さな説明。長いラベルは予測不可能に折り返されます。
- パディングを含めて、タップターゲットは少なくとも44 × 44 pxを目指します。
後でメニューを更新
エディタでの編集は、次のフロントエンドページの読み込み時に適用されます — WordPressキャッシュのフラッシュは必要ありません。