LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

コレクションリストのフィルター

コレクションリスト内のアイテムをフィルタリングおよび制限する方法を学びます。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

コレクションリストをコレクションに接続すると、そのコレクション内の最初の100個のアイテムが表示されます。ただし、フィルターを使用して表示するアイテムを選択できます。ページネーションを有効にすることで、100個以上のアイテムを表示できます。アイテムのフィルタリングは、Element settings panel (D)内のCollection list settings で利用できます。

このレッスンで学ぶこと

このレッスンは、デザイナー内でフィルタリングされたコレクションリストの作成について説明しています。ライブウェブサイト上でのリアルタイムのフィルタリング/並べ替え(ファセットナビゲーション)は、現在利用できません。

フィルターの追加(Add filters)

フィルタを使用すると、特定の条件に一致するコレクションアイテムのみを表示できます。各コレクションフィールドタイプに対して使用可能なさまざまなフィルタルールから選択できます。

  1. フィルタを追加したいコレクションリストを選択します。
  2. Settings panel (D) に移動します。
  3. プラス(+)アイコンをクリックして、Collection list settingsの下にFilterを追加します。
  4. 最初のドロップダウンでフィルタリングしたいフィールドを選択します。
  5. 2番目のフィールドでルールを選択します。
  6. 必要に応じて値を指定します。
  7. Save をクリックします。

複数のフィルタを追加できますが、フィルタはAND演算子によって結合されます。

重要:同じコレクションフィールドに対して複数のフィールドを適用することはできないということを覚えておいてください。同じコレクションフィールドに複数のフィルタを同時に適用することはできません。各コレクションフィールドには1つのフィルタしか適用できません。

フィルタの削除

フィルタを削除するには、フィルタの隣にあるゴミ箱アイコンをクリックします。

特集記事のみを表示する

たとえば、ホームページに特集記事のみを表示したい場合は、次の手順を実行します:

  1. "Blog Posts"(ブログ記事)というコレクションリストを追加し、作成し、スタイルを設定します。
  2. Settings panelFilter を追加します。
  3. 最初のドロップダウンから "Featured"(特集記事) スイッチフィールドを選択します。
  4. 2番目のドロップダウンで "is on"(オンになっている) を選択します。
  5. Save をクリックします。

現在のアイテムを非表示

ブログを持っており、各ブログ記事ページに他のブログ記事のリストを表示したいが、現在のブログ記事をリストから除外したい場合、次の手順を実行します:

  1. "Blog Posts"(ブログ記事)というコレクションリストを追加し、作成し、スタイルを設定します。
  2. Settings panelFilter を追加します。
  3. 最初のドロップダウンからコレクション名を選択します。
  4. 2番目のドロップダウンで "is not"(でない) を選択します。
  5. 3番目のフィールドには "current collection item"(現在のコレクションアイテム) と表示されます。
  6. Save をクリックします。

関連コンテンツを表示

例えば、Author(著者)のページにその著者が書いたすべてのブログ記事を表示したい場合、フィルタを使用してこの著者を参照するブログ記事のみを表示することができます。

  1. "Blog Posts"(ブログ記事)というコレクションリストを追加し、作成し、スタイルを設定します。
  2. Filter を追加します。
  3. 最初のドロップダウンから著者に関するReference(参照)フィールドを選択します。
  4. 2番目のドロップダウンで "Equals"(等しい) を選択します。
  5. 3番目のフィールドで "current Author"(現在の著者) を選択します。
  6. Save をクリックします。

これで、各著者ページにはこの著者を参照するブログ記事のリストが表示されます。関連コンテンツを表示する場合、必要に応じてこのリストを制限することもできます。

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談