Built on WIX Headless

ブログ / how-to

CMS for Harmony で Dynamic Pages を設定する

· Harmony でダイナミックページを作る方法

CMS for Harmony で Dynamic Pages を設定する

CMS for Harmony の Dynamic Page は、URL ごとに1件のコレクションアイテム(例: /fruits/apple)を表示します。バージョン 14 以降、そのページはネイティブの Wix ダイナミックページとして作成し、ウィジェットをその上に置きます。Create a native Wix dynamic page を参照してください。

必要なもの

1. ネイティブのコレクションページを追加する

  1. まだなら App Market から CMS for Harmony をインストールします。
  2. CMS for Harmony ダッシュボードでコレクション(Team、Listings、Projects など)を作り、必要なフィールドを追加します。
  3. URL とプレビューに実データがあるよう、アイテムをいくつか追加します。
  4. コレクションを開き、More actions → Add collection page を選びます。
  5. Wix がネイティブのダイナミックページを追加します。パス(アイテムスラッグの前の部分)を控えます。Fruits なら /fruits/apple のような URL に fruits を使います。

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

ページはテンプレートです

そのコレクションページは共有テンプレートです。同じレイアウトと Dynamic Page ウィジェットが、そのパスのすべてのアイテム URL を担当します。

2. Dynamic Page ウィジェットを設定する

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

  1. Add → Elements → Installed Apps → CMS for Harmony から Dynamic Page を追加します。
  2. ウィジェットを選択して設定を開きます。
  3. コレクションを接続します。
  4. レイアウトを選びます: Hero、Split、Stack、Minimal、またはカスタム HTML/CSS。
  5. 訪問者に見せるフィールドを選びます。
  6. パネルの Dynamic page で次を設定します。
    • Page path をネイティブのパス(/fruits/apple なら fruits)。先頭のスラッシュは付けません。
    • Page link field を Item slug
  7. エディター用に Preview item を選べます(公開ページは URL を使います)。
  8. URL ごとの検索・SNS プレビューが必要なら、アイテムごとの SEO を対応付けます。

ウィジェットの詳細: Dynamic Page。

3. 公開して確認する

  1. サイトを公開します。
  2. いくつかのアイテム URL(例: /fruits/apple と /fruits/pear)を開き、同じテンプレートが別の内容を示すことを確認します。

4. 別のコレクション

コレクションごとにネイティブのダイナミックページを追加します。

  1. そのコレクションを開き、More actions → Add collection page を選びます。
  2. Dynamic Page を追加し、コレクションを接続して Page path をそのページのパスにします。
  3. レイアウト、フィールド、SEO を上と同様に設定します。

5. Repeater や他の表示からリンクする

Repeater、Table、Slideshow、Media Gallery、Calendar で:

  1. Dynamic Page と同じコレクションを接続します。
  2. そのウィジェットのパネルで Dynamic page を開きます。
  3. Link to item page をオンにします。
  4. そのウィジェットでのクリックの動きを選びます。
  5. Page path を同じネイティブパス(fruits)にします。
  6. Page link field を Item slug にします。
  7. 同じタブか新しいタブかを選びます(公開サイトで有効)。

クリックはそのアイテムの URL へ進みます。たとえば Repeater のカードから /fruits/apple です。

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

以前のバージョンの /item ページはそのまま使えます。Page path をそのページのプレフィックス(item または item-1)に、Page link field を Dynamic page slug にします。Make dynamic は削除されましたが、新しいアイテムにも Wix がこのフィールドの値を引き続き入れます。新しいページは Add collection page と Item slug を使います。

関連

更新日:

Harmony で試してみますか? 無料のスターターサイトを作成 CMS for Harmony