WordPressでメニューを公開する
Navi+には2つの公開モード — スティッキーとセクション — があり、WordPressプラグインは両方をサポートしています。適用されるモードはメニューの種類によって異なります。
| メニュータイプ | モード | 表示場所 |
|---|---|---|
| Tab Bar | スティッキー | ビューポートに固定、サイト全体 |
| FAB | スティッキー | 浮動ボタン、サイト全体 |
| Slide Menu | スティッキー / コンテキスト | 任意の要素をタップしてトリガー |
| Mega Menu (Desktop) | セクション | 埋め込む位置 |
| Mega Menu (Mobile) | セクション | 埋め込む位置 |
| Grid Menu | セクション | 埋め込む位置 |
完全なスティッキー対セクションの比較については公開の概要を参照してください。
スティッキーメニュー — Tab Bar, FAB, Slide
プラグインがインストールされ、最初のメニューが保存されると、エディタで公開とマークされたスティッキーメニューはサイトのすべてのページに自動的に表示されます。
何も挿入する必要はありません。表示ルール(デバイス、URLパターン、ログイン状態)は、ブラウザ内のNavi+ランタイムによって評価されます。
サイト全体の埋め込みの切り替え
プラグイン管理者には、サイト全体の埋め込み用のスイッチが含まれています:
- オン(デフォルト): ランタイムはすべてのページの
<head>に注入され、スティッキーメニューはサイト全体に表示されます。 - オフ: ランタイムは
[naviwp]ショートコードまたはブロックを含むページでのみ読み込まれます。これを使用すると、メニューが少数のページ(例:モバイル専用のランディングページ)に表示されるようになります。
スティッキーメニューが表示されない場合は、次を確認してください:
- メニューがエディタで公開されている(ドラフトではない)。
- 表示ルールがテストしているページと一致している。
- ランタイムが読み込まれている — 接続を確認するを参照してください。
セクションメニュー — Mega Menu, Grid
セクションメニューは、ページの特定の場所に配置する必要があります。プラグインは3つの方法を提供します。
方法1 — ショートコード(推奨)
任意の投稿、ページ、またはショートコード対応ウィジェットで:
[naviwp embed_id="SF-123456789"]
SF-123456789をメニューの埋め込みID(メニューの公開パネルのエディタに表示される)に置き換えます。
方法2 — Gutenbergブロック
ブロックエディタで:
- +をクリックして新しいブロックを挿入します。
- Naviplus Menu Builderを検索します。
- ブロックを挿入し、メニューの埋め込みIDをブロックサイドバーに貼り付けます。
ブロックはエディタ内に空のプレースホルダーを表示し、フロントエンドでライブメニューに置き換えられます。また、ショートコードブロックをドロップして[naviwp embed_id="..."]を貼り付けることもできます — 同様に機能します。
方法3 — 段落ブロック内
プラグインは段落ブロックに直接貼り付けられた[naviwp ...]ショートコードを認識します。最初にショートコードブロックに切り替える必要はありません。
方法4 — ページビルダー(Elementor, Divi, Bricks, Oxygen)
ビルダーのショートコードウィジェットを使用し、[naviwp embed_id="..."]を貼り付けます。ビルダーにショートコードウィジェットがない場合は、埋め込みdivを持つHTMLウィジェットも機能します:
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
プラグインはすでにNavi+ランタイムを読み込んでいるため、メニューはそのコンテナ内に表示されます。
1つのトークン、複数のメニュー
プラグインはページごとに1回ランタイムを読み込み、同じNavi+サービスからすべてのメニュー — スティッキーまたはセクション — を取得します。メニューの公開を停止するには、エディタでドラフトに切り替えます。WordPressの変更は必要ありません。
キャッシュプラグイン(WP Rocket, W3 Total Cache, LiteSpeed Cache)
Navi+ランタイムはCDNから提供され、キャッシュに優しいです。ページキャッシュから除外する必要はありません。エディタでメニューを更新した後、変更は次のページ読み込み時に表示されます — WordPressのキャッシュフラッシュは必要ありません。メニューはブラウザによってランタイムで取得されるため、HTMLに焼き付けられていません。
古い出力が表示される場合、通常はブラウザキャッシュが原因です。ハードリロード(Cmd/Ctrl + Shift + R)でクリアできます。