CMS:カテゴリー別にアイテムを一覧表示する動的ページを作成する

読了時間:26分
動的ページを使用して、ウェブサイトの CMS(コンテンツ管理システム)コレクションのアイテムをカテゴリーごとに整理しましょう。カテゴリーごとに異なるバージョンを持つ動的「カテゴリー」ページを作成できます。各バージョンでは、訪問者はカテゴリー内のアイテムリストを閲覧し、クリックして特定のアイテムを表示することができます。

たとえば、あなたがミステリー、ロマンス、ファンタジーなど様々なジャンルのレビューを掲載する書籍ブロガーだとしましょう。各ジャンルごとに動的ページを設定することで、本好きの訪問者は興味のあるレビューに簡単に移動することができ、訪問者の体験を向上させることができます。

このガイドでは、各カテゴリーの動的ページの設定、URL 構造の調整し、ページのパーソナライズ、そして必要に応じてすべてのカテゴリーを表示する包括的な動的ページの作成方法を説明します。
始める前に:

ステップ 1 | コレクションアイテムを分類するためのフィールドを追加する

サイトに異なるカテゴリーのアイテムを表示するには、コレクションに各アイテムが属するカテゴリーを定義するフィールドが必要となります。コレクションに「カテゴリー」フィールドを追加または選択し、フィールドに値を入力して各アイテムを分類します。

コレクションに「カテゴリー」フィールドを追加する方法:

  1. サイトダッシュボードの「CMS」にアクセスします。または、エディタで「CMS」アイコン をクリックし、「あなたのコレクション」タブをクリックします。
  2. 該当するコレクションをクリックします。
  3. フィールドを管理」をクリックします。
  4. +フィールドを追加」をクリックし、「テキスト」または「番号(数値)」フィールドタイプを選択して、「フィールドタイプを選択」をクリックします。
  5. フィールド名」(例:カテゴリー)を入力します。
  6. (Velo のみのオプション)サイトのコードで使用されている「フィールド ID」を更新します。このフィールドは後で更新することはできません。
  7. (オプション)コレクションビューでフィールド名の横にツールチップとして表示される「ヘルプテキスト」を入力します。
  8. (オプション)「制約」タブをクリックして、必須項目にしたり、文字数を制限したり、特定の値のみを許可したりすることができます。フィールド制約の追加に関する詳細はこちら
  9. (オプション)「デフォルト値」タブをクリックして、コレクション内の新しいアイテムごとに、フィールドに自動的に追加されるテキストを追加します。フィールドにデフォルト値を追加する方法についてはこちら
  10. 保存」をクリックします。
コレクションのアイテムを分類するために使用する新しいフィールドを保存しているスクリーンショット。
  1. 新しい「カテゴリー」フィールドに、各アイテムが属するカテゴリー名を入力します。固有のカテゴリーごとに、同じ数のスペースを使用するようにしてください。
各アイテムの値が表示されたカテゴリーコレクションフィールドのスクリーンショット。

ステップ 2 | カテゴリーごとにアイテムを一覧表示する動的ページを追加する

コレクション用に新しい動的リストページを作成します。後で、この動的ページは、カテゴリーごとに異なるバージョンを含むテンプレートとして機能します。各バージョンには、そのカテゴリーに属するアイテムのみが表示されます。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタ左側で「CMS をクリックします。
  3. あなたのコレクション」をクリックします。
  4. 該当するコレクションにマウスオーバーし、「その他のアクション」アイコン  をクリックします。
  5. 動的ページを追加」をクリックします。
コレクションに動的ページを追加しているスクリーンショット。
  1. リストページ」を選択し、「サイトに追加する」をクリックします。

ステップ 3 | URL スラッグ構造を変更する

新しい動的リストページを、カテゴリーごとにアイテムを一覧表示する種類の動的アイテムページに変換する必要があります。これを行うには、ページの URL スラッグ構造を編集します。「category」フィールドを変数として追加し、スラッグ構造をサイト固有に保つようにしてください。
重要:
動的ページの URL スラッグ構造を変更すると、これらのページへの既存のリンクはすべて機能しなくなります。これは、サイト内のリンク、外部と共有したリンク、検索エンジンの SEO リンクに影響します。訪問者と検索エンジンを古い URL から新しい URL に移動させる自動リダイレクト追加機能をリリースしています。

固有の URL スラッグ構造

URL スラッグ構造がサイトの他の既存ページで使用されていないことを確認してください。固有にするためには、たとえ変数が異なっていても、URL スラッグ構造がサイト上の別のページと同じプリフィックス(例:{コレクション名})と同じ数の変数を持つことはできません

URL スラッグ構造が既存の URL スラッグ構造と競合する場合、CMS では URL スラッグ構造への変更を保存することはできません。このため、コレクションの他の動的ページの URL スラッグ構造を変更するべき理由です。

動的リストページを動的アイテムページに変換するものは?

動的ページを作成すると、「ページリンク」フィールドがコレクションに追加されます。「ページリンク」フィールドは、動的ページの URL スラッグ構造に基づいて、コレクション内の各アイテムの実際の URL スラッグ値を生成します。

