Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. 動的ページと CMS の操作
    5. CMS：動的リストページを追加・設定する

CMS：動的リストページを追加・設定する

読了時間：23分
動的リストページでは、CMS コレクションのさまざまなアイテムを整理されたインデックスで紹介することができます。リピーター、ギャラリー、またはテーブルに表示される各アイテムは、訪問者が特定のアイテムについて詳しく読むことができるコレクションの動的アイテムページにリンクされています。

ページ要素とコレクションフィールド間の接続は、データセットによって制御されます。データセットの設定では、一度に表示できるアイテムの最大数を指定できるほか、フィルターを追加して特定のアイテムのみを表示させたり、並び替えを追加してアイテムが表示される順番を変更することができます。

表示するアイテムがたくさんある場合は、「もっと見る」ボタンまたはナビゲーションボタンを追加し、このボタンがクリックされるまでは追加のアイテムが表示されないようにして、ページの読み込み速度を向上させることができます。また、ドロップダウン、ラジオボタン、チェックボックスなどのユーザー入力要素を使用して、訪問者がページに表示されるアイテムをフィルターできるようにすることもできます。
始める前に：
  • 動的リストページに表示したいアイテムを含む CMS コレクションを作成します。
  • コレクションの動的アイテムページを作成したら、動的リストページのアイテムをコレクションの動的アイテムページにリンクします。または、動的アイテムページを動的リストページと同時に追加することもできます。手順については、下記のステップ 1 を参照してください。

ステップ 1 | 動的リストページを追加する

エディタの CMS パネルから、コレクションの動的リストページを作成します。これにより、後でカスタマイズするリピーターにコレクションのさまざまなアイテムを表示する新しいページが追加されます。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタ左側で「CMS」 をクリックします。
  3. 「あなたのコレクション」をクリックします。
  4. 動的リストページを作成するコレクションをクリックします。
  5. 「その他のアクション」をクリックし、「動的ページを追加」を選択します。
  6. 「リストページ」を選択し、「サイトに追加する」をクリックします。
    ヒント：コレクションに同時に動的アイテムページも追加する場合は、「アイテムページ」も選択してください。

ステップ 2 |（オプション）URL スラッグ構造を変更する

動的リストページの URL スラッグ構造を編集して、ウェブアドレスを分かりやすいものにします。

デフォルトでは、各動的ページは以下の URL スラッグ構造になっています：
  • 動的リストページ：https://www.{your-domain.com}/{collection-name}
  • 動的カテゴリーページ：https://www.{your-domain.com}/{collection-name}/{category}
  • 動的アイテムページ：https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}

URL スラッグ構造を編集する際は、その構造がサイトの他の既存ページで使用されていないことを確認してください。固有にするためには、たとえ変数が異なっていても、URL スラッグ構造がサイト上の別のページと同じプリフィックス（例：{コレクション名}）と同じ数の変数を持つことはできません。
重要：
動的ページの URL スラッグ構造を変更すると、これらのページへの既存のリンクはすべて機能しなくなります。これは、サイト内のリンク、外部と共有したリンク、検索エンジンの SEO リンクに影響します。訪問者と検索エンジンを古い URL から新しい URL に移動させる自動リダイレクト追加機能をリリースしています。

動的リストページの URL スラッグ構造を編集する方法：

Wix エディタ
Wix Studio エディタ

  1. エディタにアクセスします。
  2. エディタ左側で「ページ・メニュー」 をクリックします。
  3. 「動的ページ」をクリックします。
  4. 作成した動的リストページにマウスオーバーし、右側の「その他のアクション」アイコン をクリックします。
    ヒント：デフォルトでは、作成した動的リストページの名前は {コレクション名} (List) と表示されます。
  5. 「SEO」をクリックします。
  6. 「URL スラッグ構造」を編集します：
    • 「変数を追加」をクリックし、テキストフィールドまたは数値フィールドを選択して、URL スラッグ構造でその値を使用します。
    • URL スラッグ構造に静的値を使用する場合は、テキストまたは数値を入力してください。
    • キーボードの Enter キーを押して、URL スラッグ構造の変更内容を保存します。
