Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. 動的ページと CMS の操作
    5. CMS：リピーターにコレクションコンテンツを表示する

CMS：リピーターにコレクションコンテンツを表示する

読了時間：20分
リピーターを CMS（コンテンツ管理システム）に接続して、コレクションの動的コンテンツを表示します。

コレクションを作成し、ページにリピーターを追加した後、データセットを使用してリピーター内の各要素をコレクションのフィールドに接続します。接続すると、リピーター内の各要素に、異なるコレクションアイテムが読み込まれます。これにより、ページを表示した際、リピーターに自動的に指定したコレクションのコンテンツが表示されるようになります。
始める前に：
サイトに CMS を追加してください。

ステップ 1 | CMS コレクションを作成する

リピーターで使用したいコンテンツを格納する複数アイテムコレクションを作成して、リピーター内の要素に接続するコレクションフィールドを追加します。次に、リピーターに表示されるアイテムを追加し、各アイテムのフィールドに入力します。コレクションの権限を設定して、格納するコンテンツの種類と、その管理にアクセスできるユーザーを決定します。
Wix エディタ
Editor X
Wix Studio エディタ
ダッシュボード
  1. サイトダッシュボードの「CMS」にアクセスします。
  2. 「コレクションを作成」をクリックします。
  3. コレクション名を入力します。
  4. 「複数のアイテム（デフォルト）」を選択したまま、「作成」をクリックします。
  5. 手動または CSV ファイルをインポートして、コレクションにフィールドを追加します：
  6. コレクションにアイテムを追加します：
    1. 「＋アイテムを追加」をクリックします。
    2. 該当する各フィールドにアイテムに関するコンテンツを追加します。
    3. この手順を繰り返し、必要な数のアイテムを作成します。
CMS コレクションにアイテムを追加する様子を示したスクリーンショット。
  1. コレクションの権限を設定します：
    1. 「その他のアクション」をクリックし、「権限・プライバシー」を選択します。
    2. 「このコレクションに保存するコンテンツの種類」ドロップダウンをクリックしてオプションを選択します。必要であればドロップダウンをクリックして、コンテンツを閲覧、追加、削除、更新できるユーザーを調整できます。コレクションの権限を設定する方法はこちら
    3. 「保存する」をクリックします。
コレクションの権限とプライバシーを設定しているスクリーンショット。

ステップ 2 | リピーターを追加・カスタマイズする

ページにリピーターを追加し、その中に配置する画像、テキスト、ボタンなどの要素を追加して、それらがすべて収まるようリピーターのサイズを調整します。リピーターに要素を追加すると、それらが自動的にリピーターアイテムとして認識されます。

後ほど、それぞれの要素をコレクションのフィールドに接続して、リピーター内のコンテンツを置き換えます。こうすることで、各リピーターアイテムに、異なるコレクションアイテムが表示されるようになります。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタにアクセスします。
  2. リピーターを追加したいページまたはセクションに移動します。
  3. エディタ左側で「パーツを追加」 をクリックします。
  4. 「リスト」をクリックします。
  5. 使用したいリピーターをクリックして、ページにドラッグします。
「リスト」を追加しているスクリーンショット
  1. リピーターに要素を追加または削除します。リピーターのサイズを調整すると、必要な要素をすべてリピーター内に収めることができます。後ほど、それぞれの要素をコレクションのフィールドに接続して、リピーター内のコンテンツを置き換えます。こうすることで、各リピーターアイテムに、異なるコレクションアイテムが表示されるようになります。
重要：
動的アイテムページにリンクできるように、リピーターにボタンまたは画像要素が含まれていることを確認してください。これにより、訪問者は画像またはボタンをクリックして、動的アイテムページ内の関連するアイテムに移動できます。

ステップ 3 | リピーターアイテムをコレクションに接続する

データセットを使用して、リピーター内の各要素をコレクションのフィールドに接続します。リピーター内のそれぞれの要素は、表示させたいコレクションのコンテンツに自由に接続することができます。リピーターに含まれる要素は、必要に応じてサイズ変更、移動、または調整することができます。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタで、追加したリピーターをクリックします。
  2. 「CMS に接続」アイコン  をクリックします。
  3. 「データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択し、名前を付けて「作成」をクリックすることもできます。
データセットを接続する際に、関連するコレクションを選択しているスクリーンショット。
  1. 「接続」セクション下で、最初に接続する要素をクリックします。
  2. （オプション）要素を異なるデータセットに接続する場合は、「データセットを接続」ドロップダウンをクリックし、別のデータセットを選択します。それ以外の場合は、同じデータセットに接続したままにします。
  3. 「接続」下で、該当するドロップダウンをクリックし、要素の各部分を該当するコレクションのフィールドに接続します。表示されるオプションは、要素の種類によって異なります。
