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

URLクエリフィルター:CMSリストの絞り込みフィルターを設置する

カテゴリーなどの検索条件でCMSリストの表示アイテムを絞り込むフィルター(URLクエリフィルター)をサイトに設置できます。WebページのURLに含まれるクエリパラメーターをStudioのCMSリストのフィルターに連携し、表示内容を動的に切り替えます。

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

Point: CMSリストとは

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

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

URLクエリフィルターとは

サイト訪問者がCMSリストの表示アイテムを絞り込み検索できるフィルター(URLクエリフィルター)を設置できます。事前に参照プロパティを活用して設定したカテゴリーやタグなどを検索条件として使用します。

URLクエリフィルターの仕組み

  • 値の取得元としてURLクエリパラメーターを指定し、ページURLに含まれるパラメーター値に応じて表示するCMSアイテムが自動的に絞り込まれる仕組みです。

  • サイト閲覧者が「URLクエリフィルター」を使用して絞り込み条件を設定すると、URLの末尾に/page?key=valueのようなクエリが付与されます。

  • クエリ付与済みのリンクを共有することで、絞り込み条件を適用済みのページリンクをシェアすることができます。


URLクエリフィルターの設定条件

URLクエリフィルターは、次の条件を満たす場合にのみ設置が可能です。

  • URLクエリフィルターの対象モデルに、他のCMSモデルを参照するプロパティ(参照プロパティ)を設定している。

  • URLクエリフィルターの対象モデルと同じCMSモデルが紐付いたCMSリストが同一サイト内に配置されている。


URLクエリフィルターを設置する

以下の手順で、CMSリストの絞り込みフィルター(URLクエリフィルター)を設置します。

1. CMSダッシュボードで事前準備をする

URLクエリフィルターを設置する前に、Studio CMSのコンテンツを作成しておきます。

2. フィルターとCMSリストを設置する

以下いずれかの方法で、フィルターとCMSリストをページに設置します。

プリセットパーツを使用する

接続パネルのCMSタブに、プリセットパーツが用意されています。

プリセットパーツは、フィルターのみ、またはリスト+フィルターのいずれかを選択できます。

  1. [CMS]タブを選択します。

  2. 表示されたCMSプリセットから、対象のCMSモデルが紐付いた[フィルター]または[リスト+フィルター]を選び、スクリーンに配置します。

検索ページを追加する

検索ページには、あらかじめ以下のセットが配置されています。

サイト閲覧者が、検索ワードや検索条件を元にリストの表示アイテムを絞り込める検索ページを短時間で用意できます。

  • 検索フィールド

  • URLクエリフィルター ※参照プロパティが設定されている場合のみ

  • CMSリスト

3. CMSリストの設定をする

CMSリストのフィルター条件をURLクエリに設定し、リストの各種設定やレイアウト・外観の調整をします。

  1. フィルターで絞り込み検索をしたいCMSリストをスクリーン上で選択します。リストアイテム単体ではなく、CMSリスト全体を選択してください。

  2. 右パネルの[データ]タブを開き、[フィルター]メニューを表示します。 パネルが閉じている場合は、右パネルを開いてください。

  3. [フィルター]メニューで、[+]をクリックしてフィルターを追加します。

    プルダウンリスト内の[モデル]配下から、フィルター条件に使用する参照プロパティを選択します。

  4. フィルター条件で[URLクエリ]を有効化します。

  5. リストの表示設定をします。

    それぞれの設定方法は、以下のヘルプ記事を参照してください。

  6. リストのレイアウトや外観を設定する場合には、以下のヘルプページを参考に設定を行なってください。

4. URLクエリフィルターの設定をする

注意:URLクエリフィルターの制限

  • 1つのCMSリストに追加できるフィルターの表示項目は最大5件までです。

  • 表示項目を複数設定した場合に使用できる検索条件は、AND条件のみです。OR検索には対応していません。

  1. フィルターを選択します。

  2. 右パネルの[データ]タブを開き、[フィルター設定]メニューを表示します。 パネルが閉じている場合は、右パネルを開いてください。

  3. [対象モデル]を確認します。

    デフォルトで選択されているCMSモデルから変更する場合には、CMSリストに紐付けたモデルも同時に変更する必要があります。

  4. 表示項目を追加します。

    表示項目を追加したい場合には、[表示項目]メニュー横の[+]をクリックして追加します。

  5. 表示項目を設定します。

    設定済みの参照プロパティから、検索条件として使用したいプロパティを表示項目として選択します。

    • ラベル:フィルター項目のラベルを編集するフィールドです。

    • フィルター解除ラベル:フィルター項目の選択解除ボタンのラベルを編集するフィールドです。

    • 項目を削除:フィルター項目を削除します。

  6. [他のページに遷移する]を設定します。

    フィルター結果を表示するCMSリストをURLクエリフィルター以外のページに配置している場合には、[他のページに遷移する]をオンにします。

    トグルをオンにすると、遷移先ページの設定フィールドが表示されます。

Tips: URLクエリフィルターをモーダルに配置する

URLクエリフィルターをモーダルに配置し、検索結果をモーダルのリンク元ページに表示する場合には、[他のページに遷移する]をオンにしてください。

5. フィルターの動作を確認する

  1. ライブプレビューで、URLクエリフィルターによるリストアイテムの絞り込みが機能することを確認します。

  2. 公開済みのサイトを編集している場合には、公開パネルでサイトを更新します。

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