動的リストページの URL スラッグ構造を編集しているスクリーンショット。

ステップ 3 | リピーターを CMS に接続する

これで、リピーターの各コンテナに、1つの画像、2つのテキスト要素、そして 1つのボタンを含む動的リストページが作成されました。リピーターの各コンテナには、コレクションの異なるアイテムが表示されます。

次に、各要素を該当するコレクションのフィールドに接続し、それらに必要な情報が表示されるようにします。ボタンはコレクションの動的アイテムページに接続して、訪問者がクリックした際、該当するアイテムのページに移動できるようにすることをおすすめします。

なお、動的リストページに各アイテムの詳細をさらに表示したい場合は、リピーターに要素を追加することができます。追加したら、それらの要素をデータセットを使用して、該当するコレクションのフィールドに接続します。
リピーターの代わりにギャラリーまたはテーブルを使用する場合：
コレクションのアイテムは、プロギャラリーやテーブルに表示することも可能です。その場合は、リピーターを削除してからプロギャラリーまたはテーブルを追加し、リピーターを接続するのと同じ方法で、データセットを使用してそれらの各要素を CMS のコレクションに接続してください。
Wix エディタ
Wix Studio エディタ
  1. （オプション）リピーターに要素（例：テキスト、ボタン、画像など）を追加するか、不要な要素を削除します。リピーターのサイズを調整すると、リピーター内にすべての要素を収めることができます。
  2. リピーター要素をクリックし、「CMS に接続」アイコン  を選択します。
  3. 右側の「リピーターを接続」パネルで、接続する要素をクリックします。
  4. 「接続」下で、該当するドロップダウンをクリックし、要素を該当するコレクションのフィールドに接続するか、クリック時の動作を選択します。表示されるオプションは、要素の種類によって異なります。
ヒント：
  • ボタン要素を動的アイテムページにリンクするには、「クリック時の動作を選択」をクリックし、末尾が「(Item)」で終わるコレクションの動的アイテムページを選択します。
  • 画像要素を動的アイテムページにリンクするには、「リンクの接続先」ドロップダウンをクリックし、末尾が「(Item)」で終わるコレクションの動的アイテムページを選択します。
コレクションの動的アイテムページにボタンをリンクする様子を示したスクリーンショット。
  1. 右側のパネル上部にある「リピーター接続」をクリックします。
  2. 上記の手順 3〜5 を繰り返し、さらに要素をコレクションのフィールドに接続するか、クリック時の動作を選択します。
  1. 必要に応じて、リピーター要素をクリックして調整します。
    ヒント：リピーターには、いつでも要素を追加または削除することができます。変化しない静的コンテンツを使用したい場合は、要素の接続を解除することができます。
  2. 「プレビュー」をクリックして、動的リストページの動作をテストします。
  3. 変更内容を公開する準備ができたら、「公開」をクリックします。

ステップ 4 |（オプション）データセット設定を管理する

