CMS:動的ページの例

読了時間:3分
動的ページを使用すると、同じページレイアウトを何度も使用することができ、その都度、コレクションの異なるコンテンツを表示することができます。これには、動的アイテムページを使用して、コレクションの各アイテムを表示します。
また、動的ページを使用して、コレクションのアイテムのプレビューを表示することもできます。これは動的リストページと呼ばれます。
コレクションのコンテンツを適切に管理することで、動的ページでアイテムを思い通りに表示することができます。レシピ、不動産物件、求人情報を掲載するサイトは、動的ページによって時間と労力を節約できる良い例です。
動的ページはコレクションから各行(またはアイテム)を取得し、そのコンテンツを表示します。そのため、適切にフォーマットされたコレクションが動的ページにとって重要となります。
たとえば、レシピサイトを運営している場合、コレクションには次のフィールドが必要です:
  • タイトル:(自動的に追加されます)レシピ名を保存します。
  • 食事:レシピが朝食用、昼食用、夕食用のいずれであるかを指定します。
  • コース:レシピが前菜、メイン、デザートのいずれであるかを記します。

ページコンテンツを一か所で管理する

動的ページを作成するには、コンテンツを含むコレクションが必要です。以下の例では、食べ物とレシピに関するテキストと画像を使用しています。
コレクションの各行は 1つのアイテムを表します。その行の各列には、各アイテムに関する情報が含まれます。CMS でコレクションを作成する方法はこちら
レシピコレクションのアイテムが表示されたスクリーンショット

単一の動的アイテムページを使用してすべてのアイテムを表示する

コレクション(またはアイテム)の各行は、1ページのコンテンツと考えることができます。レシピページの場合、コンテンツには通常、タイトル、分量(一人前など)、料理の写真、所要時間、材料、手順が含まれます。
エディタで、テキストや画像などの要素を使用して動的アイテムページを設定します。これらの各要素はコレクションにリンクされています。
動的アイテムページの便利な点は、コレクション内の各アイテムからコンテンツを呼び出し、独自のページとして表示できることです。
動的アイテムページの例が表示されたスクリーンショット
エディタで動的アイテムページの作業を行う場合、コレクション内のアイテムを切り替えて、コンテンツが正しく表示されるようにすることができます。ドロップダウンのアイテムセレクタをクリックしてアイテムをタイトル別に表示できます。リスト上のアイテムを選択すると、そのアイテムのコンテンツがページに表示されます。「プレビュー」をクリックして、ライブサイトでコンテンツがどのように表示されるかを確認することもできます。
動的アイテムページのプレビューセレクタの例を表示したスクリーンショット。
コレクションの各アイテムを表示する動的アイテムページの作成方法はこちら

動的リストページを使用して複数のアイテムをプレビューする

動的リストページは、コレクション内の各アイテムのプレビューを表示するため、アイテムのインデックスと考えてください。動的リストページにはデフォルトでリピーターが付属しています。リピーターは、各アイテムのコンテンツのサンプルを明確かつ簡単に表示することができます。
ギャラリーやテーブル(表)など、他の複数アイテム要素を使用することもできます。どの要素を選択しても、要素の個々の部分をコレクション内の関連するフィールドに接続する必要があります。動的リストページの設定方法はこちら
また、動的リストページを使用して、選択した条件に基づいて異なるアイテムグループを表示することもできます。
食事に基づいたレシピを表示するには、リピーターにリンクされているデータセットにフィルターを追加します。フィルターを設定すると、動的リストページには、データセットフィルターで設定された条件を満たすレシピのみが表示されます。
リピーターとそのデータセット設定のスクリーンショット。データセットのフィルターがハイライトされています。
もっと詳しく知りたい場合:
CMS の使用方法については Wix Learn をご覧ください。リストページとアイテムページの活用方法については 5本目の動画をご覧ください。

お役に立ちましたか?

|