Wix 說明
首頁
文章庫
建立網站
進階功能
CMS
將使用者輸入元件連結至 CMS

CMS：使用輸入元件讓訪客篩選內容

13 分鐘
使用下拉式選單或選項按鈕等輸入元件，讓網站訪客篩選重複器、圖庫和資料表中顯示的內容。本文將說明如何把輸入元件連結至資料集，透過資料集將 CMS（內容管理系統）集合連結至已上線網站的內容。

每個輸入元件都會連結至特定集合欄位，並將該欄位的獨特值顯示為篩選選項。訪客選擇篩選選項後，已連結的重複器、圖庫或資料表只會顯示欄位值相符的項目。也可新增條件式篩選條件來變更篩選行為。例如，新增「不是」條件，即可建立篩選條件，顯示與訪客所選項目不符的項目。

根據預設，訪客選擇篩選條件後，內容會立即變更。如果只想在訪客點擊其他按鈕後套用篩選條件，可新增「套用篩選條件」按鈕。也可新增重設按鈕，讓訪客點擊即可立即清除已設定的所有篩選條件。
開始之前：
包含篩選元件和「清除篩選條件」按鈕的頁面畫面，其中按鈕已連結至重設輸入值功能。
注意：

Wix Harmony 編輯器不支援輸入元件，因此訪客無法篩選內容或提交項目至集合。若要收集訪客資訊，請改用 Wix Forms 新增表單。深入了解在 Wix Harmony 中運作方式不同的功能。

步驟 1｜新增用於篩選內容的輸入元件

前往編輯器中要讓訪客篩選重複器、圖庫或資料表所顯示內容的頁面。接著，新增要讓訪客用來篩選內容的輸入元件。如果新增多個輸入元件，可將每個元件設為篩選不同的集合欄位。

可使用下列支援篩選的輸入元件：選項按鈕、核取方塊、下拉式選單、選擇標籤或滑桿（僅限範圍滑桿）。請留意，每個輸入元件可篩選的欄位類型都有限制。
  1. 前往編輯器。
  2. 前往包含要讓訪客篩選之重複器、圖庫或資料表的頁面。
  3. 點擊編輯器左側的「新增元件」。
  4. 點擊「輸入」。
  5. 在「選擇」下方，點擊要讓訪客用來篩選內容的輸入元件類型。可選擇下列支援篩選的元件：選項按鈕、核取方塊、下拉式選單、選擇標籤或滑桿（僅限範圍滑桿）。
  6. 點擊相關輸入元件，並將其拖曳至頁面。
在編輯器中新增下拉式選單元件的畫面。
  1. （選填）重複上述步驟 3 至 6，新增更多供訪客篩選內容的輸入元件。

第 2 步｜將輸入元件連結至 CMS

將各輸入元件連結至與中繼器、圖庫或資料表相同的資料集，然後選擇各輸入元件要篩選的集合欄位。輸入元件會顯示所連結集合欄位中的每個不重複值。訪客在輸入元件中選擇選項後，中繼器、圖庫或資料表只會顯示符合所選欄位值的項目。

您也可以新增套用至篩選條件的條件式篩選。例如，新增「不是」、「不等於」或「不包含」 條件，建立可顯示不符合訪客所選欄位值之項目的篩選條件。新增條件後，輸入元件的欄位標題和預留位置文字會自動調整，讓訪客了解篩選條件的作用（例如「依欄位排除」）。
資料集篩選和排序對輸入元件的影響：

輸入元件會連結至資料集，由資料集擷取所連結集合欄位中的內容。如果在資料集中新增篩選條件來排除項目，系統便不會將已排除的項目及其欄位內容傳送至輸入元件。這表示輸入元件只會顯示資料集所包含項目中的不重複欄位值。

排序條件的運作方式不同：設為篩選內容的輸入元件，其選項一律按照字母順序（A 到 Z）顯示，不受資料集中新增的排序影響。投票支持選項排序功能。

  1. 在編輯器中，點擊剛新增的輸入元件。
  2. 點擊「連結至 CMS」圖示 。
  3. 點擊「篩選內容」。
