CMS:アップロードボタンを追加・設定する

読了時間:11分
アップロードボタンを追加・設定して、サイト訪問者が CMS(コンテンツ管理システム)コレクションに直接ファイルを送信できるようにします。

アップロードボタンをコレクションに接続する際は、ファイルが保存されるコレクションのフィールドとして、「画像」、「文書」、「動画」、「オーディオ」、「メディアギャラリー」、または「複数の文書」フィールドを選択することができます。

接続するフィールドによって、アップロードボタンを使用して送信できるファイルの種類が決まります。アップロードされたファイルは、コレクションとメディアマネージャーの「訪問者のアップロード」セクションに、新しいアイテムとして保存されます。
始める前に:
まだ追加していない場合は、サイトに CMS を追加してください。

ステップ 1 | アップロードボタン要素を追加する

エディタで該当するページに移動し、アップロードボタンを追加します。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. アップロードボタンを追加したいページに移動します。
  3. エディタ左側で「パーツを追加 をクリックします。
  4. 入力欄」をクリックします。
  5. 詳細設定」下の「アップロードボタン」をクリックします。
  6. 使用したいアップロードボタンをクリックして、ページにドラッグします。
Wix エディタで、アップロードボタンを追加する様子を示したスクリーンショット。

ステップ 2 | データセットを介して CMS に接続する

アップロードボタンを、送信内容を保存するコレクションのフィールドにバインドするデータセットに接続します。
Wix エディタ
Wix Studio エディタ
  1. エディタに追加したアップロードボタンをクリックします。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを選択」ドロップダウンをクリックし、送信内容を保存するコレクションにバインドする既存のデータセットを選択します。または、「データセットを追加」をクリックし、送信内容を保存するコレクションを選択します。
  4. コレクションに送信内容を保存するフィールドを追加します:
    ヒント:既存のコレクションのフィールドに接続することもできます。
    1. ファイルの接続先」ドロップダウンをクリックし、「新しいフィールドを追加」を選択します。
    2. 新しいコレクションフィールドの「フィールド名」を入力します。
    3. ドロップダウンからコレクションに追加する「フィールドタイプ」を選択します。フィールドタイプによって、フィールドに格納できるファイルの種類が決まります。
    4. 追加」をクリックします。 
「ファイルの接続先」で「新しいフィールドを追加」をクリックし、送信内容を保存する新しいフィールドを追加する様子を示したスクリーンショット。

ステップ 3 | データセットモードとコレクションの権限を設定します:

データセットは、アップロードボタンと CMS コレクション間の接続を制御します。アップロードボタンを使用してファイルをコレクションに追加できるよう、データセットモードを「書き込み」または「読み取り・書き込み」に設定します。必要に応じてコレクションの権限を調整し、ライブサイトからコレクションのコンテンツを操作できるユーザーを制御します。
Wix エディタ
Wix Studio エディタ
  1. 右側のパネルで、「データセット設定」をクリックします。
Wix エディタで、「データセット設定」をクリックする様子を示したスクリーンショット。
  1. (必要な場合)「権限:」横の権限タイプをクリックし、ライブサイトからコレクションのコンテンツを表示、追加、更新、または削除できるユーザーを指定します。
  2. データセットモード」ドロップダウンをクリックし、「書き込み」または「読み取り・書き込み」を選択します。
データセットモードを設定した様子を示したスクリーンショット。

ステップ 4 | アップロードボタンをカスタマイズする

アップロードボタンの設定を開き、アップロードできるファイルの種類と、一度にアップロードできるファイルの数を設定します。レイアウトとデザインの設定では、サイトに合わせてボタンの外観をカスタマイズすることができます。
Wix エディタ
Wix Studio エディタ
  1. エディタ内でアップロードボタンをクリックします。
  2. 設定」をクリックし、以下を編集します:
    • アップロード設定:アップロードできるファイル形式と最大ファイル数を選択し、ファイルのアップロードを必須にするかどうかを選択します:
      • 対応ファイル形式:ドロップダウンをクリックし、アップロードできるファイル形式を「画像・動画」、「画像」、「動画」、「文書」、「音楽」から選択します。
      • 最大ファイル数:スライダーをドラッグして、一度にアップロードできるファイル数を設定します。一度に複数のファイルをアップロードできるようにする場合は、ボタンがコレクションの「複数の文書」フィールド、または「メディアギャラリー」フィールドに接続されていることを確認してください(ステップ 2 を参照)。各コレクションアイテムに複数のファイルを格納できるのは、これらのフィールドタイプのみです。
        注意:現在、オーディオファイルは、一度に 1つのみアップロードすることができます。一度に複数のオーディオファイルをアップロードしたい場合は、こちらから機能リクエストに投票することができます。
      • 必須項目:チェックボックスを選択して、訪問者がカスタムフォームを送信する前に、ファイルをアップロードすることを必須にします。
    • 表示オプション:以下のオプションをカスタマイズします:
      • 項目タイトル:(推奨)ボタンテキストの上に表示されるタイトルを入力します。
      • ボタンのテキスト:ボタンに表示されるテキストを編集します。
      • ボタンの下のテキスト:ボタンの下に表示する内容を選択します:
        • ファイル情報のみ表示:訪問者がアップロードしたファイルの名前を表示します。
        • カスタムテキストのみを表示:ファイルサイズなど、ボタンの下に表示するカスタムテキストを入力します。ファイルがアップロードされると、このテキストはファイル名に変わります。
アップロードボタンの設定を行っているスクリーンショット。
  1. レイアウト」アイコン をクリックし、ボタンテキストの方向、配置、アイコンの位置を調整します。「詳細設定」をクリックすると、特定のテキストの配置と方向を調整することができます。
  2. デザイン」アイコン をクリックし、プリセットのボタンを選択します。「デザインをカスタマイズ」をクリックすると、ボタンのデザインをさらにカスタマイズすることができます。

ステップ 5 | 送信ボタンを作成する

訪問者がボタンを使用して、アップロードしたファイルをコレクションに送信できるようにする必要があります。通常のボタンまたは画像を追加し、それを回答コレクションに接続しているものと同じデータセットに接続します。次に、ボタンまたは画像のクリックアクションを「送信」に設定します。これにより、送信ボタンをクリックした際に、アップロードしたファイルが回答コレクションに書き込まれ、新しいアイテムが作成されるようになります。

他のユーザー入力要素を同じデータセットに接続している場合は、送信ボタンをクリックすると、その入力内容もコレクションに送信されます。
「アップロード」ボタンの下に、「送信」ボタンを作成した様子を示したスクリーンショット。

よくある質問(FAQ)

アップロードボタンに関するよくある質問と回答については、以下をクリックしてください。