動的ページの URL スラッグ構造を編集すると、それに応じて「ページリンク」フィールドの値が調整されます。コレクション内の複数のアイテムが同じ「ページリンク値」(URL スラッグ)を持つ場合、CMS はこれらのアイテムが同じページを共有する必要があると判断します。そのため、動的ページは、固有のページリンク値(URL スラッグ)ごとに異なるバージョンの動的アイテムページに変換されます。
組み合わせたフィールド変数から動的「カテゴリー」ページを作成する:
フィールド値の固有の組み合わせごとにバージョンを備えた動的な「カテゴリー」ページを作成できます。動的ページの URL スラッグ構造に複数のフィールド変数を追加する場合、その値は「ページリンク」フィールドで組み合わせられます。このフィールドが複数のアイテムに対して同じである場合、動的ページは、固有のページリンク値(URL スラッグ)ごとにバージョンを備えた動的アイテムページに変換されます。

作成できる URL スラッグ構造の例

動的ページの URL スラッグ構造では、任意のテキストまたは数値のフィールドを変数として使用できます。デフォルトでは、各動的ページは以下の URL スラッグ構造になっています:
  • 動的アイテムページ:https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}
  • 動的カテゴリーページ:https://www.{your-domain.com}/{collection-name}/{category}
  • 動的リストページ:https://www.{your-domain.com}/{collection-name}

動的ページの URL スラッグ構造を編集する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタ左側で「ページ・メニュー をクリックします。
  3. 動的ページ」をクリックします。
  4. コレクションに接続する動的ページの URL スラッグ構造を編集します。手順を確認するには、以下の動的ページの種類をクリックしてください:

ステップ 4 | 動的カテゴリーページをカスタマイズする

これで、動的「カテゴリー」ページは、カテゴリーごとに異なるバージョンの動的アイテムページとして機能するようになります。各バージョンでは、リピーターには、カテゴリー内の各アイテムの詳細を表示するために、CMS コレクションフィールドにすでに接続されているさまざまな要素があります。

リピーターに要素を追加・削除したり、CMS 接続を変更したり、リピーターのサイズを変更したりすることができます。「プレビュー」ツールバーを使用して、ページの各バージョンがどのように表示されるかを確認しましょう。ページ上部のテキストを CMS の「カテゴリー」フィールドに接続して、各バージョンにカテゴリー名が上部に表示されるようにすることをおすすめします。
リピーターの代わりにギャラリーまたはテーブルを使用したい場合:
ギャラリーテーブルにアイテムを表示したい場合は、デフォルトのリピーターを削除してからプロギャラリーまたはテーブルを追加します。そしてデータセットを通して、ギャラリーまたはテーブルの各部分をデータセットを通して CMS コレクションに接続してください。

動的カテゴリーページをカスタマイズする方法:

Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. 動的カテゴリーページに移動します:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. 動的ページ」をクリックします。
    3. 前のセクションの手順で作成した動的カテゴリーページをクリックします。
Wix エディタで動的カテゴリーページを選択しているスクリーンショット。
  1. (オプション)リピーターに要素(例:テキスト、ボタン、画像など)を追加するか、不要な要素を削除します。リピーターのサイズを調整すると、リピーター内にすべての要素を収めることができます。
  2. リピーター要素をクリックし、「CMS に接続」アイコン  を選択します。
  3. 右側の「リピーターを接続」パネルで、接続する要素をクリックします。
  4. 接続」下で、該当するドロップダウンをクリックし、要素を該当するコレクションのフィールドに接続するか、クリック時の動作を選択します。表示されるオプションは、要素の種類によって異なります。
ヒント:
  • ページ上部のテキストを「カテゴリー」フィールドに接続し、表示されるカテゴリーに応じて動的に調整されるようにします。
  • リピーター内の画像またはボタンを動的アイテムページに接続し、一度に 1つのアイテムを表示します。
ボタンを動的アイテムページに接続しているスクリーンショット。
  1. パネル上部の「リピーターを接続」をクリックします。
  2. 上記の手順 3〜7 を繰り返し、さらに要素をコレクションのフィールドに接続するか、クリック時の動作を選択します。
動的カテゴリーページに表示されたリピーターの CMS 接続のスクリーンショット。
  1. 必要に応じて、リピーター要素をクリックして調整します。
    ヒント:リピーターには、いつでも要素を追加または削除することができます。変化しない静的コンテンツを使用したい場合は、要素の接続を解除することができます。
  2. プレビュー」をクリックし、ツールバーを使用して動的カテゴリーページの各バージョンをテストします。
    ヒント:プレビューモードにした際に 404 エラーメッセージが表示される場合は、エディタを保存して再読み込みし、もう一度お試しください。
「プレビュー」ツールバーを使用して、動的ページの他のバージョンを表示しているスクリーンショット。
  1. 変更内容を公開する準備ができたら、「公開」をクリックします。

ステップ 5 |(オプション)カテゴリーを一覧表示する動的ページを作成する

