CMS:リピーターにコレクションコンテンツを表示する
読了時間:27分
リピーターを CMS(コンテンツ管理システム)に接続して、コレクションの動的コンテンツを表示します。
コレクションを作成し、ページにリピーターを追加した後、データセットを使用してリピーター内の各要素をコレクションのフィールドに接続します。接続すると、リピーター内の各要素に、異なるコレクションアイテムが読み込まれます。これにより、ページを表示した際、リピーターに自動的に指定したコレクションのコンテンツが表示されるようになります。
始める前に:
サイトに CMS を追加してください。
ステップ 1 | CMS コレクションを作成する
リピーターで使用したいコンテンツを格納する複数アイテムコレクションを作成して、リピーター内の要素に接続するコレクションフィールドを追加します。次に、リピーターに表示されるアイテムを追加し、各アイテムのフィールドに入力します。コレクションの権限を設定して、格納するコンテンツの種類と、その管理にアクセスできるユーザーを決定します。
Wix エディタ
Wix Studio エディタ
ダッシュボード
- エディタにアクセスします。
- エディタ左側で「CMS」
をクリックします。
- 「コレクションを作成」をクリックします。
- コレクション名を入力します。
- 「複数のアイテム(デフォルト)」を選択したまま、「作成」をクリックします。
- 手動または CSV ファイルをインポートして、コレクションにフィールドを追加します:
- 手動でフィールドを追加する:「+フィールドを追加」をクリックして、コレクションにフィールドを手動で追加します。
- CSV ファイルをインポートする:「CSV ファイルをインポート」をクリックして、CSV ファイルをコレクションにアップロードします。
- コレクションにアイテムを追加します:
- 「+アイテムを追加」をクリックします。
- 該当する各フィールドにアイテムに関するコンテンツを追加します。
- この手順を繰り返し、必要な数のアイテムを作成します。
![CMS コレクションにアイテムを追加する様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/09/12/cf06ee96-e901-4ccd-848d-421e9adb4148/e75e61ab-45f6-4da1-bc90-0b5e9c0f7f60.jpg)
- コレクションの権限を設定します:
- 「その他のアクション」をクリックし、「権限・プライバシー」を選択します。
- コレクションに使用する権限を選択します:
注意:サイト所有者と共同管理者がライブサイトにログインすると、常に「管理者」として扱われます。つまり、サイト所有者と共同管理者は、常にライブサイトからコレクションのコンテンツを表示、追加、更新、または削除することができます。このルールは、選択しているコレクションの権限に関係なく適用されます。
コンテンツを表示
コンテンツを収集
カスタム
ステップ 2 | リピーターを追加・カスタマイズする
ページにリピーターを追加し、その中に配置する画像、テキスト、ボタンなどの要素を追加して、それらがすべて収まるようリピーターのサイズを調整します。リピーターに要素を追加すると、それらが自動的にリピーターアイテムとして認識されます。
後ほど、それぞれの要素をコレクションのフィールドに接続して、リピーター内のコンテンツを置き換えます。こうすることで、各リピーターアイテムに、異なるコレクションアイテムが表示されるようになります。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- リピーターを追加したいページまたはセクションに移動します。
- エディタ左側で「パーツを追加」
をクリックします。
- 「リスト」をクリックします。
- 使用したいリピーターをクリックして、ページにドラッグします。
![「リスト」タブにある「リピーター」](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/09/12/670ad227-5660-41f7-8760-7ce716b9a7d5/e25b831c-c00e-4938-8575-3039b81d42a5.jpeg)
- リピーターに要素を追加または削除します。リピーターのサイズを調整すると、必要な要素をすべてリピーター内に収めることができます。後ほど、それぞれの要素をコレクションのフィールドに接続して、リピーター内のコンテンツを置き換えます。こうすることで、各リピーターアイテムに、異なるコレクションアイテムが表示されるようになります。
重要:
dynamic item pageにリンクできるように、リピーターにボタンまたは画像要素が含まれていることを確認してください。これにより、訪問者は画像またはボタンをクリックして、動的アイテムページの関連するアイテムに移動することができます。
ステップ 3 | リピーターアイテムをコレクションに接続する
データセットを使用して、リピーター内の各要素をコレクションのフィールドに接続します。リピーター内のそれぞれの要素は、表示させたいコレクションのコンテンツに自由に接続することができます。リピーターに含まれる要素は、必要に応じてサイズ変更、移動、または調整することができます。
Wix エディタ
Wix Studio エディタ
- エディタで、追加したリピーターをクリックします。
- 「CMS に接続」アイコン
をクリックします。
- 「データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択し、名前を付けて「作成」をクリックすることもできます。
![データセットを接続する際に、関連するコレクションを選択しているスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/09/25/f5c7f740-4592-42c7-a280-328ab37afb87/bf59fd4d-c23d-4551-a574-278d2e8954aa.png)
- 「接続」セクション下で、最初に接続する要素をクリックします。
- (オプション)要素を異なるデータセットに接続する場合は、「データセットを接続」ドロップダウンをクリックし、別のデータセットを選択します。それ以外の場合は、同じデータセットに接続したままにします。
- 「接続」下で、該当するドロップダウンをクリックし、要素の各部分を該当するコレクションのフィールドに接続します。表示されるオプションは、要素の種類によって異なります。
ヒント:
- ボタン要素をコレクションの動的アイテムページにリンクするには、「クリック時の動作を選択」をクリックし、末尾が「(Item)」で終わる動的アイテムページを選択します。
- 画像要素をコレクションの動的アイテムページにリンクするには、「リンクの接続先」ドロップダウンをクリックし、末尾が「(Item)」で終わる動的アイテムページを選択します。
![動的アイテムページにボタンを接続しているスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/09/25/18bfc127-2e56-425b-86a5-4a18002292af/8d956159-dc2f-4091-b5e3-2374cd9380b6.png)
- 右側のパネル上部にある「リピーター接続」をクリックします。
- 上記の手順 4〜7 を繰り返し、その他の要素も該当するコレクションのフィールドに接続します。
![リピーターのデータセットに接続できるすべての要素が表示されたスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/09/25/53a70b84-ccd4-429e-b2be-b42de3db9b2a/af49b20a-e893-412e-a9e3-c4719d213a32.png)
- (オプション)必要に応じて、リピーターに含まれる要素をサイズ変更、移動、または調整します。要素はいつでも追加、削除、接続、または接続解除することができます。
ステップ 4 | データセット設定を管理する
データセット設定を編集して、データセットモード、一度に読み込むことができるアイテムの最大数、表示されるアイテム、および表示されるアイテムの順番を制御します。
Wix エディタ
Wix Studio エディタ
- リピーターの接続されたデータセット設定に移動します:
- リピーターをクリックします。
- 「CMS に接続」アイコン
をクリックします。
- 右側の「リピーターを接続」パネルで「データセット設定」をクリックします。
- 「データセットモード」ドロップダウンをクリックし、オプションを選択します:
- 読み取り:リピーターにコレクションのコンテンツを表示できるようにします。
- 読み取り & 書き込み:リピーターにコレクションのコンテンツを表示し、訪問者が入力要素を使用してコレクションのコンテンツを追加または編集できるようにします。
- 「アイテム最大表示数」を編集し、リピーターに最初に表示されるアイテムの最大数を設定します。これは、訪問者が「もっと見る」ボタン、「次のページ / 前のページ」ボタン、またはパジネーションバー(いずれも次のステップを参照)をクリックした際に読み込まれるアイテムの最大数としても使用されます。
![「アイテム最大表示数」が表示されたデータセット設定のスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/06/04/4ebb0eda-cc9d-45fb-bcfa-3aa75d82398a/c805767a-22ad-44e7-bdee-f50fabc80534.png)
- (オプション)「+フィルターを追加」をクリックし、リピーターに特定のアイテムのみを表示させます。
- (オプション)「+新しい並び替えを追加」をクリックし、リピーターに表示されるコレクションアイテムの順番を選択します。
ステップ 5 |(オプション)「もっと見る」ボタンまたはナビゲーションボタンを作成する
リピーターには、一度に最大 1,000アイテムを表示することができます。ただし、多くのアイテムを表示したい場合は、「もっと見る」ボタンを追加して読み込みのパフォーマンスを向上させることを検討してください。「アイテム最大表示数」フィールドを調整して、データセットに接続されたリピーターで一度に読み込むことができるアイテムの最大数を制御します。
「アイテム最大表示数」の設定は、「次のページ / 前のページ」ボタン、およびパジネーションバー(Wix エディタのみ)を接続した場合、リピーターの「ページ」ごとのアイテム数としても使用されます。
Wix エディタ
Wix Studio エディタ
実行する内容を選択します:
「もっと見る」ボタンを作成する
「次のページ」ボタンと「前のページ」ボタンを作成する
パジネーションバーを接続する
よくある質問
リピーターと CMS の接続に関するよくある質問と回答については、以下をクリックしてください。
訪問者がリピーターのコンテンツをフィルターできるようにするには、どうすればよいですか?
接続したアイテムがリピーターに表示されないのはなぜですか?
リピーターアイテムを動的アイテムページにリンクするにはどうすればよいですか?
リピーターに一部の要素を追加することができないのはなぜですか?
独自にリピーターを設定する前に、プリセットのコレクションに含まれるリピーターを表示して動作を確認することはできますか?