はじめに
「Studio CMSの記事をタグごとに絞り込みたいけれど、どこで設定すればいいの？」
「URLクエリを使えば、特定のタグだけを表示できる？」と迷っていませんか。
Studioでブログや実績一覧を作り、タグをクリックしたときに該当する記事だけを表示したくても、CMS側の設定とURLをどう組み合わせればよいのか分からず、迷ってしまうことがありますよね。
この記事では、Studio CMSでタグを設定する流れから、タグを使って記事を絞り込む方法、URLクエリを利用した設定手順まで解説します。
Studio CMSでタグによる絞り込みはできる
Studio CMSでは、CMSアイテムに設定したタグを条件にして、特定のアイテムだけを絞り込んで表示できます。
まずはタグごとの絞り込み方と、目的に応じた実装方法の選び方を確認していきましょう。
タグごとにCMSアイテムを絞り込んで表示できる
Studio CMSでは、CMSアイテムに設定したタグを条件に、該当するアイテムだけをCMSリストへ表示できます。
CMSリストのフィルター条件に対象のタグを指定し、アイテム側のタグと一致させて設定しましょう。
固定表示と訪問者によるタグ絞り込みで実装方法を選ぶ
特定のタグを常に表示する場合は、CMSリスト側にフィルター条件を設定します。
訪問者がタグを選んで表示内容を切り替える場合は、選択したタグが絞り込み条件へ反映されるように設定し、目的に合わせて実装方法を選びましょう。
Studio CMSでタグを使って絞り込む方法
Studio CMSでタグによる絞り込みを設定するには、まずCMSアイテム側に絞り込み条件として使うプロパティを用意します。
次にページへCMSリストを配置し、設定したタグを条件にフィルターを指定します。
最後にプレビューを開き、指定したタグに一致するCMSアイテムだけが表示されているか確認する流れです。
CMSアイテムにタグとして使うプロパティを設定する
Studio CMSのモデルを開き、絞り込みに使うプロパティを追加します。
各CMSアイテムを編集し、追加したプロパティにタグとして使う値を設定しておきましょう。
タグに使うプロパティの種類や設定方法で迷った場合は、Studio CMSの基本的な使い方から確認しておくと設定を進めやすくなります。
▶Studio CMSとは？基本的な使い方や記事を作成する方法を解説
ページにCMSリストを配置する
Studioのデザインエディターで対象ページを開き、CMSリストを配置します。
タグを設定したCMSモデルを接続し、CMSアイテムの内容がリストに表示されることを確認します。
タグを条件にフィルターを設定する
CMSリストを選択し、フィルター設定からタグとして使うプロパティを指定します。
表示したいタグの値を設定すると、その条件に一致するCMSアイテムだけに表示を絞り込めます。
プレビューで絞り込み結果を確認する
設定後はStudioのプレビューを開き、指定したタグのCMSアイテムだけが表示されているか確認します。
想定と異なる場合は、CMSアイテムのタグとフィルターに指定した値が一致しているか見直してみましょう。
訪問者がタグを選べる絞り込みを設定する方法
訪問者がページ上でタグを選び、表示するCMSアイテムを切り替えられるようにする場合は、URLクエリフィルターを利用します。
複数のタグを扱う場合は、AND・ORのどちらで条件を組み合わせるかも設定しておきましょう。
URLクエリフィルターを設定する
CMSリストを選択し、URLクエリの値を使ったフィルターを設定します。
絞り込みに使うプロパティと検索キーを対応させることで、URLクエリの値に一致するCMSアイテムを表示できます。
URLクエリの仕組みや「?tag=○○」のようなURLの意味が分からない場合は、クエリパラメータの基本を確認しておくと理解しやすいでしょう。
▶URLのクエリパラメータとは？書き方や使い方をわかりやすく解説
タグを選択するフィルターパーツを配置する
ページ上に、訪問者がタグを選べるフィルターパーツを配置します。
絞り込みに使うタグを選択肢として設定し、選んだ値がURLクエリへ反映されるようにします。
CMSリストとフィルターを連動させる
CMSリストとフィルターパーツで使用する検索キーを同じ値に設定します。
プレビューでタグを切り替え、選択したタグに該当するCMSアイテムだけが表示されるか確認しましょう。
複数タグをAND・OR条件で絞り込む
複数のタグで絞り込む場合は、すべての条件を満たす「AND」か、いずれかの条件を満たす「OR」を設定します。
表示したいCMSアイテムに合わせて、適した条件を選びましょう。
Studio CMSでタグの絞り込みができないときの確認ポイント
Studio CMSでタグを選んでもCMSアイテムが絞り込まれない場合は、タグに使用しているCMSプロパティとフィルター条件を順番に確認します。
まずCMSプロパティ、次にCMSリストのフィルター条件、最後にURLクエリの検索キーと値を確認して、設定の不一致がないか切り分けていきましょう。
タグに使っているCMSプロパティを確認する
Studio CMSで対象のモデルを開き、タグに使っているプロパティを確認します。
各CMSアイテムに正しいタグの値が入力されているか、別のプロパティへ設定していないかも確認しておきましょう。
CMSリストのフィルター条件を確認する
CMSリストを選択し、フィルターに指定しているプロパティと値を確認します。
CMSアイテム側のタグと一致していない場合は、正しいプロパティや値に修正してください。
URLクエリの検索キーと値を確認する
URLクエリフィルターを使っている場合は、フィルターパーツとCMSリストの検索キーが一致しているか確認します。
タグを選んでもURLクエリが切り替わらない場合は、設定した検索キーと値を見直してみましょう。
まとめ
Studio CMSでは、CMSアイテムにタグを設定し、CMSリストのフィルターと組み合わせることで、必要なアイテムだけを絞り込んで表示できます。
表示するタグを固定する方法だけでなく、URLクエリを使えば訪問者がタグを選んで表示内容を切り替えることも可能です。
まずは表示したい内容に合わせて絞り込み方法を選び、うまく表示されない場合はCMSプロパティやフィルター条件、URLクエリの設定を順に確認してみましょう。