ヒント：
  • ボタン要素を動的アイテムページにリンクするには、「クリック時の動作を選択」をクリックし、末尾が「(Item)」で終わる動的アイテムページを選択します。
  • 画像要素を動的アイテムページにリンクするには、「リンクの接続先」ドロップダウンをクリックし、末尾が「(Item)」で終わる動的アイテムページを選択します。
動的アイテムページにボタンを接続しているスクリーンショット。
  1. 右側のパネル上部にある「リピーター接続」をクリックします。
  2. 上記の手順 4〜7 を繰り返し、その他の要素も該当するコレクションのフィールドに接続します。
リピーターのデータセットに接続できるすべての要素が表示されたスクリーンショット。
  1. （オプション）必要に応じて、リピーターに含まれる要素をサイズ変更、移動、または調整します。要素はいつでも追加、削除、接続、または接続解除することができます。

ステップ 4 | データセット設定を管理する

データセット設定を編集して、データセットモード、一度に読み込むことができるアイテムの最大数、表示されるアイテム、および表示されるアイテムの順番を制御します。
Wix エディタ
Editor X
Wix Studio エディタ
  1. リピーターの接続されたデータセット設定に移動します：
    1. リピーターをクリックします。
    2. 「CMS に接続」アイコン  をクリックします。
    3. 右側の「リピーターを接続」パネルで「データセット設定」をクリックします。
  2. 「データセットモード」ドロップダウンをクリックし、オプションを選択します：
    • 読み取り：リピーターにコレクションのコンテンツを表示できるようにします。
    • 読み取り & 書き込み：リピーターにコレクションのコンテンツを表示し、訪問者が入力要素を使用してコレクションのコンテンツを追加または編集できるようにします。
  3. 「アイテム最大表示数」を編集し、リピーターに最初に表示されるアイテムの最大数を設定します。これは、訪問者が「もっと見る」ボタン（次のステップを参照）をクリックした際に読み込まれるアイテムの最大数としても使用されます。
「アイテム最大表示数」が表示されたデータセット設定のスクリーンショット。
  1. （オプション）「＋フィルターを追加」をクリックし、ギャラリーに特定のアイテムのみを表示させます。
  2. （オプション）「＋新しい並び替えを追加」をクリックして、リピーターに表示されるコレクションアイテムの順番を選択します。

ステップ 5 |（オプション）「もっと見る」ボタンを作成する

コレクション内に、リピーターで一度に表示することができない数のアイテムがある場合は、「もっと見る」ボタンを追加することができます。訪問者がこのボタンをクリックすると、さらにリピーターにアイテムが表示されます。また、データセット設定で「アイテム最大表示数」を編集すると、リピーターに最初に読み込まれるアイテム数と、「もっと見る」ボタンをクリックした際に読み込まれるアイテム数の両方を指定することができます。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタ左側で「要素を追加」 をクリックします。
  2. 「ボタン」をクリックし、表示したい場所にボタンをドラッグします。リピーターと重ならないよう、必ずリピーターの外側に配置してください。
    ヒント：ボタンの代わりに、画像を追加して「もっと見る」ボタンとして使用することもできます。
  3. 「テキストを編集」をクリックし、ボタンに表示するテキスト（例：「もっと見る」など）を入力します。
  4. 「CMS に接続」アイコン  をクリックします。
  5. 「データセットを接続」ドロップダウンをクリックし、リピーターに接続されているデータセットを選択します。
  6. 「クリック時の動作を選択」ドロップダウンをクリックし、「もっと見る」を選択します。
ボタンのデータセット接続で、「もっと見る」クリック時の動作を選択しているスクリーンショット。
  1. ボタンをクリックして「デザイン」アイコン を選択し、「もっと見る」ボタンの外観をカスタマイズします。

よくある質問

リピーターと CMS の接続に関するよくある質問と回答については、以下をクリックしてください。

お役に立ちましたか？

|

この記事では下記を説明します：

  • ステップ 1 | CMS コレクションを作成する
  • ステップ 2 | リピーターを追加・カスタマイズする
  • ステップ 3 | リピーターアイテムをコレクションに接続する
  • ステップ 4 | データセット設定を管理する
  • ステップ 5 |（オプション）「もっと見る」ボタンを作成する
  • よくある質問