CMS:ライブサイトからコレクションコンテンツを管理する

読了時間:21分
入力要素を含むカスタムフォームを作成して、訪問者がライブサイトから直接コレクションのコンテンツを表示、追加、更新、または削除できるようにします。これにより、訪問者はバックエンドにアクセスすることなく、サイトのコンテンツを常に最新の状態に保つことができます。

たとえば、不動産サイトを管理している場合なら、他のスタッフがライブサイトから直接物件のデータをコレクションに送信したり、コレクションの物件データを編集したりすることができます。これにより、物件情報の更新作業を効率化するとともに、コンテンツを常に最新で正確な状態に保つことができます。

まず、訪問者からコンテンツを収集できるよう、入力要素を含むカスタムフォームを作成します。そして、入力要素をコレクションに接続し、訪問者がデータの送信や削除などが行えるよう、インタラクティブボタンを設定します。必要な場合は、訪問者が効率的に作業できるよう、テーブルやフィルターを追加します。
Wix Studio エディタを使用している場合:
訪問者がエントリを追加、削除、または更新できるフォームのスクリーンショット。
始める前に:

ステップ 1 | 入力要素のあるフォームを作成する

サイトに入力要素を追加して、サイト固有のニーズに合わせたカスタムフォームを作成します。フォームを構成する要素は、訪問者からのテキストやファイルアップロードなどのコンテンツを受け入れます。コレクションはフォーム経由で送信されたすべてのコンテンツを保存します。入力要素でフォームを作成する方法はこちら
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. カスタムフォームを作成したいページまたはセクションに移動します。
  3. エディタ左側で「パーツを追加 をクリックします。
  4. 入力欄」をクリックします。
  5. 追加したい入力要素の種類をクリックします。
  6. 該当する入力要素をクリックしてページにドラッグします。
Wix エディタで入力要素を追加しているスクリーンショット。
  1. 追加した入力要素をクリックし、「設定」を選択します。
  2. 設定を完了します。オプションは、選択した入力要素によって異なります。
  3. (オプション)「レイアウト と「デザイン アイコンをクリックしてレイアウトやデザインを変更します。
  4. 上記の手順 3〜9 を繰り返して、フォームに必要な数の入力要素を追加します。

ステップ 2 | 入力要素をコレクションに接続する

入力要素を、訪問者がライブサイトから管理できるようにしたいコレクションにバインドするデータセットに接続します。次に、データセットモードを選択し、データセットがコレクションからコンテンツを読み取ることができるか、コレクションにコンテンツを書き込むことができるか、またはその両方ができるかを設定します。そして、コレクションのコンテンツを表示、追加、更新、または削除できるユーザーをコレクションの権限で設定します。
Wix エディタ
Wix Studio エディタ
  1. エディタで追加した入力要素をクリックします。
  2. CMS に接続」アイコン  をクリックします。
  3. 入力要素を、ライブサイトから管理したいコレクションにバインドするデータセットに接続します:
    1. (必要な場合)右側のパネルで「コンテンツを収集」を選択します。
      ヒント:ページにまだデータセットを追加していない場合は、先にデータセットを追加(次の手順を参照)してから「コンテンツを収集」を選択してください。
    2. データセットを選択」ドロップダウンをクリックし、ライブサイトから管理したいコレクションにバインドするデータセットを選択します。
      注意:ページにまだデータセットがない場合は、「データセットを追加」をクリックして追加します。
    3. Value を接続」ドロップダウンをクリックし、入力内容を送信するフィールドを選択します。フィールドタイプによって、フィールドに格納できるデータの種類が決まります。
      ヒント:コレクションに新しいフィールドを追加して接続するには、「新しいフィールドを追加」を選択し、フィールド名とフィールドタイプを設定して「追加」をクリックします。
  4. データセットモードとコレクションの権限を設定します:
    1. データセット設定」をクリックします。
    2. データセットモード」ドロップダウンをクリックし、オプションを選択します:
      • 書き込み:データセットはコレクションのコンテンツに変更を加えることはできますが、コンテンツを読み取って、それを接続されている要素に表示することはできません。
      • 読み取り・書き込み:データセットはコレクションのコンテンツに変更を加えたり、コンテンツを読み取って、それを接続されている要素に表示することができます。
    3. 権限:」横の権限タイプをクリックし、コレクションの権限を編集します。
    4. カスタム」を選択します。
    5. 各役割横の該当するチェックボックスをクリックし、役割を持つユーザーがライブサイトからコレクションのコンテンツを表示、追加、更新、または削除できるかどうかを選択します:
      • 管理者:サイト所有者と共同管理者は、常にライブサイトからコレクションのコンテンツを表示、追加、更新、削除できる権限を持ちます。この管理者の役割に関連付けられている権限を変更することはできません。
      • アイテムの作成者:この役割の権限は、メンバー自身が作成した特定のアイテムにのみ適用されます。たとえば、アイテムの作成者は、自身が作成したコレクションのアイテムのみを表示、追加、更新、または削除することができます。
      • メンバー限定:この役割は、サイト会員にのみ適用されます。この役割の権限を選択すると、「アイテムの作成者」の役割の権限も選択されます。
      • すべての訪問者:この役割は、ライブサイトにアクセスできるすべての訪問者に適用されます。この役割の権限を選択すると、「メンバー限定」と「アイテムの作成者」の役割の権限も選択されます。
    6. 保存する」をクリックします。
