紹介フィールドの概要

の 紹介フィールド コレクションフィールドであり、 CMS コレクション. を利用するのではなく、オプションフィールド定義済みの値のリストから選択する制限がある参照フィールドとは異なり、参照フィールドでは別のコレクション内の任意のアイテムから選択できます。その後、参照されたアイテムの情報をコレクションリストそしてコレクションページ.

64b94acf88e862578c19b1ae_62e9519508a68bc73f41b7e0_aqsqkxd_tdwpo6hm-gl4zawh13rxvxflbgvv6ulx9v8wjuxdwmpad3j8rbjlxjzscczk9w5k1anbtkzi9hh1gpxfr_7nsnsewsva3zbolssfwkjrvieteoxsjhkzwnhcrufbdvgqtql5juwj-epsbg

たとえば、コレクションページに「レシピ」というコレクションに動的にリンクされたテキストフィールドがあるとします。この場合、「著者」というコレクション内のアイテム (著者など) は、参照フィールドを使用して「レシピ」コレクション内で参照できます。

著者が紹介フィールドを通じて「レシピ」コレクションページにリンクされていて、後でその著者の詳細を更新すると、紹介フィールドの接続によりコレクションページで自動的に更新されます。

紹介フィールドの一般的な用途は次のとおりです。

「ブログ投稿」コレクションは「著者」コレクションを参照します
「レシピ」コレクションは「著者」コレクションにリンクしています
「カテゴリ」コレクションを参照する「ニュース記事」コレクション
「コース」コレクションにリンクする「レッスン」コレクション

注意：参照する複数別のコレクションのアイテム（例：著者名を参照するそして経歴など) では、複数の紹介フィールドを使用します。

このチュートリアルでは、次のことを学習します。

紹介フィールドを確立するための手順
項目の引用方法
サイトのレイアウトで紹介フィールドを活用する方法
紹介フィールドを利用してコレクションリストを絞り込む方法
紹介フィールドを使用して条件付き表示を実装する方法

紹介フィールドを確立するための手順

新しいコレクションまたは既存のコレクションに紹介フィールドを導入できます。既存のコレクションに紹介フィールドを追加するには:

カーソルを コレクション 紹介フィールドを統合したい場所
設定「歯車”アイコンをクリックすると、 コレクション設定
タップする 新しいフィールドを追加 以内 コレクションフィールド セグメント
選択してください照会フィールドタイプ
組み込む ラベル
含む ヘルプテキスト必要に応じて
参照するコレクションを以下から選択してください コレクション 落ちる
選択する "この項目は必須ですフィールドを必須にしたい場合は「

まだコレクションを作成していない場合は、サイトにコレクションを追加する方法を確認してください。

参照フィールドタイプは、コレクション設定の「新しいフィールドの追加」セクションで強調表示されます。

「著者」という名前の参照フィールドの例。コレクションは「レシピ作成者」コレクションの例に設定されています。

重要な： コレクションごとの紹介フィールドの数は、サイトプランに基づいて制限されます。 スターター, コンテンツ管理システム、そして 電子商取引標準 サイトプランは最大 5 コレクションごとの参照フィールド。仕事, 電子商取引プラス, 電子商取引の高度化、そして企業サイトプランは最大 10 コレクションごとの参照フィールド。基本サイトプランには紹介フィールドは含まれません。サイトプランについてさらに詳しく知る.

引用項目

コレクションに参照フィールドを追加した後、そのコレクションのコレクションアイテムを入力し、各コレクションアイテムのフィールドに値を割り当てることができます。そこでは、 代わりの 紹介フィールド設定で参照しているコレクション。

サイトデザインでの紹介フィールドの使用

参照されたコレクションからデータを抽出し、サイトデザイン内のコレクションページまたはコレクションリストに含めることができます。フィールドと要素またはスタイルの間に接続を確立できます。

接続を確立する

任意の要素をコレクションリストまたはコレクションページに統合すると、参照先のコレクションのフィールドからその要素のコンテンツを取得できます。

たとえば、レシピコレクション内のレシピのタイトルを見出し要素にリンクし、作成者の名前をテキスト要素にリンクすることができます。

