CMS:データセットを追加・設定する
読了時間:15分
データセットは、ページ上の要素と CMS コレクション内のコンテンツを双方向接続するもので、これによりページにコレクションのコンテンツを表示させたり、逆にユーザー入力値をキャプチャしてコレクションにその情報を格納したりできるようになっています。表示するアイテム・順番、および一度に読み込めるアイテムの数は、データセット設定から制御することができます。
この記事では、まずデータセットを追加・設定し、次にページ要素をデータセットに接続する方法について説明します。または、サポートされている要素を CMS コレクションに接続する際にデータセットを作成することもできます。
始める前に:
まだ追加していない場合は、サイトに CMS を追加してください。
ステップ 1 | データセットを追加する
エディタで、CMS コレクションに接続したい要素があるページに移動し、データセットを追加します。データセットを使用して、訪問者がサイト上で入力したデータを収集したい場合は、フォームデータセットを選択します。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスし、該当するページに移動します。
- 左側の「CMS」
をクリックします。
- 「コンテンツ要素を追加」をクリックします。
- 追加したいデータセットタイプをクリックします:
- データセット:空のデータセットを追加してページ要素を接続し、コレクションのコンテンツを表示できるようにします。
- フォームデータセット:サイト訪問者からのフォーム送信を受け付けるように設定されたデータセットを追加します。
![エディタでデータセットを追加しているスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/06/12/d3d18ac2-4eaf-4ed6-a0d5-28ef4c2fbb4b/1689b623-9ab1-4630-9d66-4f8c780d9482.png)
ステップ 2 | データセットをコレクションに接続する
データセットに接続するコレクションを選択します。このコレクションを使用して、ページ要素にコンテンツを表示させたり、逆にユーザー入力をキャプチャしたりすることができます。
Wix エディタ
Wix Studio エディタ
- 「コレクションを選択」ドロップダウンをクリックし、接続したいコレクションを選択します。ヒント:「コレクションを作成」を選択して新しいコレクションを作成します。
- (オプション)「データセット名」をクリックし、データセットの名前を編集します。
- 「作成」をクリックします。
![Wix エディタでデータセットを作成しているスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/29/6bc10ab1-bc5a-48e2-a0c7-d2d18ec98efb/31b965e9-4750-41f0-abff-41ab04b6147c.png)
ステップ 3 | データセット設定を編集する
データセット設定を使用して、接続されたコレクションのコンテンツが、接続されたページ要素とどのように相互作用するかを微調整します。まず、ライブサイトのコンテンツを表示または変更できるユーザーを制御するために、権限を設定します。データセットモードを選択して、読み取り、書き込み、または両方の権限を設定することができます。読み込みごとのアイテム最大数は、最適な読み込みのパフォーマンスに合わせて編集可能です。また、フィルターと並び替えを追加して、表示するアイテムとそれらの順序を管理することもできます。
Wix エディタ
Wix Studio エディタ
- (オプション)「権限:」横の権限タイプをクリックし、ライブサイトからコレクションのコンテンツを表示、追加、更新、または削除できるユーザーを指定します。
- (オプション)データセット名を編集する必要がある場合は、「データセット名」をクリックします。
- (Velo のみ)「データセット ID」をクリックして、ページのコードでデータセットを識別するために使用する ID を編集します。
- 「データセットモード」ドロップダウンをクリックし、該当するオプションを選択します:
- 読み取り:ページ上の要素は、コレクションからコンテンツを読み取って表示することができます。サイト訪問者は、コレクション内のコンテンツに変更を加えることはできません。
- 書き込み:ページ上の要素に、コレクションのコンテンツを表示することはできません。サイト訪問者は、ユーザー入力要素と送信ボタンを使用して、コレクションにコンテンツを追加することはできますが、コレクション内のコンテンツを編集することはできません。
- 読み取り・書き込み:ページ上の要素は、コレクションからコンテンツを読み取って表示することができます。また、サイト訪問者は、ユーザー入力要素と送信ボタンを使用して、コレクションのコンテンツを追加または編集することができます。
- 「読み込みごとのアイテム数」フィールドを編集して、一度に読み込むことができるアイテムの最大数を設定します。
![データセット設定のスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/11/08/9ee01658-18e9-4201-bca8-fabe418a8d98/b60f28c8-6c87-4f24-9e31-d25258779585.png)
- (Velo のみ)「パフォーマンス」下で該当するチェックボックスを選択します:
- ページ読み込みの後にデータを取得:データセットのデータは、ページの残りの部分の読み込みが完了した後に取得されます。これにより、ページの最初のレンダリングが、データセットによって邪魔されなくなり、ページの読み込み速度が向上します。データセットに接続されている要素が、ページをスクロールした場所やセクションを開いた場所にある場合は、こちらのオプションをおすすめします。
- カーソルを使ってページを取得:データセットは、カーソルページングを使用して、最初のデータと後続のデータを取得します。これにより、次のページと前のページにのみ移動できるようになる代わりに、データの読み込み速度が向上します。このオプションを選択した場合、パジネーションバーや「次のページ / 前のページ」のデータセットアクションを使用してページに移動することはできなくなります。
- (オプション)「+フィルターを追加」をクリックして、データセットフィルターを追加します。データセットに接続されている要素に特定のアイテムを含めるか、表示から特定のアイテムを除外します。
- (オプション)「+新しい並び替えを追加」をクリックして、データセットの並び替えを追加し、アイテムの表示順序を制御します。
ヒント:または、「サイトでミラーリング」を有効にすることで、コレクションビューに表示されるのと同じ順序でアイテムを表示することもできます。「サイトでミラーリング」を有効にしている場合は、データセットに並び替えを追加して、コレクションで使用している順序を上書きすることができます。
![データセットに並び替えを追加している様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/14/05db90df-2b78-4cd4-a611-c0f8fb99af3d/9b8553c8-4637-4835-9417-3d9ebfd9543f.png)
- (オプション)「高度な設定」下の「すべてのページに表示する」トグルを有効にして、このデータセットをすべてのサイトページに使用します。これにより、ヘッダーまたはフッターにある要素を、CMS コレクションに接続することができるようになります。
注意:多くのデータセットでこの設定を有効にすると、サイト読み込み時のパフォーマンスが低下する可能性があります。
ステップ 4 | ページ要素をデータセットに接続する
最後に、ページ要素をデータセットに接続して、コンテンツの読み取りまたは書き込みができるようにします。接続設定には、接続する要素に応じて異なるオプションが表示されます。たとえば、画像やボタンを接続する場合は、接続設定に「クリック時の動作を選択」というオプションが表示され、訪問者がクリックした際の動作を「もっと見る」、「送信」、「次のアイテム」などから選択することができます。
Wix エディタ
Wix Studio エディタ
- エディタで、データセットに接続したい要素を選択します。
- 「CMS に接続」アイコン
をクリックします。
- 「データセットを選択」ドロップダウンをクリックし、接続するデータセットを選択します。
- 「接続」下で該当するドロップダウンをクリックし、要素の各部分に接続するコレクションのフィールドまたはデータセットアクションを選択します。表示されるオプションは、接続する要素の種類によって異なります。
![画像のデータセット接続オプションのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/14/b9f180d5-3f51-4b4d-a059-7b2bd1316dd7/c7ffca7a-85e7-48d8-a336-07d32b93a42f.png)
- 「プレビュー」をクリックして、CMS 接続をテストします。
- 変更内容を公開する準備ができたら、「公開」をクリックします。
よくある質問
データセットの設定の詳細については、以下の質問をクリックしてください。
リピーターやギャラリーに表示するコンテンツの量はどのように制御すればよいですか?
1つのデータセットを使用して、異なるコレクションのコンテンツを表示させることはできますか?
テキスト要素を接続して、コレクション内のアイテム総数を表示することはできますか?
コレクションのアイテムがライブサイトに表示される順序を制御することはできますか?
ボタンや画像をアイテムの動的アイテムページにリンクするにはどうすればよいですか?
「もっと見る」ボタンを作成するにはどうすればよいですか?
プロギャラリーの「もっと見る」ボタンに、データセットの設定が反映されないのはなぜですか?
「前へ」と「次へ」ボタンを追加して、訪問者が順番にアイテムを閲覧できるようにすることはできますか?
リピーターやギャラリーにパジネーションバーを追加することはできますか?