データセットのデフォルトの設定では、リピーターやプロギャラリーに最大 12個のアイテムが最初に表示されるようになっています。この一度に表示されるアイテムの最大数は、データセットの設定から調整することができます。また、データセットの設定では、フィルターを追加して特定のアイテムのみを表示させたり、並び替えを追加してアイテムが表示される順番を変更することができます。
Wix エディタ
Wix Studio エディタ
  1. リピーターの接続済みデータセット設定に移動します：
    1. リピーターをクリックします。
    2. 「CMS に接続」アイコン  をクリックします。
    3. 右側の「リピーターを接続」パネルで「データセット設定」をクリックします。
  2. 「データセットモード」ドロップダウンをクリックし、オプションを選択します：
    • 読み取り：リピーターにコレクションのコンテンツを表示できるようにします。
    • 読み取り & 書き込み：リピーターにコレクションのコンテンツを表示し、訪問者が入力要素を使用してコレクションのコンテンツを追加または編集できるようにします。
  3. （オプション）コレクションの権限を変更して、コンテンツにアクセスできるユーザーや、そのユーザーが実行できる内容を制御したい場合は、「コレクションの権限」横の「公開」をクリックします。
  4. 「アイテム最大表示数」を編集し、リピーターに最初に表示されるアイテムの最大数を設定します。これは、訪問者が「もっと見る」ボタンをクリックした際に読み込まれるアイテムの最大数でもあります。パジネーションバーを接続したり、ボタンを「次のページ / 前のページ」データセットアクションに接続すると、このフィールドでリピーターの「ページ」ごとに表示されるアイテム最大数も決まります。「もっと見る」ボタンとナビゲーション要素の設定方法については、次のセクションをご覧ください。
    注意：このフィールドはテーブルには適用できません。テーブルを使用してアイテムを表示する場合は、テーブルの「レイアウト」アイコン  からカスタムのテーブルの高さを設定してページ送りを有効にし、表示するアイテム数を制限する必要があります。
  5. （オプション）「＋フィルターを追加」をクリックし、リピーターに特定のアイテムのみを表示させます。
  6. （オプション）「＋新しい並び替えを追加」をクリックして、リピーターに表示されるアイテムの順番を選択します。
Wix エディタのデータセットの設定画面のスクリーンショット。
  1. 「プレビュー」をクリックして、動的リストページの動作をテストします。
  2. 変更内容を公開する準備ができたら、「公開」をクリックします。

ステップ 5 |（オプション）「もっと見る」ボタンまたはナビゲーションボタンを作成する

このページに多数のアイテムを表示する場合、「もっと見る」ボタンを追加すると、このボタンがクリックされるまでは追加のアイテムが表示されなくなり、ページの読み込み速度を向上させることができます。ページに最初に表示されるアイテム数と、訪問者が「もっと見る」ボタンをクリックした際に表示されるアイテム数は、データセットの「アイテム最大表示数」の設定に基づいて決まります。

「次のページ / 前のページ」ボタンやパジネーションバー（Wix エディタのみ）を追加して、ページに接続されているリピーターやギャラリーに、アイテムの次または前の「ページ」を表示させることもできます。「アイテム最大表示数」で、アイテムの「ページ」ごとに表示されるアイテム最大数が決まります。
Wix エディタ
Wix Studio エディタ
実行する内容を選択します：
ヒント：
Wix エディタでは、パジネーションバーを追加・接続して、訪問者がアイテムの「ページ」を順番に閲覧できるようにすることができます。パジネーションバーの各「ページ」に表示されるアイテム数は、データセットの「アイテム最大表示数」の設定に基づいて決まります。Wix Studio エディタでパジネーションバーを使用したい場合は、こちらからこの機能リクエストに投票することができます。

ステップ 6 |（オプション）訪問者がアイテムをフィルターできるようにする

訪問者がユーザー入力要素を使用して、動的リストページに表示されるアイテムをフィルターできるようにします。フィルターに使用できる入力要素は、「ラジオボタン」、「チェックボックス」、「ドロップダウン」、「セレクトタグ」、または「スライダー」（レンジスライダーのみ）から選択することができます。
入力要素を使用して、動的リストページに表示されるアイテムをフィルターする様子を示したスクリーンショット。

よくある質問

動的リストページの設定に関するよくある質問と回答については、以下の質問をクリックしてください。

お役に立ちましたか？

|
この記事では下記を説明します：
  • ステップ 1 | 動的リストページを追加する
  • ステップ 2 |（オプション）URL スラッグ構造を変更する
  • ステップ 3 | リピーターを CMS に接続する
  • ステップ 4 |（オプション）データセット設定を管理する
  • ステップ 5 |（オプション）「もっと見る」ボタンまたはナビゲーションボタンを作成する
  • ステップ 6 |（オプション）訪問者がアイテムをフィルターできるようにする
  • よくある質問