CMS:ページにコレクションコンテンツを表示する
読了時間:4分
Wix CMS(コンテンツ管理システム)を使用すると、エディタとは別のデータベースコレクションに膨大な量のコンテンツを保存することができます。サイトにこれらのコンテンツを表示させるには、データセットを使用してコレクションのアイテムとページ要素を接続する必要があります。
データセットの設定を編集すると、一度に表示されるアイテム数、表示から除外するアイテム、およびアイテムが表示される順番を制御することができます。また、「もっと見る」ボタンをクリックした際に追加のアイテムが表示されるようにしてページの読み込み速度を向上させたり、入力要素を使用して訪問者がアイテムをフィルターできるようにすることもできます。
ステップ 1 | コレクションを作成する
CMS では、サイト上のページ要素に接続できる「コレクション」と呼ばれるデータベースにコンテンツが保存されます。動的ページにアイテムを表示させたり、リピーターなどの要素内に同じレイアウトでさまざまなアイテムを表示させたい場合は、「複数のアイテム」コレクションを作成します。静的ページやセクションに 1つのアイテムのみを表示させたい場合は、「単独のアイテム」コレクションを作成します。
![CMS 内のコレクションのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/02/2de08657-9b10-47ab-9d3d-6818c6af70c2/024e601b-2257-4068-a7d0-69e352f63e78.jpg)
ステップ 2 | ページをデザインする
コレクションのコンテンツをどのように表示したいかを考慮し、最も適したページの種類を選択します。
コレクションのコンテンツは、以下の種類のページに表示することができます:
- 静的ページ:通常のページでは、テキスト、画像、リピーター、プロギャラリーなどの要素を CMS に接続することで、サイトにコレクションのアイテムが表示されます。1つのサイトに追加できる静的ページの数は、最大で 100ページまでとなっています。ページ要素をデータセットに接続する方法はこちら
- 動的リストページ:この種類の動的ページでは、リピーター、プロギャラリー、またはテーブル内に複数のアイテムが表示されます。訪問者がアイテムをクリックすると、そのアイテムの詳細情報が記載された動的アイテムページに移動します。動的リストページの設定方法はこちら
- 動的アイテムページ:この種類の動的ページには、個々のアイテムの詳細が表示されます。各コレクションのアイテムには独自の動的アイテムページ URL があり、それぞれのページには同じレイアウトが適用されます。動的アイテムページの設定方法はこちら
ヒント:
動的リストページや動的アイテムページにコレクションのアイテムを表示させる場合は、サンプルとしてエディタの CMS ボタンからプリセットを追加することができます。
![CMS プリセット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/02/672b05cd-476f-4728-8131-23ccd2827a89/3dc2a045-b35d-4992-8520-bc12ab2ef411.jpg)
ステップ 3 | ページ要素をデータセットに接続する
データセットは、コレクションのコンテンツをページ要素にバインドする働きをします。ページの種類を選択して設定したら、データセットを使用してコレクションのコンテンツを該当するページ要素に接続します。
![接続セクション](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/02/256d85ab-3afc-4ce4-aa2c-54f194730199/701cb9a1-1658-4901-ac39-38b3d280085a.png)
ステップ 4 | データセット設定を管理する
データセットの設定で「データセットモード」を変更すると、サイト要素にコレクションのコンテンツを表示できるようにするか、入力要素を使用してコレクションのコンテンツを修正できるようにするか、またはそれら両方を実行できるようにするかを指定することができます。また、「アイテム最大表示数」を指定して一度に表示されるアイテム数を制御したり、フィルターを追加して条件に一致するアイテムのみを表示できるようにしたり、並び替えを追加してコレクションのアイテムが表示される順番を変更することもできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/10/27/efe0f417-70ca-4e8c-8cd3-f026ac2a0743/d96ead92-8633-402d-b545-b9073fe0457f.png)
ステップ 5 |(オプション)「もっと見る」ボタンまたはナビゲーションボタンを作成する
複数のアイテムが表示されるリピーターやプロギャラリーを使用している場合は、さらにアイテムを表示するための「もっと見る」ボタンを追加することができます。訪問者がこのボタンをクリックするまではアイテムが少なく表示されるようにしておくと、ページの読み込み速度を向上させることができます。また、ナビゲーションボタンやパジネーションバーを追加すると、訪問者がコレクション内のアイテムを簡単に移動することができるようになります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/10/27/719884be-ffcd-4f11-997a-68e6ae65af8f/c93177c1-08be-409e-a9c4-7defafe34940.png)
ステップ 6 |(オプション)訪問者がコンテンツをフィルターにかけられるようにする
データセットにフィルターを追加すると、訪問者は指定された条件に一致するコンテンツのみを表示することができます。フィルターに使用する入力要素は、「ラジオボタン」、「チェックボックス」、「ドロップダウン」、「セレクトタグ」、または「スライダー」(レンジスライダーのみ)から選択することができます。各入力要素には、フィルターできるフィールドタイプに制限があるためご注意ください。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/10/27/6e9e5de6-5a99-4cb6-bb06-9a9d21d55faf/c743f40b-39b8-4029-af67-0ae3fe5cf28a.png)
次のステップ:
CMS のコレクションには、サイト訪問者が入力要素を使用して送信した情報を保存することもできます。入力要素を使用してカスタムフォームを設定する方法はこちら
お役に立ちましたか?
|