テキスト要素は、例として参照されている「Author」コレクションの名前のプレーンテキストフィールドに接続されています。

デザインのつながりを確立する

参照されたコレクションがカラーパレットまたは画像プレースホルダー各コレクションユニットで構成されているこれらの要素は、Web サイトのデザインにおける背景色、境界線のアクセント、テキスト色、または背景のビジュアルをカスタマイズするために使用できます。

リレーショナルフィールドによるコレクションリストのソート

コレクションリストを並べ替えるためにリレーショナルフィールドを使用する方法は 3 つあります。提供されているシナリオでは、「著者」コレクションにリンクする「レシピ」コレクションを利用します。

接続されたコレクション内の特定のアイテムごとに並べ替える（例：特定の著者に関連するレシピのみを表示する）
現在のページの参照に基づいて並べ替えます (例: 現在のページの著者と同じ著者による他のレシピの編集を表示する)
リンクされたコレクションページで現在のページの参照に基づいて選択します (例: 著者コレクションページでは、その著者にリンクされているすべてのレシピを表示します)

重要な： 参照フィールドによる並べ替えは、リレーショナルフィールドを含むコレクションにリンクされたコレクションリストにのみ適用されます。

リンクされたコレクション内の特定のアイテムに従って配置する

リレーショナルフィールドを実装することで、コレクションリストを整理することが可能です。これにより、選択基準に準拠した特定のエンティティを表示できます。

一例として、「おすすめレシピ」というコレクションリストを作成することができます。このリストは ソート つまり、「おすすめ」フラグが有効になっている「レシピ」コレクション内の要素 (レシピ) のみを参照することになります。

コレクションリストフィルターは、「おすすめレシピ」トグルが「オン」に設定されているコレクションアイテムをフィルターするように設定されています。

現在のページの参照で並べ替え

コレクションリストをコレクションページに組み込むことができ、同じ参照アイテムを共有するエンティティのみをフィーチャーすることができます。 コレクションページの参照項目。

たとえば、「レシピ」コレクションページでは、現在のページで参照されている著者と同じ著者による他のレシピのリストを表示できます。これは、「関連コンテンツ」セクションを表示するための一般的な戦略です。

これを達成するには、 フィルター 「著者」参照フィールドが「現在のレシピの著者」と一致する現在のページのコレクションリストに追加します。

「作成者」が「現在のレシピの作成者」と等しいコレクションリストにフィルターが設定されています。

リンクされたコレクションページで現在のページの参照順に並べ替える

さらに、コレクションリストをフィルタリングすることもできます。 リンクされた コレクションページ。

例えば、「著者」コレクションページでは、その著者を参照するすべてのレシピ（「レシピ」コレクションから）を表示できます。コレクションリストを挿入し、「レシピ」コレクションにリンクして、 フィルター ここで、「著者」参照フィールドは「「現在のレシピ著者」

コレクションリストにフィルターが設定され、「作成者」が「現在のレシピ作成者」と等しくなります。

コレクションリストフィルターに関するさらなる洞察を得る.

リレーショナルフィールドを介して条件付き表示を構成する方法

条件付き可視性を設定すると、コレクションリストまたはコレクションページ内の特定の要素を表示または非表示にすることができます。

関係フィールド自体
リンクされたコレクションの任意のフィールド

この種の基準はどこに適用されますか?

この特定の基準は、リレーショナルフィールドを持つコレクションにリンクされたコレクションリスト内でのみ確立できます。 または このコレクションのコレクションテンプレートページにあります。

たとえば、「イベント」という名前のコレクションに「場所」という名前のコレクションにリンクされたリレーショナルフィールドが含まれている場合、次の場合に、参照フィールド「場所」またはこのリンクされたコレクションの任意のフィールドに基づいて条件を追加できます。

「イベント」コレクションに関連付けられたコレクションリスト内
「イベント」テンプレートページ

どのような種類の基準を定義できますか?

リレーショナルフィールド自体に基づく次の基準を組み込むことができます。

関係フィールド 確立されています または 確立されていない
関係フィールド マッチ または コントラスト 特定の値

さらに、特定の分野リンクされたコレクションから作成できます。基準の category は、コレクションフィールドの種類に依存します。

