Wix Studio Two エディタ：データソースについて

データソースを使用すると、サイト内のあらゆる場所にそのソースのコンテンツを表示することができます。データソースには、CMS コレクション、Wix アプリ（例：Wix ブログなど）、またはカスタムコードなどを使用することができます。記事のタイトルや商品の画像など、各要素に表示する内容は自由に設定することが可能です。

ボタンのテキストやリンクなど、要素の各部分に接続するフィールドを選択します。たとえば、ボタンに記事のタイトルを表示し、そのボタンを記事ページにリンクさせるといった設定が可能です。選択した要素には適したフィールドのみが表示されるため、テキスト要素に対して画像要素のフィールドなどが表示されることはありません。

ページまたはコンテナにデータソースを接続すると、その中にあるすべての要素でコンテンツが利用できるようになります。要素を接続する前に、この作業を事前に行う必要はありません。データソースを選択すると、エディタが自動的に以下のいずれかに接続してくれます：

• ページ：ほとんどの要素が対象となります。
• 要素自体：リピーターなど、データソースを保存できる要素が対象となります。
• マスターセクション：ヘッダーなど、マスターセクション内にある要素が対象となります。

デザイン作業中は、接続された要素にはデータソースから実際のコンテンツが表示されます。表示できるアイテムがない場合は、代わりにプレースホルダのデータ（例：「記事タイトル」など）が表示されるため、要素のデザイン作業をそのまま進めることができます。

1. エディタに移動します。
2. 接続したい要素を選択します。
3. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
4. （まだ開いていない場合）「設定」タブをクリックします。
5. 該当するプロパティ（例：「テキスト」、「リンク」、「代替テキスト」など）横の「データに接続」アイコン をクリックします。
6. 「ソースを選択」をクリックし、コンテンツを保存するソースを選択します。
7. 「フィールドを選択」をクリックし、要素に表示させたいフィールドを選択します。
8. （必要な場合）フィールドの下に表示されるパラーメータに入力します（例：「ページリンクパラメータ」など）。
9. 「適用」をクリックします。

表示したいコンテンツが保存されているソースを選択します。「ソースを接続」リストには、以下の種類のソースが含まれています：

• CMS コレクション：CMS（コンテンツ管理システム）で作成したコレクション。
• Wix アプリ：Wix ストアや Wix ブログなどのアプリの場合は、アプリ名の下に独自のソースが追加されます。たとえば、Wix ブログの場合なら、「記事（1つの記事）」、「記事（記事一覧） 、および「関連記事」が追加されます。
• カスタムコード：コードを使用して構築するソース。必要な内容を入力して AI で生成するか、自身でコードを記述します。

同じリストから新しいソースを作成したり、AI を活用してソースを設定したりすることもできます。異なる場所からコンテンツを取得する必要がある場合は、ページやセクションに複数のソースを追加できます。たとえば、CMS コレクションのポートフォリオと最新のブログ記事を、同じページに表示させることが可能です。

コンテンツが保存されているコンテナ（ページ、セクション、コンテナ、リピーター、ヘッダー、フッターなど）に、ソースを接続します。これにより、そのコンテナ内のすべての要素でそのソースが利用できるようになり、要素ごとに個別に設定を行う必要がなくなります。

要素設定パネル の「設定」タブで、コンテナが使用できるソースを確認します：

• 利用可能なソース：セクションやページなど、上位のコンテナに接続されているソース。このリストは、表示するソースがある場合のみ表示されます。
• 接続済みソース：直接このコンテナに接続されているソース。

ページに接続したソースは、そのページ内のすべてのセクションやコンテナから利用することができます。ヘッダーやフッターはページの一部ではないため、ページに接続したソースが引き継がれることはありません。ヘッダーやフッターには、それぞれ直接ソースを接続してください。

コンテナのソースを、そのコンテナの外にある要素に対して使用することはできません。たとえば、「もっと見る」ボタンをリピーターのリストに接続したい場合は、その両方を含むセクションにソースを接続してください。そして、リピーターとボタンの両方を、そのセクションのソースに接続してください。

キャンバス上のピンク色のラベルを確認すると、データに接続されている要素を識別することができます。データソースが接続されているコンテナのラベルには、そのデータソース名が表示されます。静的な要素には、青色のラベルが表示されます。

1. エディタに移動します。

2. 該当するページ、セクション、またはコンテナを選択します。

3. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。

4. （まだ開いていない場合）「設定」タブをクリックします。

5. 「データソース」下の「＋ソースを接続」をクリックします。

6. 使用するソースを選択します：

   • CMS コレクション：コレクションのいずれかを選択します。まだ作成していない場合は、「新規作成」をクリックします。

   • カスタムコード：カスタムコードのソースのいずれかを選択します。まだ作成していない場合は、「新規作成」をクリックします。

   • Wix アプリ：アプリのリストからソースを選択します（例：「Wix ブログ」下の「記事」など）。

