CMS：標準ページにコレクションコンテンツを表示する
読了時間：6分
このチュートリアルでは、コレクションのコンテンツを表示するカスタムページを作成する方法を学びます。ページ要素を配置し、コレクションを作成し、データセットを使用してこれらの要素に接続します。最後に、プレビューモードでページをテストし、サイトを公開して、訪問者がデータを確認できるようにします。
注意：
このチュートリアルでは、コレクションのコンテンツを表示する静的ページを作成します。コレクション内の各アイテムのページを自動的に作成する動的アイテムページを設定することも可能です。
ステップ 1 | コレクションを作成する
コレクションを作成する方法：
- サイトダッシュボードの「CMS」にアクセスします。
- 「コレクションを作成」をクリックします。
- コレクション名を入力します。
- コレクションに追加するアイテム数を選択します：
- 単独アイテム：コレクションには、テキスト、画像、動画、URL など、項目を多数含む単一のアイテムを含めることができます。このタイプは、「基本情報」ページなどの繰り返さないコンテンツに最適です。
- 複数アイテム（デフォルト）：複数のアイテムを含むコレクションは、より多くのコンテンツを格納し、リピーターやテーブルなどの要素に表示することができます。このタイプは、物件一覧や、ポートフォリオ、レシピなどに最適です。単独アイテムと複数アイテムのコレクションの違いについてはこちら
- 「次へ」をクリックします。
ステップ 2 | コレクションを設定する
訪問者に表示する情報ごとにフィールドを追加し、内容を入力します。
コレクションを設定する方法：
- サイトダッシュボードの「CMS」にアクセスします。
- 該当するコレクションをクリックします。
- 「フィールドを管理」をクリックし、「＋フィールドを追加」をクリックして、コレクションにフィールドを追加します。
- 訪問者に表示する情報に合わせてフィールドを設定します。フィールドの内容に一致する正しいフィールドタイプを選択してください。
- 計画中の各ページ要素のフィールドを定義します。
- コレクションにコンテンツを追加します。
ステップ 3 | ページをデザインする
ページには、表示したい情報を訪問者が確認できる要素を含める必要があります。
始めるには：
- 「パーツを追加」メニューに移動し、コレクションのフィールドタイプと一致する要素タイプを含むグループを選択します。
- ページに要素ドラッグして、ページをデザイン、レイアウトします。テキストや画像などの要素から選択できます。
ステップ 4 | 要素を設定する
ページ要素を追加したら、設定パネルで各要素の外観を設定できます。
要素を設定する方法：
- ページ要素を選択し、「設定」アイコンをクリックし、オプションを使用して設定します。
- ページ上の各要素でこれを繰り返します。
次に、要素をコレクションに接続する必要があります。これを行うにはデータセットを使用しますが、これについては、次のいくつかのステップで説明します。
ステップ 5 | データセットを追加して構成する
データセットは、要素をコレクションに接続します。データセットを追加する際には、接続するコレクションや、訪問者がコレクションを読み書きできるようにするかどうかなどを指定する必要があります。
ページにデータセットを追加する方法：
- エディタで CMS にアクセスします：
- Wix エディタ：エディタ左側で「CMS」
をクリックします。 - Editor X：Editor X 上部の「CMS」
をクリックします。
- Wix エディタ：エディタ左側で「CMS」
- 「コンテンツ要素を追加」をクリックします。
- 「データセット」をクリックします。ページにデータセットが追加されます。
- データセットを選択して「設定」をクリックします。「データセット設定 」パネルが開きます。
- 「コレクションを接続」下で、コレクションを選択します。
- 「モード」に「読み取り専用」を選択します。
- 必要に応じて、データセットにフィルターと並び替えを設定できます。
- パネルを閉じます。
ステップ 6 | ページ要素を接続する
データセットを設定したら、要素を接続できます。ページ内の各要素に移動し、同じデータセットに接続する必要があります。要素を接続するたびに、その値を接続するコレクション内のフィールドも定義します。一部の要素には、異なるフィールドに接続できる複数のプロパティが含まれています。
要素を接続する方法：
- 要素を選択し、「データに接続」ボタン
をクリックします。 - 情報が保存されているコレクション内の「フィールド」を選択します。
- ページ上の各要素でこれを繰り返します。
次のステップでは、データセット内の要素を閲覧するための「前へ」ボタンと「次へ」ボタンを作成します。
ステップ 7 |「前へ」ボタンと「次へ」ボタンを作成する
ここまでのステップで、すべての要素が同じデータセットを介して同じコレクションに接続されました。次に、訪問者が情報を閲覧できるようにする必要があります。これを行うには、ページに 2つのボタンを追加し、それらを他の要素と同じデータセットに接続して、クリック時の動作を定義します。
「前へ」ボタンと「次へ」ボタンを作成する方法：
- ページに 2つのボタンを追加し、テキストを「前へ」と「次へ」に変更します。
- 「データに接続」ボタン
をクリックします。 - 「ボタンを接続」パネルで、「データセット」を選択します。
- 「クリック時の動作を選択」下で、最初のボタンに「前のアイテム」を選択し、2番目のボタンに「次のアイテム」を選択します。
ステップ 8 | ページをテストする
プレビューモードでページをテストしてみましょう。表示されるコンテンツはサンドボックスデータベースからのもので、プレビューモードでのみ表示されます。サンドボックスについての詳細はこちら
ページをテストする方法：
- 「プレビュー」をクリックします。
- 「次へ」ボタンと「前へ」ボタンをクリックします。
- 「エディタに戻る」をクリックします。
ステップ 9 | サイトを公開する
注意：
この手順は、サンドボックスを有効にしている場合にのみ適用されます。サンドボックスについての詳細はこちら
訪問者がコンテンツを閲覧できるように、サイトを公開しましょう。
サイトを公開すると、サンドボックスコレクションのすべてのフィールドを含む空のバージョンのコレクションが作成されます。公開済みのサイトで訪問者に表示されるコンテンツはライブコレクションに保存され、コンテンツマネージャーからアクセスできます。
サイトを公開してライブコレクションを作成したら、ライブコレクションにデータを手動で追加するか、サンドボックスコレクションのコンテンツを同期することができます。
ライブコレクションを設定する方法：
- エディタで「公開」をクリックしてサイトを公開します。
- エディタで CMS にアクセスします：
- Wix エディタ：エディタ左側で「CMS」 をクリックします。
- Editor X：Editor X 上部の「CMS」 をクリックします。
- Wix エディタ：エディタ左側で「CMS」
- 「コレクション」をクリックします。
- 必要なコレクションを選択します。
- ライブコレクションを追加する方法を選択します：
- ライブコレクションに手動でデータを追加する方法：
- 「ライブコレクション」をクリックし、コンテンツを入力します。
- サンドボックスコレクションのコンテンツを同期する方法：
- 「サンドボックスコレクション」をクリックします。
- 「コンテンツを同期」をクリックします。
- 希望の同期オプションを選択します。
- 「同期」をクリックします。
- もう一度「同期」をクリックして確定します。
- ライブコレクションに手動でデータを追加する方法：
ステップ 10 | ライブコンテンツを表示する
サイトを公開すると、訪問者はコンテンツを利用できるようになります。ページにアクセスすると、ライブコレクションのコンテンツが表示されます。
次のステップ
ページにより多くの機能を追加することができます。
- ユーザー入力をキャプチャするためのフォームを作成します。
- データセットフィルターおよび / または参照フィールドを使用して、複数のコレクションからの情報を表示します。
- Velo を使用したコードでページの機能を強化します。
- CSV ファイルからコレクションにデータをインポートします。
- Velo を使用したデータセットフックとコレクションフックでカスタマイズを追加します。
- Velo API を使用してインタラクティブ機能を追加します。
- Velo を使用した Web モジュールやデータセットフックで、Web API 対応のサードパーティにデータを投稿します。
お役に立ちましたか？
|