開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
placeholder-preview-image

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

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

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

根據預設,訪客選擇篩選條件後,內容會立即變更。如果只想在訪客點擊另一個按鈕後才套用篩選條件,可新增「套用篩選條件」按鈕。也可新增重設按鈕,讓訪客點擊即可立即清除所有已設定的篩選條件。
開始之前:

步驟 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. 若已準備好讓變更上線,請點擊「發佈」。

常見問題

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