メインコンテンツにスキップ

CMSリストのフィルター:ダイナミックフィルター(Dynamic)

ページの表示内容に合わせて表示アイテムが自動で切り替わるフィルター機能がダイナミックフィルターです。動的ページ内にCMSリストを配置し、CMSモデルを参照しているプロパティを条件として設定します。

今週アップデートされました

ダイナミックフィルターとは

ダイナミックフィルター(Dynamic)は、動的ページ内に配置したCMSリストの表示アイテムを、ページで表示中のCMSアイテムに応じて自動で絞り込むフィルターです。

通常のフィルターと異なり、ページごとにフィルター値が自動で切り替わるため、カテゴリー別一覧や関連記事一覧などのページを効率的に作成できます。

Point: CMSリストとは

CMSリストとは、Studio内外のデータを参照してサイト上で表示する動的リストのうち、Studio CMSの内部コンテンツデータを紐付けたリストです。

あらかじめ設定したCMSプロパティを元に、リストを動的に編集することも可能です。


ダイナミックフィルターの設定条件

ダイナミックフィルターは、次の条件をすべて満たす場合に設定できます。

  • 動的ページ上にCMSリストを配置している。

  • フィルター条件に参照プロパティ(シングルセレクトまたはマルチセレクト)を使用している。

  • 動的ページ、CMSリスト、フィルター条件に設定する参照プロパティが、それぞれ対応するCMSモデルの組み合わせとして、次のいずれかのパターンに当てはまっている。

    • パターン1:動的ページと参照プロパティのCMSモデルが一致している。

      例:

      • 動的ページのモデル:カテゴリー

      • CMSリストのモデル:記事

      • フィルター条件のプロパティ:記事モデル内の「カテゴリー」(カテゴリーを参照する参照プロパティ)

    • パターン2:動的ページとCMSリストのCMSモデルが一致している。

      例:

      • 動的ページのモデル:記事

      • CMSリストのモデル:記事

      • フィルター条件のプロパティ:記事モデル内の「カテゴリー」(カテゴリーを参照する参照プロパティ)


ダイナミックフィルターを設定する

注意: サポート窓口へのお問い合わせについて

  • Studioサポートポリシーに基づき、サポート窓口では個別での設定方法の解説や、フィルター条件の掛け合わせ方法のご相談を承ることはできません。

  • 不具合が疑われる挙動については、Studioへログイン後 右下の[?]よりチャットサポートへお問い合わせください。

事前準備 1:CMSダッシュボードでプロパティ構造を設計する

ダイナミックフィルターを利用する前に、CMSダッシュボードで参照関係を含めたプロパティ構造を設計します。

  1. 記事タイプのCMSモデルで記事アイテムを作成します。

  2. カテゴリーやタグなど、記事分類に使用するCMSモデルを作成します。

  3. 記事タイプのCMSモデルに、2で作成したCMSモデルを参照するプロパティ(参照プロパティ)を設定します。シングルセレクトまたはマルチセレクトを選択します。

    ここで設定した参照プロパティを元に、動的ページ上でリストのアイテム表示が切り替わります。

    以下の画像では、例として[Workshops]という記事タイプモデルに[Category]というカテゴリタイプモデルを参照するプロパティが設定されています。

事前準備 2:記事モデルのアイテムを表示する動的ページを作成する

記事モデルのアイテムを表示する動的ページを作成します。


手順 1. 動的ページにCMSリストを追加する

  1. デザインエディタを開きます。

  2. 記事一覧やカテゴリ別一覧を表示したい動的ページを追加するか、既存の動的ページを開きます。

  3. 画面左のナビゲーションから[接続]アイコンを選択して、接続パネルを開きます。

  4. リスト表示したいCMSモデルが紐づいているCMSリストを選択して、動的ページ上に配置します。

  5. 外観やレイアウトなど、表示デザインの調整をします。

    必要に応じて、ボックスのデザイン設定の記事コレクションを参照してください。

手順 2. CMSリストにダイナミックフィルターを設定する

  1. ページに配置したCMSリストを選択します。リストアイテム単体ではなく、CMSリスト全体を選択してください。

  2. 右パネルで[データ]タブを選択します。パネルが閉じている場合には、右パネルを開いてください。

  3. [フィルター]で、次の手順でフィルター設定をします。

    1. [フィルター]横の[+]をクリックし、フィルターを追加します。

    2. [フィルター]の入力フィールドで、フィルターとして利用する参照プロパティをプルダウンリストから選択します。

    3. [フィルター条件]の入力フィールドで、[Dynamic]表示のある条件を選択します。

      ※ [URLクエリ設定中]と表示されている場合は、右隣に表示される[個別に値を設定する]リンクボタンをクリックすると、条件を選択できます。

      ※ プルダウンリスト上に[Dynamic]表示がない場合は、このページの「ダイナミックフィルターの設定条件」を確認し、条件を満たすようにCMSモデルや参照プロパティを見直します。

手順 3. プレビューや公開サイトでの動作を確認する

  1. エディタ上やライブプレビューで、フィルター条件が期待どおりに機能しているか確認します。

  2. 公開パネルでサイトを更新します。この操作を行うまで、公開サイトには反映されません。


フィルター設定の注意事項

  • フィルターは最大5件まで追加できます。

  • 複数のフィルター条件を設定した場合、すべてAND条件で適用されます。OR条件での絞り込みはできません。

こちらの回答で解決しましたか?