カスタムコレクションの権限を設定しているスクリーンショット。
  1. データセット設定パネル上部の「XXX 要素に戻る」(追加した入力要素によって表示は異なります)をクリックし、入力要素の接続設定に戻ります。
  2. (ドロップダウン要素とセレクトタグ要素のみ)入力要素に表示される選択肢を管理する方法を選択します:
    1. コレクションのオプションを表示」トグルをクリックし、入力要素の選択肢を管理する場所を選択します:
      • 有効:選択肢に別の CMS コレクションのフィールドを使用します。該当するデータセットを接続し、「ラベルと値を接続」ドロップダウンから使用するフィールドを選択します。
      • 無効:入力要素の「選択肢を管理」をクリックし、訪問者が選択できるオプションを設定します。ドロップダウン入力要素、およびセレクトタグ入力要素を接続する方法については、それぞれのリンク先をご覧ください。
    2. (有効にした場合)選択肢を表示するためのコレクションに対し、データセットモードとコレクションの権限を設定します:
      1. 「リストオプションを表示」セクションの「データセット」下で、「データセット設定」をクリックします。
      2. データセットモード」ドロップダウンをクリックし、オプションを選択します:
      • 読み取り:データセットはコレクションのコンテンツを読み取って、それを接続されている要素に表示することができます。
      • 読み取り・書き込み:データセットはコレクションのコンテンツに変更を加えたり、コンテンツを読み取って、それを接続されている要素に表示することができます。
    3. 権限:」横の権限タイプをクリックし、コレクションの権限を編集します。
    4. 該当するユーザーがコレクションのコンテンツを表示、追加、更新、または削除できるよう、権限を選択して「保存する」をクリックします。コレクションの権限を設定する方法はこちら
ドロップダウン要素とセレクトタグ要素にのみ表示される「リストオプションを表示」セクションのスクリーンショット。
  1. カスタムフォームの入力要素ごとに、これらの手順を繰り返します。

ステップ 3 | インタラクティブボタンを追加・設定する

訪問者が入力要素で入力または選択したデータをコレクションに送信できるようにするには、「送信」ボタンを追加・設定する必要があります。入力要素の近くにボタンを追加し、入力要素に接続されているものと同じデータセットに接続して、クリック時の動作で「送信」を選択します。

クリック時の動作では、新しいアイテムを作成したり、選択したオプションを元に戻したり、アイテムを削除するための動作も選択できるため、訪問者が必要な操作を実行できるボタンを作成することができます。また、クリック時の動作で「次のアイテム」や「前のアイテム」を選択すると、訪問者が表示されているアイテムを順番に切り替えることができるボタンも作成することができます。ボタンや画像に割り当てることができるクリック時の動作についてはこちら
Wix エディタ
Wix Studio エディタ
  1. エディタ左側で「パーツを追加 をクリックします。
  2. ボタン」をクリックします。
  3. 送信ボタンとして使用するボタンを、「おすすめボタン」、「テキスト・アイコンボタン」、「アイコンボタン」、または「画像ボタン」から選択し、クリックしてページにドラッグします。
    ヒント:画像を追加して送信ボタンとして使用することもできます。
送信ボタンとして使用するボタンを追加しているスクリーンショット。
  1. テキスト・アイコンの変更」をクリックし、ボタンに表示するテキスト(例:「送信」など)を入力します。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを選択」ドロップダウンをクリックし、回答コレクションに接続されているデータセットを選択します。
  4. クリック時の動作を選択」ドロップダウンをクリックし、「送信」を選択します。
  5. (オプション)送信が成功または失敗したときに表示される成功メッセージと失敗メッセージを追加します:
    1. +完了メッセージを追加」、「+失敗メッセージを追加」の順にクリックします。
    2. 両方のメッセージをクリックして、表示したい場所にドラッグします。メッセージは同時に表示されないため、重複した内容でも構いません。
    3. 各メッセージの「テキストを編集」をクリックして、メッセージを編集します。
  6. ボタンを選択し、「CMS に接続」アイコン  をクリックします。次に、「完了時の移動先」ドロップダウンをクリックし、オプションを選択します:
    • キャンセル:訪問者はフォームを送信した後も同じページにとどまります。
    • リンク:訪問者は、フォームを送信した後に別のページにリダイレクトされます。「リンクを選択」下で「選択」をクリックし、リンクを設定します。
