Built on WIX Headless

ドキュメント ウィジェット Dynamic Page ウィジェット

Dynamic Page ウィジェット

Wix Harmony 上で、レイアウトとアイテムごとの SEO 付きで、URL ごとに1件の CMS コレクションアイテムを表示します。

Dynamic Page ウィジェットは、URL ごとに1件のコレクションアイテムを表示します(例: /fruits/apple)。URL がどのアイテムでレイアウトを埋めるかを決めます。

ページはネイティブの Wix ダイナミックページとして作成します。Dynamic Page ウィジェットと、Repeater、Table、Slideshow、Media Gallery、Calendar からのリンクは、その URL を開きます。

Create the page

  1. コレクションを開きます。
  2. More actions → Add collection page を選びます。
  3. Wix がネイティブのダイナミックページを追加します。パス(アイテムスラッグの前の部分)を控えます。Fruits コレクションなら /fruits/apple のような URL に fruits を使います。

Wix は各アイテムのスラッグを Item slug フィールドに保存します。

手順: Dynamic Pages の設定方法。

ネイティブの Wix ダイナミックページに接続する

Dynamic Page ウィジェット、およびそれらのアイテム URL を開く Repeater、Table、Slideshow、Media Gallery、Calendar で次を設定します。

  1. 同じコレクションを接続します。
  2. Page path をネイティブのページパスにします(例では fruits)。先頭のスラッシュは付けません。
  3. Page link field を Item slug(Wix のスラッグフィールド)にします。以前の /item ページ向けに設定したコレクションには Dynamic page slug フィールドもある場合があります。新しいネイティブページでは選びません。

ネイティブのページパスに合わせた Page path と、Item slug に設定した Page link field

Dynamic Page ウィジェットと、そのページへリンクするすべてのウィジェットで、同じ Page path と Page link field を使います。そのページでアイテムを表示するときは、ネイティブのコレクションページに Dynamic Page ウィジェットを置きます。

Dynamic page URLs

場所: Settings → Dynamic page

このセクションでテンプレートをアイテム URL に接続します。新しいページでは ネイティブの Wix ダイナミックページに接続する を使います。

ネイティブのコレクションページ

  1. Page path をネイティブのページパスにします(/fruits/apple なら fruits)。
  2. Page link field を Item slug にします。
  3. 必要に応じて Preview item を選び、エディターでテンプレートを埋めます。公開ページでは常に URL のスラッグが使われます。

すでにサイトにある /item ページ

  1. Page path をそのページのプレフィックスにします — /item/jane-doe なら item、以前のバージョンで追加したページなら item-1/item-2。
  2. Page link field を Dynamic page slug にします。
  3. 必要に応じて Preview item を選びます。公開ページでは常に URL のスラッグが使われます。

Make dynamic は削除されたため、アプリは Dynamic page slug フィールドを作成・編集しなくなりました。このフィールドはコレクションに残り、新しいアイテムにも Wix が引き続き値を入れます。スラッグの作り方を変えるには、コレクションをネイティブのコレクションページに移行してください。

パネルのヒント: Editor only — live pages use the URL slug.

レイアウト

レイアウトの Mode を選びます。

  • Preset — Hero、Split、Stack、Minimal の配置
  • Custom — グリッド上にフィールドをドラッグ(Arrange fields)。Repeater のカスタムカードと同様
  • HTML / CSS — 完全にカスタムのマークアップとスタイル

フィールド

画像、動画、ギャラリー、リンク、参照、Address、Color を含む、表示可能な任意のコレクションフィールドを接続できます。

Date & time フィールド

Formatting で Show timezone をオンにすると、訪問者のローカルタイムゾーン略称(例: EST、GMT+2)が末尾に付きます。

Payments

コレクションでカタログ決済が有効な場合(Pro)、アイテムページで Show payment actions をオンにして Add to cart/Buy now を表示します。

Address フィールド

Formatting で Display as を設定します。

  • Text — 整形された住所行
  • Map — インタラクティブな OpenStreetMap のピン(値に座標が必要)
  • Text and map — 両方

マップの高さも設定できます。マップモードを選んでも座標がない場合、可能なときはテキストにフォールバックします。

Video フィールド

Video フィールド(およびギャラリー内の動画)では、Video playback をモーダルで開く、クリックでインライン再生、またはミュート自動再生に設定します。

Color フィールド

Formatting で Display as を Swatch、Hex、または Swatch and hex に設定し、必要に応じてスウォッチサイズを調整します。

Reference フィールド

Reference / Multi-reference フィールドでは、ページ上に表示するラベル用に、関連コレクションから Display field を選びます。

Data refresh

Data refresh で Show refresh button および/または Auto-refresh を有効にすると、訪問者はページを離れずに現在のアイテムを再読み込みできます。Auto-refresh はタブが非表示のとき一時停止します。同じページの Form で Update displays on this page が有効で同じコレクションを使っている場合、送信後にこのウィジェットも再読み込みできます。

アイテムごとの SEO

コレクションフィールドからタイトル、説明、共有画像をマッピングし、各アイテムが独自の検索・SNS プレビューを持てるようにします。

セットアップ

Dynamic Page を含むウィジェットは Add → Elements → Installed Apps から追加します — ウィジェットを追加する を参照。Dynamic Page はネイティブのコレクションページに置きます。

パネルの AI setup で平易な言葉から始め、その後 Manual で調整します。詳細: AI setup。

  1. コレクションのネイティブダイナミックページを作成します(More actions → Add collection page)。
  2. そのページに Dynamic Page を追加し、Settings を開きます。
  3. コレクションを接続し、フィールド/レイアウトを選びます。
  4. Page path と Page link field は ネイティブの Wix ダイナミックページに接続する のとおりに設定します。
  5. 必要に応じて Data refresh を有効にします。
  6. SEO フィールドをマッピングします(推奨)。

別のコレクション

コレクションごとにネイティブのダイナミックページを追加します。More actions → Add collection page を選び、Dynamic Page を置いて Page path をそのページのパスにします。

表示からのリンク

Repeater、Table、Slideshow、Media Gallery、または Calendar で Link to item page をオンにします(Dynamic Page と同じコレクションと Page path)。クリックでテンプレート上のそのアイテムの URL が開きます。