カテゴリーごとに異なるバージョンの動的ページが追加されたら、これらすべてのカテゴリーを一覧表示するページを作成することができます。これにより、サイト訪問者はすべてのカテゴリーのインデックスを確認し、以前に作成した動的「カテゴリー」ページの関連するバージョンをクリックして移動することができます。

これを行うには、カテゴリーごとにアイテムを含む個別のコレクションが必要です。「カテゴリー」コレクションには、メインコレクションのアイテムを参照する複数の参照先フィールドも必要です。各カテゴリーの画像用の画像フィールドや、各カテゴリーの簡単な説明を提供するテキストフィールドを追加することもできます。

次に、「カテゴリー」コレクションの動的リストページを追加します。メインコレクションに接続し、「カテゴリー」コレクションの「タイトル(カテゴリー)」フィールドを含むフィルターを持つデータセットを追加する必要があります。ページをカスタマイズし、必要に応じて URL スラッグ構造を変更します。

a | カテゴリーを掲載するためのコレクションを作成する

  1. サイトダッシュボードの「CMS」にアクセスします。
  2. 右上の「+コレクションを作成」をクリックします。
  3. 白紙テンプレート」をクリックし、「次へ」をクリックします。
  4. コレクションの名前を入力し、「複数のアイテム(デフォルト)」を選択したまま、「作成」をクリックします。
  5. メインコレクションを参照する複数の参照フィールドを追加します:
    1. フィールドを追加」をクリックし、「複数の参照先」を選択して、「フィールドタイプを選択」をクリックします。
    2. フィールド名」を入力します。
    3. 参照先コレクション」ドロップダウンをクリックし、「カテゴリー」フィールドを含むメインコレクションを選択し、「保存」をクリックします。
「カテゴリー」コレクションに「複数の参照先」フィールドを追加しているスクリーンショット。
  1. (オプション)カテゴリーリストページに表示する項目を追加します(例: 画像、テキストなど)。たとえば、各カテゴリーを表す画像を表示するための画像フィールドを追加できます。
  2. カテゴリーごとに新しいアイテムを追加します:
    1. +アイテムを追加」をクリックします。
    2. プライマリ「タイトル」にカテゴリーの名前を入力します。
    3. 複数の参照先」セルをクリックし、このアイテムのプライマリ「タイトル」フィールドと一致するカテゴリーフィールドを持つアイテムを選択します。
    4. このアイテムまたはカテゴリー用に追加したその他のフィールドを入力します。
    5. これらの手順を繰り返して、各カテゴリーを表すアイテムを追加します。
複数の参照先フィールドを含む「カテゴリー」コレクションのスクリーンショット。

b | カテゴリーの一覧を表示するための動的ページを追加する

Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタ左側で「CMS をクリックします。
  3. あなたのコレクション」をクリックします。
  4. カテゴリーを一覧表示するために作成したコレクションにマウスオーバーし、「その他のアクション」アイコン  をクリックします。
  5. 動的ページを追加」をクリックします。
動的ページを追加しているスクリーンショット。
  1. リストページ」を選択し、「サイトに追加する」をクリックします。
  2. メインコレクションに接続し、「カテゴリー」コレクションの「タイトル(カテゴリー)」フィールドを含むフィルターを持つデータセットを追加します:
    1. エディタ左側で「CMS をクリックします。
    2. コンテンツパーツを追加」をクリックしてから「データセット」をクリックします。
    3. ドロップダウンをクリックし、メインコレクションを選択して、「作成」をクリックします。
    4. 右側の「データセット設定」パネルで「+フィルターを追加」をクリックします。
    5. フィールド」ドロップダウンをクリックし、「Category(カテゴリー)」フィールドを選択します。
    6. 値の参照元」で「別のデータセット」を選択します。
    7. データセット」ドロップダウンをクリックし、カテゴリーを一覧表示するコレクションを選択します。
    8. フィールド」ドロップダウンで「タイトル」を選択したまま、「フィルターを追加」をクリックします。
データセットにフィルターを追加しているスクリーンショット。
  1. リピーター内の「もっと読む」ボタンを動的カテゴリーページに接続します:
    1. リピーター内のボタンをクリックし、「CMS に接続」アイコン  を選択します。
    2. データセットを選択」ドロップダウンをクリックし、メインコレクションに接続するデータセットを選択します。
    3. クリック時の動作を選択」ドロップダウンをクリックし、動的「カテゴリー」ページを選択します。
動的「カテゴリー」ページにリンクしているスクリーンショット。
  1. (オプション)リピーターに要素(例:テキスト、ボタン、画像など)を追加するか、不要な要素を削除します。リピーターのサイズを調整すると、リピーター内にすべての要素を収めることができます。
  2. リピーターをクリックし、「CMS に接続」アイコン  を選択し、要素とコレクション間の接続を調整します。
リピーターの CMS 接続を調整しているスクリーンショット。
  1. (オプション)この動的ページの URL スラッグ構造を変更します。
  2. プレビュー」をクリックし、接続をテストします。
  3. 変更内容を公開する準備ができたら、「公開」をクリックします。

よくある質問

動的カテゴリーページの作成に関するよくある質問と回答については、以下をクリックしてください。

お役に立ちましたか?

|