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ブロック

ブロックエディタで:

  1. +をクリックして新しいブロックを挿入します。
  2. Naviplus Menu Builderを検索します。
  3. ブロックを挿入し、メニューの埋め込み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)でクリアできます。