ソースの設定を変更したり、コンテンツに移動したり、コンテナから削除したりします。コンテナに接続されているソースは、要素設定パネル内にある「設定」タブの「接続済みソース」下で確認できます。

1. エディタに移動します。
2. ソースを含むページ、セクション、またはコンテナを選択します。
3. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
4. （まだ開いていない場合）「設定」タブをクリックします。
5. 「接続済みソース」下でソース横にある「その他のアクション」アイコン  をクリックします。
6. 実行する内容を選択します：
   • データ設定：フィルター、並び替え、一度に表示できるアイテム数など、ソースの設定を変更します。これらの設定は、このソースに接続されているすべての要素に適用されます。このオプションは、設定項目のあるソースにのみ表示されます。
   • データを管理：CMS コレクションやアプリのダッシュボード（例：ブログ記事）、ソースのコードなど、ソースのコンテンツを管理する場所に移動します。
   • 削除：このコンテナからソースの接続を解除します。接続された要素はページに残りますが、コンテンツは表示されなくなります。

リピーターを使用すると、ブログ記事やポートフォリオのプロジェクトといったアイテムのリストを、統一されたデザインで表示することができます。リピーターをデータソースに接続し、1つのアイテムをデザインすると、すべてのコンテンツのアイテムがそのデザインに基づいて表示されます。

リピーターを追加・設定する方法はこちら

コレクションページを追加し、「アイテムページ」を選択すると、同じデザインで一度に 1つのアイテムを表示することができます。ページの要素は、すでにコレクションに接続されています。デザインをしている間は、キャンバス上部にあるプレビューツールバーを使用して、各アイテムが含まれるページをプレビューすることができます。

コレクションのすべてのアイテムを一覧表示するリピーターを含むページを追加することもできます。アイテムページを追加・設定する方法はこちら

Wix アプリから要素を追加すると、そのアプリのデータがすでに反映された状態で始めることができます。これらの要素は、「要素を追加」パネル内のアプリ名（例：Wix ブッキングなど）の下で見つけることができます。たとえば、Wix ブログのフィードや記事一覧を追加すると、サイト上の記事がすぐに表示されます。また、Wix ブッキングのサービスリストを追加すると、それらのサービスがすぐに表示されます。新しいコレクションページ上の要素も、追加した時点でデータが接続された状態になります。リピーター内の要素も、同様にリピーターを接続するとすぐにデータが反映されます。

これらの要素のデザインやレイアウトは、アクションバーまたはキャンバス上からカスタマイズすることができます。

表示するコンテンツや場所を細かく制御したい場合は、テキストや画像などの一般的な要素を追加して、手動でそれらを接続してください。Wix Studio Two エディタの商品ページの設定に関する詳細はこちら

コンテンツ内の「True」または「False」に基づいて、要素を非表示にする条件を設定することができます。「Hide if（～の場合は非表示）」で「True」または「False」を選択すると、どのタイミングで要素を非表示にするかを指定することができます。これにより、たとえば販売中の絵画から、「販売済み」のラベルを非表示にすることができます。この「条件付き表示」の機能は、要素設定パネルの「設定」タブにある「高度」セクションから利用することができます。

• 利用可能なフィールド：「True」または「False」の値を計算するフィールドを含む、「True」と「False」フィールドのみ。
• 条件を追加することができない場所：ページ上、またはマスターセクション自体（例：ヘッダーやフッターなど）。ただし、それらの内部にある要素には条件を追加することができます。
• キャンバス上で非表示の要素：エディタで要素が非表示になると判断された場合（例：コレクションページやリピーター内など）は、その要素にストライプの模様が表示されます。この模様は、要素を選択すると消えます。

イベントハンドラを使用すると、訪問者が要素を操作した際に、ソースから特定の関数を実行させることがきます。イベントハンドラには、「クリック時」、「ダブルクリック時」、「マウスイン時」、「マウスアウト時」、「フォーカス時」、「フォーカス解除時」のオプションがあります。

1. エディタに移動します。
2. 要素を選択します。
3. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
4. （まだ開いていない場合）「設定」タブをクリックします。
5. 「高度」下の「イベントハンドラ」までスクロールダウンします。
6. 該当するイベント下（例：クリック時）で「関数を選択」をクリックします。
7. 「ソースを選択」をクリックし、ソースを選択します。
8. 「フィールドを選択」をクリックし、実行させたい関数を選択します。
9. （必要な場合）関数下に表示されるパラメータを入力します。
10. 「適用」をクリックします。

Wix Studio Two エディタのデータソースに関する詳細については、以下の質問をクリックしてください。