送信ボタンを追加しているスクリーンショット。
  1. ボタンをクリックし、「デザイン」アイコン  を選択して送信ボタンの外観をカスタマイズします。
  2. インタラクティブなボタンまたはナビゲーションボタンを追加します:
    1. 上記の手順 1〜3 を繰り返し、さらにボタンを追加します。
    2. 該当するボタンを選択し、「CMS に接続」アイコン  をクリックします。
    3. データセットを選択」ドロップダウンをクリックし、訪問者が編集できるようにしたいコレクションにバインドするデータセットを選択します。
    4. クリック時の動作を選択」ドロップダウンをクリックし、ボタンがクリックされた際の動作を選択します(例:「新規」、「元に戻す」、「削除」など)。利用可能なクリック時の動作についてはこちら
    5. 必要なインタラクティブボタンごとに、これらの手順を繰り返します。
    6. 各ボタンのデザイン、レイアウト、設定をカスタマイズします。
ボタンをクリックした際の動作を「削除」に設定しているスクリーンショット。

ステップ 4 |(オプション)訪問者が特定のアイテムを選択・編集できるテーブルを追加する

訪問者が、ライブサイトからコレクションのコンテンツを選択・編集できるテーブルを追加します。訪問者はテーブル内をクリックして編集するアイテムを選択し、入力要素とインタラクティブボタンを使用してコンテンツを追加または更新することができます。

または、テキストや画像を追加し、それらを入力要素に接続されているものと同じデータセットに接続することもできます。訪問者がナビゲーションボタンをクリックしてアイテムを切り替えると、接続されているテキストや画像が動的に調整され、訪問者が編集しているコンテンツが表示されるようになります。
更新または削除するコレクションアイテムを選択するためのテーブルを含むフォームのスクリーンショット。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタ左側で「要素を追加 をクリックします。
  3. リスト」をクリックします。
  4. テーブル」をクリックします。
  5. 使用したいテーブルをクリックして、ページにドラッグします。
Wix エディタでテーブルを追加しているスクリーンショット。
  1. CMS に接続」アイコン  をクリックします。
  2. データセットを選択」ドロップダウンをクリックし、入力要素に接続されているものと同じデータセットを選択します。
  3. 接続」下の該当するドロップダウンをクリックして、各カラムに接続するコレクションフィールドを選択します。
  4. テーブルをカスタマイズします。
  5. 変更内容を公開する準備ができたら、サイトを公開します。

ステップ 5 |(オプション)フィルターを追加してサイト会員が作成したアイテムのみを表示する

すべての訪問者がコレクションのアイテムを表示できるように設定することもできますが、ログインしたサイト会員が、自身で作成したアイテムのみを表示・更新できるようにすることもできます。こうすることで、サイト会員がログインした際、自身のアイテムを表示・更新するために、他の会員が作成したアイテムをスクロールする必要がなくなります。

これを行うには、データセット設定でフィルターを追加し、「Owner(テキスト)」フィールドを選択して、ステータスを「ログイン済み」に設定する必要があります。また、コレクションに以下の「カスタム」権限も設定する必要があります:
  • 表示:すべての訪問者
  • 追加:メンバー限定
  • 更新:アイテムの作成者
  • 削除アイテムの作成者または管理者(アイテムを削除できるようにしたいユーザーによって異なります)
カスタムコレクションの権限のスクリーンショット。
重要:
通常のデータセットでは、データセット設定でフィルターを追加する際に「Owner(テキスト)」フィールドを選択することができますが、動的ページのデータセットではこのオプションを選択することはできません。動的ページでもこのオプションを使用したい場合は、ページに通常のデータセットを追加し、それを該当する要素に接続して、そのデータセットのフィルターで「Owner(テキスト)」フィールドを選択する必要があります。
Wix エディタ
Wix Studio エディタ
  1. エディタで該当するページにアクセスします
  2. 該当するデータセット設定に移動します:
    1. 左側の「CMS」  をクリックします。
    2. ページ接続を管理」をクリックします。
    3. 該当するデータセット横の「その他のアクション」アイコン をクリックし、「データセット設定」を選択します。
  3. フィルター」下の「+フィルターを追加」をクリックします。
  4. フィールド」ドロップダウンをクリックし、下部の「Owner(テキスト)」フィールドを選択します。
  5. 条件」ドロップダウンで「である」を選択し、「ステータス」が「ログイン済み」になっていることを確認して、「フィルターを追加」をクリックします。
データセット設定でフィルターを追加して、「Owner(テキスト)」フィールドを選択した様子を示したスクリーンショット。
  1. 必要に応じて、コレクションの権限を編集します:
    1. データセット設定で「権限:」横の権限タイプをクリックします。
    2. カスタム」選択します。
    3. 各役割横の該当するチェックボックスをクリックし、役割を持つユーザーがライブサイトからコレクションのコンテンツを表示、追加、更新、または削除できるかどうかを選択します。
    4. 保存する」をクリックします。
  2. 変更内容を公開する準備ができたら、サイトを公開します。

お役に立ちましたか?

|