図：基準中心

言及されたセットの牧草地で

この例では、「イベント」の品揃えにリンクされたコレクションリストがあります。「イベント」配列は「場所」の品揃えを指しています。

「イベント」コレクションに関連するこのコレクションリストには、「場所」コレクションのさまざまなフィールド属性がテキストフラグメントに関連付けられています。表現したい各属性に名前を追加しました（たとえば、「日付」、「都市」など）。名前と属性には、 プレゼンテーション 設定されている 列をなして つまり、それらは互いに隣接して出現するのです。

テキスト部分で状況的知覚可能性を確立して、属性がコンパイル項目で指定された場合にのみそれが現れるようにすることができます。

選ぶ テキスト部分 （例：「都市」）
ラッチ解除 要素設定パネル > 状況認識可能性
「プラス” の右側にある ” 記号条件”
フィールドを決定する ほのめかした 最初のドロップダウンで品揃えを選択することができます。この例では 都市（所在地）
選ぶ 設定されています セカンダリドロップダウン内
節約する 規定

都市（場所）が設定されている場合にテキストブロック要素が表示されるように条件が追加されます。

この図では、ウェブサイトの訪問者が都市名をクリックしたときにアクセスできるようにしたい「地図リンク」も用意しています。これを実現するために、 テキストリンク 「市「フィールド」と「地図リンク"分野。

テキストリンクは、「マップリンク」フィールドから URL を取得し、「都市」フィールドからテキストを取得します。両方のフィールドは「イベント」コレクションにリンクされています。

一部の場所にマップリンクがない場合、進むべきリンクがないときにテキストリンクを表示したくないでしょう。このようなシナリオでは、条件付きの表示を利用できます。

追加することができます規定これに テキストリンク そのため、「地図リンク「言及された「場所」の品揃えの分野 設定されています (例: コンパイル項目にマップリンクが追加された場合)。

「地図リンク（場所）」が設定されている場合にのみテキストリンクが表示されるように条件を設定します。

次に、 テキストブロック （ではなく テキストリンク）を作成し、「City」属性にリンクします。その後、規定これの テキストブロック 「地図リンク" 分野 設定されていません。 この方法では、「場所」コンパイル項目に「マップリンク」が設定されていない場合、都市名のみ (リンクなし) が表示されます。

「地図リンク（場所）」が設定されていない場合はテキストブロックが表示されるように条件を設定します。

保証するために テキストブロック ラベルにインラインで記述する場合は、クラスを追加して プレゼンテーション に 列をなして.

インスタンス: 暗示された属性に基づく条件

これらすべての位置情報関連の指定と属性をdivブロック内に追加し、クラス名「位置情報の詳細」の下にスタイルを設定しました。限定された可視性を活用することで、これを保証できます。完了 div ブロックは、「イベント」アソートメント内の各イベントに「場所」参照属性が指定されている場合にのみ表示されます。これを実現するには、次の手順を実行します。

「場所の詳細」を選択します divブロック
ラッチ解除 要素設定パネル > 状況的可視性
「プラス” の右側にある ” 記号条件”
参照属性を選択します（例：「プライマリドロップダウンの「場所（参照）」
選ぶ 設定されています セカンダリドロップダウン内
節約する 規定

「場所（参照）」が設定されている場合にdivブロックが表示されるように条件を追加します。

ユアン・マック

Webflow エキスパートで Tenten

Webflow の専門家であり、4 年以上の経験を持つフロントエンド開発者です。私は、優れた Webflow エクスペリエンスを作成するために、汎用的なスキルセット (HTML、CSS、JS、Figma、Adobe) を活用しています。70 以上のプロジェクトを通じて、カスタムコードとビジュアル開発をシームレスに融合する能力を磨きました。組織的で、期限を守り、成長に情熱を注ぐ私は、ダイナミックな環境で優れた能力を発揮します。限界を押し広げて、素晴らしいものを作りましょう。

Ewan Mak による最新の投稿 (すべてを見る)

注意： 参照する 複数 別のコレクションのアイテム（例：著者名を参照する そして 経歴など) では、複数の紹介フィールドを使用します。