CMS:テーブルにコレクションコンテンツを表示する

読了時間:14分
サイトのテーブルに CMS(コンテンツ管理システム)コレクションのコンテンツを表示します。

コレクションにバインドするデータセットにテーブルを接続すると、フィールドは列として、アイテムは行として表示されます。デフォルトでは、表示するように設定しているフィールドは、CMS に接続するとエディタに自動的に表示されます。接続を終えたら、カラムの順番を変更したり、「設定」、「レイアウト」、「デザイン」パネルなどを使用して、テーブルの外観や動作をカスタマイズすることができます。
CMS に接続されたテーブルの例を示したスクリーンショット。

ステップ 1 | コレクションを作成する

テーブルに表示するコンテンツを格納するための「複数のアイテム」コレクションを作成します。コレクションのフィールドとアイテムは、手動で追加するか CSV ファイルからインポートすることができます。

コレクションを作成する方法:

  1. サイトダッシュボードの「CMS」にアクセスします。または、エディタ内で「CMS をクリックします。
  2. コレクションを作成」をクリックします。
  3. コレクション名を入力します。
  4. 複数のアイテム(デフォルト)」を選択したまま、「作成する」をクリックします。
  5. 手動または CSV ファイルをインポートして、コレクションにフィールドを追加します:
  6. コレクションの権限を設定します:
    1. その他のアクション」をクリックし、「権限・プライバシー」を選択します。
    2. このコレクションに保存するコンテンツの種類」ドロップダウンをクリックしてオプションを選択します。必要であればドロップダウンをクリックして、コンテンツを閲覧、追加、削除、更新できるユーザーを調整できます。コレクションの権限を設定する方法はこちら
    3. 保存する」をクリックします。
コレクションの権限とプライバシー設定を示したスクリーンショット。

ステップ 2 | ページにテーブルを追加する

エディタに追加するテーブルをプリセットから選択します。テーブルは後でコレクションに接続してカスタマイズします。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. エディタ左側で「要素を追加 をクリックします。
  3. リスト」をクリックします。
  4. テーブル」をクリックします。
  5. 使用したいテーブルをクリックして、ページにドラッグします。
Wix エディタでテーブルを追加しているスクリーンショット。

ステップ 3 | テーブルを CMS コレクションに接続する

コレクションにバインドするデータセットにテーブルを接続すると、テーブル内に自動的に対応するフィールドが表示されます。動的アイテムページへのリンクなど、カラムにリンクを追加すると、訪問者がカラム内のアイテムをクリックしてリンク先に移動できるようになります。
Wix エディタ
Wix Studio エディタ
  1. ページ上のテーブル要素をクリックします。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
  1. 接続設定」下の該当するドロップダウンをクリックして、各カラムに接続するコレクションフィールドを選択します。
  2. (オプション)カラム内のアイテムに、動的アイテムページなどへのリンクを設定します:
    1. 該当する「[フィールド名] カラムの接続先」ドロップダウンをクリックします。
    2. [コレクション名](Item)」と表示される動的アイテムページを選択するか、別のリンクオプションを選択します。
    3. リンクを設定したいカラム内のアイテムごとに、この手順を繰り返します。
  1. (オプション)テーブルに別のカラムを追加します:
    1. 右側の「テーブルを接続」パネルの下部にある「カラムを追加」をクリックします。
    2. カラムを選択」ドロップダウンをクリックし、接続するコレクションのフィールドを選択します。
    3. カラムを追加」をクリックします。

ステップ 4 | テーブルをカスタマイズする

テーブルを好みの外観にカスタマイズします。カラムは並べ替えたり、名前を変更したり、削除したりできるほか、「設定」、「レイアウト」、「デザイン」パネルを使用して自由にカスタマイズすることができます。また、テーブルは端をドラッグして、サイズや位置を微調整することもできます。
Wix エディタ
Wix Studio エディタ
  1. ページ上のテーブル要素をクリックします。
  2. テーブルを管理」をクリックし、実行する内容を選択します:
    • カラムを並べ替える:該当するカラム横の「並び替え」アイコン  をクリックし、目的の位置まで上下にドラッグします。
    • カラムの名前を変更する:該当するカラムにマウスオーバーし、「その他のアクション」アイコン  をクリックして「ラベルを編集」を選択します。新しい名前を入力し、「完了」をクリックします。
    • カラムを削除する:該当するカラムにマウスオーバーし、「その他のアクション」アイコン  をクリックして「削除」をクリックします。
    • 接続を管理する:「接続を管理」をクリックし、CMS 接続を変更します。次に、該当するドロップダウンをクリックし、各カラムに接続するコレクションのフィールドを選択して、アイテムのリンクを設定します。
  1. 設定」アイコン  をクリックし、次のオプションから選択します:
    • クリック時の選択範囲:訪問者がセルをクリックした際、テーブル内で選択される範囲を「なし」、「」、「セル(マス)」から選択します。
    • リンク先の表示方法:アイテムにリンクを設定している場合は、それらを新しいウィンドウで表示するか、現在のウィンドウで表示するかを選択します。
    • 日付の表示形式: 日付フィールドタイプを接続している場合は、日付の表示形式を選択します。
  2. レイアウト」アイコン  をクリックし、テーブルの高さ、ヘッダーの表示オプション、行とカラムのサイズ、コンテンツ配置、ページ送りを選択します。
  3. デザイン」アイコン  をクリックし、プリセットデザインを選択し、「デザインをカスタマイズ」をクリックしてテーブルのデザインを微調整します。
  4. ストレッチ」アイコン  をクリックして、テーブルをサイトの幅に合わせます。
  5. テーブルの端をドラッグしてサイズを変更します。
注意:
コレクションのフィールド名を変更するには、エディタで開発モードを有効にしてからコレクションに移動し、該当するフィールドを編集してそのフィールド名を変更します。(英語)

ステップ 5 | データセット設定を管理する

データセットモードを設定し、テーブルに特定のアイテムのみが指定した順番で表示されるよう、データセットにフィルターと並び替えを追加します。テーブルには、データセットによって取得されたすべてのアイテムが表示されるため、「アイテム最大表示数」を設定することはできません。
Wix エディタ
Wix Studio エディタ
  1. データセットをクリックし、「設定」をクリックします。
  2. データセットモード」ドロップダウンをクリックし、オプションを選択します:
注意:
アイテム最大表示数」はテーブルには適用できません。その代わり、「レイアウト」アイコン をクリックし、カスタムのテーブルの高さを設定してページ送りを有効にすることで、表示するアイテム数を制限することができます。
  1. (オプション)「+フィルターを追加」をクリックし、テーブルに特定のアイテムのみを表示します。
  2. (オプション)「+新規並び替えを追加する」をクリックし、テーブルに表示されるコレクションアイテムの順番を選択します。

よくある質問

テーブルでの CMS コンテンツの表示に関するよくある質問と回答については、以下をクリックしてください。

お役に立ちましたか?

|