將輸入元件連結至 CMS 時，選擇「篩選內容」選項的畫面截圖。
  1. 點擊「選擇資料集」下拉式選單，選擇與要讓訪客篩選的中繼器、圖庫或資料表相同的資料集。
  2. 點擊「篩選內容依據」下拉式選單，選擇訪客要用來篩選顯示內容的集合欄位。
  3. （選填）新增會影響篩選條件運作方式的條件：
    1. 點擊「進階篩選」。
    2. 點擊「條件」下拉式選單，選擇控制篩選條件套用方式的運算子（例如不是、不等於、不包含）。
      注意：可用條件會因輸入元件類型和所連結的欄位類型而異。詳情請參閱下方各輸入元件的進階篩選條件部分。
設為篩選內容的下拉式選單輸入元件，其 CMS 連結選項畫面截圖。
  1. 針對要讓訪客用來篩選內容的每個輸入元件，重複上述步驟。
  2. 點擊「預覽」，測試將輸入元件用作篩選條件。
  3. 若已準備好讓變更上線，請點擊「發布」。

進階篩選條件

點擊下方選項，查看各輸入元件可用的進階篩選條件：
將範圍滑桿設為篩選內容時，「進階篩選」條件的畫面截圖。

（選填）步驟 3｜新增套用篩選條件的按鈕

若只想在訪客點擊其他按鈕後，才套用所選的篩選條件，可建立「套用篩選條件」按鈕。訪客點擊此按鈕後，系統會套用所有已選擇的輸入元件篩選條件。若未新增此按鈕，訪客在各輸入元件中選擇篩選條件時，系統會立即套用。
  1. 點擊編輯器左側的「新增元件」圖示 。
  2. 點擊「按鈕」。
  3. 點擊要用來套用篩選條件的按鈕，並將其拖曳到頁面上。可使用以下任一按鈕類型：「主題按鈕」、「文字和圖示按鈕」、「圖示按鈕」 或「圖片按鈕」。
    提示：也可新增圖片，並將其用作「套用篩選條件」按鈕。
  4. 點擊「變更文字」，並輸入要顯示在按鈕上的文字（例如「套用篩選條件」）。
  5. 點擊「連結至 CMS」圖示 。
  6. 點擊「選擇資料集」下拉式選單，並選擇與重複項目、圖庫或資料表連結的同一個資料集。
  7. 點擊「點擊動作連結至」下拉式選單，並選擇「套用篩選條件」。
「連結按鈕」面板的螢幕截圖，其中「點擊動作連結至」設為「套用篩選條件」。
  1. 點擊按鈕，再選擇「設計」圖示 ，自訂「套用篩選條件」按鈕的外觀。
  2. 點擊「預覽」，測試「套用篩選條件」按鈕。
  3. 若已準備好讓變更上線，請點擊「發布」。

（選填）步驟 4｜新增重設按鈕

可建立重設按鈕，讓訪客點擊即可重設所有已選擇的輸入元件篩選條件。如此一來，訪客無須重新整理頁面，即可重新篩選內容。
  1. 點擊編輯器左側的新增元件。
  2. 點擊按鈕。
  3. 點擊要設為重設按鈕的按鈕並拖曳至頁面。可使用以下任一按鈕類型：主題按鈕、文字與圖示按鈕、圖示按鈕、或圖片按鈕。
    提示：也可以新增圖片，並將其設為重設按鈕。
  4. 點擊變更文字，並輸入要在按鈕上顯示的文字（例如「重設篩選條件」）。
  5. 點擊連結至 CMS 圖示 。
  6. 點擊選擇資料集下拉式選單，然後選擇連結至重複內容、圖庫或資料表的同一個資料集。
  7. 點擊點擊小部件連結至下拉式選單，然後選擇重設輸入值。
選擇項目的畫面截圖
  1. 點擊按鈕，然後選擇設計圖示 ，即可自訂重設按鈕的外觀。
  2. 點擊預覽，測試重設按鈕。
  3. 若已準備好讓變更上線，請點擊發布。

常見問題

點擊下方問題，即可查看使用輸入元件篩選內容的常見問題答案。