Divi 篩選教學：原生 Post Filter 與第三方外掛比較

Divi Filter 外掛的用途很單純：在 Divi 的作品集、文章與商品列表加上分類與自訂欄位的篩選按鈕，訪客點選後列表即時縮減、不必換頁重讀；作品或商品累積到幾十上百個時，有無這層篩選，直接決定訪客能不能在格線裡找到要的東西。

想像一下：你花了半年，拍了四十個室內設計完工案例，一張張上架到 Divi 作品集，全部排成漂亮的格線，自己越看越滿意。可是潛在客戶打開網站，僅想看「商業空間」那幾個案子，卻得從第一頁一路往後滑，邊滑邊猜哪一張才是他要的風格。滑到第三頁他就關掉了，你也永遠不會知道。

這就是「分類篩選」要解決的問題：讓訪客點一下標籤，網站就把不符合的項目藏起來，留下他要的內容。Divi Filter 外掛做的正是這件事，把這樣的篩選能力帶進作品集、文章與商品列表。Divi 內建的 Filterable Portfolio 模組已能依 Projects 分類篩選作品；Divi 5 的 Loop Builder 加 Post Filter 也可篩文章、自訂文章類型、ACF 欄位與 WooCommerce 商品屬性；若原生 UI、資料來源或工作流不符需求，再評估第三方外掛。這篇會把「何時用內建模組、何時選外掛、怎麼接上作品集和 WooCommerce 商品」一次講清楚。

先給你本篇精華。若使用 Divi 5，先測原生 Loop Builder／Post Filter；第三方候選再比較 DiviPlugins 的 FilterGrid（可篩文章、Projects、商品等文章類型，結果以 AJAX 載入），以及 Divi Engine 的 Divi Machine（能接自訂欄位與 WooCommerce、彈性最大）；若需要 JetEngine 的複雜欄位與專用 Listing Grid，可評估 Crocoblock 的 JetSmartFilters 與所需的 JetEngine 元件；FacetWP 則需另核對目前 Divi 整合方式。詳細怎麼挑、怎麼設，往下看。

這篇是為兩種人寫的。第一種是用 Divi 接案的設計師與架站者，客戶丟來一堆作品或商品，要你做出「點分類就過濾」的展示頁，但你還沒摸過篩選外掛、不知道從哪一套下手。第二種是自己架站的創作者或小店老闆，作品集或商品目錄已經累積到幾十上百個，發現訪客找不到東西、詢問度卡住，想用篩選改善卻怕踩雷。讀完之後，你會知道怎麼依自己的資料結構挑對外掛、怎麼把分類先規劃好再動手、以及怎麼避開效能與 SEO 的隱藏地雷。如果你連 Divi 本身都還不熟，建議先從Divi 主題完整指南打底，再回來看這篇會更順。

為什麼「全部擺出來」的設計正在吃掉你的轉換率

很多接案者有一個直覺：作品越多越有說服力，商品越多越能成交。於是把幾百個項目全部倒進一個頁面，用 Divi 的格線模組一路排下去。問題是，你的訪客不是來「瀏覽」的，他是來「找東西」的。這兩種行為需要的介面完全不同。

換個比喻：走進一家沒有分區的書店，所有書從文學到食譜全混在一起平鋪在地上，你要找一本克漏字參考書會瘋掉。但如果門口有一面「分類牆」，你點「語言學習」，書架上就僅剩語言書，體驗完全不一樣。篩選功能就是那面分類牆。

這不是感覺問題，而是手機時代的硬限制。根據 Statista 的統計（2026 年 4 月），全球網頁流量已經長期由行動裝置主導，手機螢幕一頁能塞的格線大概僅有兩三個，訪客根本沒有耐心用拇指連滑十幾頁。沒有篩選，等於逼手機用戶在沙堆裡淘金。

要不要加篩選，不能僅看項目數量。當訪客難以快速掃到目標，或內容有明確且常用的分類維度時，就值得測試篩選；反過來，項目少、差異一眼可辨時，硬加控制項反而會讓介面變擠。

先搞清楚你要篩的是什麼資料，再去挑外掛

常看到許多人反過來做：先聽說哪個外掛熱門就買下去，裝完才發現它不能接自己網站的資料結構。挑外掛之前，請先回答一個問題：你要過濾的那些「東西」，在 WordPress 後台到底是什麼？答案不同，能用的外掛就不同。

這件事之所以關鍵，是因為 WordPress 內容生態是分層的。同樣是「作品」，它可能是一篇文章、一個自訂文章類型（Custom Post Type, 簡稱 CPT）的 portfolio 項目、或是一個 WooCommerce 商品。篩選外掛要能讀懂哪一種資料、讀懂它的分類法（taxonomy）或自訂欄位（custom field），才有辦法做過濾。讀不懂，再貴的外掛也沒用。

一句話總結：資料來源決定外掛選擇，不是反過來。判斷完這一題，下面的外掛比較你才看得懂誰適合你。

三套主流 Divi 篩選外掛，誰適合誰

市面上能跟 Divi 搭的篩選方案不少，以下把實際會被拿來比較的三套攤開來看。先說一個背景：WordPress 在全球內容管理系統的佔有率長年超過四成（依 W3Techs 的統計，2026 年 6 月），而 Divi 是 Elegant Themes 旗下最主流的頁面編輯器主題之一，圍繞它的第三方外掛生態非常成熟。所以你不缺選擇，缺的是選對。

如果只是替作品集加入按分類過濾的格線，FilterGrid 是可評估的 Divi 外掛之一。它會在 Visual Builder 中加入 Divi 模組，設定面板也整合在 Divi 介面裡（見 DiviPlugins 的 FilterGrid 產品頁）。購買前仍應確認當期價格、授權站數、更新政策與退費條件。

Divi Machine 走的是另一條路。它不僅是一個格線，而是一套「替 Divi 建立自訂文章類型＋自訂欄位＋篩選」的完整引擎，Divi Engine 的 Ajax Filter 模組可以讓訪客同時勾選坪數、縣市、價格帶，結果即時更新不換頁。代價是學習曲線比較陡，而且你得先把自己的資料欄位規劃好。

JetSmartFilters 則是「獨立 facet 引擎」的代表，篩選條件可以做成下拉、核取、滑桿、階層連動等多種 UI，若在 Divi 5 使用，官方教學要求 JetEngine、JetSmartFilters 與 JetEngine Divi Views addon；再依 Listing Grid 的資料來源設定自訂欄位篩選（見 JetSmartFilters 產品頁）。篩選條件多到像電商濾鏡時，它會比單純的作品格線模組更合適。FacetWP 也是同類思維，按年授權計價，適合不想被綁在單一模組生態的人。

實務上的判斷是這樣：若已使用 Divi 5，先評估原生 Loop Builder 與 Post Filter；原生功能不足時，再依資料來源與條件測試 FilterGrid 或 Divi Machine，跨頁面重度篩選再考慮 JetSmartFilters／FacetWP。先別為了「功能最多」就買重砲，若只需簡單的分類篩選，先試原生 Post Filter；若想要 FilterGrid 的格線與互動設定，再在測試站比較功能、效能和授權。

挑篩選外掛時，該逐項檢查的四個關鍵

外掛比較表給你的是概況，但真要下手前，建議把每個候選外掛丟到這四個檢查點上跑一遍。這四點沒顧到，買回來裝上去才發現不能用，退費又麻煩，不如事前花十分鐘查清楚。

第四點特別要提醒。Divi 5 已於 2026 年 2 月正式推出，第三方模組是否提供 Divi 5 相容版本，會直接影響升級風險（可對照 Elegant Themes 的 Divi 5 更新狀態頁）。買之前先看更新紀錄、目前相容版本與支援文件，並在測試站驗證既有篩選行為。想理解 Divi 5 帶來的改變，可以先讀Divi 5 介面解析。

快取相容性這關也常被忽略。Ajax 與快取如何互動取決於外掛的端點、參數和快取設定。FilterGrid 自身有篩選／分頁結果的 AJAX 快取選項；上線前應用不同條件與訪客狀態測試結果是否正確，再依文件調整快取，不能預設所有頁面快取都會造成跨訪客混用。這部分細節可一併參考WordPress 快取外掛的處理原則。

把這四點過完，你選的外掛才會是「能用、能久用、不會在某次升級後背叛你」的選擇，而不是僅看 Demo 漂亮就刷卡。

用 FilterGrid 替作品集加上分類篩選的完整流程

接下來以作品集當範例，帶你走一遍 FilterGrid 的設定。WooCommerce 那條路會在下一節另講，因為兩邊的資料結構不同。還沒裝過任何外掛的話，安裝流程跟一般 WordPress 外掛一樣，可以參考完整的WordPress 外掛安裝教學。

第一步：先把作品的分類法建好

這一步九成的人會跳過，然後就出事。篩選外掛是「讀你的分類」來運作的，你後台的分類長什麼樣，前台的篩選標籤就長什麼樣。所以進外掛之前，先到 WordPress 後台把作品的分類建乾淨。

這裡要舉一個常見的教訓：室內設計公司的 Divi 作品集，分類若用得很隨興，新案子上架就隨手丟一個類別，有人寫「住宅」、有人寫「住家」、還有「居家」三種並存。等到要接篩選時才發現，同一種案子被拆成三個標籤，篩選出來的結果永遠是殘缺的，前台看到「住宅」僅會出現三分之一的案子。最終往往得花一整個下午把幾百個案子重新歸類才救得回來。

所以請記住：分類的一致性，比外掛本身更重要。分類命名要統一、不要重疊，這件事在分類排序與整理裡有更系統化的做法，建議動手設篩選之前先讀過。

第二步：安裝並啟用 FilterGrid

從 DiviPlugins 官網購買後會拿到一組下載 zip 與授權碼。在 WordPress 後台「外掛 → 安裝外掛 → 上傳」把 zip 上去、啟用，再到設定頁貼上授權碼啟用更新。這部分沒有什麼懸念。

第三步：在 Visual Builder 加入 FilterGrid 模組

打開你要放作品集的那一頁，進入 Divi Visual Builder，新增一個 Row，在欄位裡「＋」加入模組，選 FilterGrid。它的設定面板會出現在 Divi 原生的設計介面裡，跟你在調一個 Image 或 Text 模組完全一樣的操作習慣。

面板裡有幾個欄位是成敗關鍵：

• Query Options（資料來源）：在 Query Options 選 Basic、Advanced 或 Custom；文章可用 Basic，自訂文章類型則用 Advanced 選 Post Types，並核對 taxonomy 和查詢結果。
• Filter Options（分類來源）：指定要用哪一組分類當篩選標籤，通常是你剛剛建好的那組。
• 篩選 UI 樣式：先在 Filter Options 設定要顯示的 taxonomy／term、順序及預設篩選；多層或多選需求再查看官方 MultiLevel／MultiSelect 設定，勿假設只有三種固定 UI。
• 格線欄數與間距：桌機三到四欄、手機一欄是安全值。
• 點擊行為：點作品是開燈箱（lightbox）還是跳到單篇頁，看你希望訪客往下走多深。

設定完存檔，前台就會出現「點分類、格線自動過濾」的效果。FilterGrid 官方文件指出初始只載入 Post Number 指定的項目，點擊其他篩選時通常以 AJAX 取回結果；是否閃動或卡頓仍要在目前版本、網路與快取設定下實測。這個細節跟效能和 SEO 有關，後面有專門一節講。

第四步：檢查空狀態與行動版

很多人設定完就收工，忘了兩個小地方。第一，當訪客勾到沒有結果的條件時，若未設定提示，畫面可能空白，讓人誤以為網站出錯。可在 Query Options 的 Empty Results Text 設定空狀態文字，再實際點選無結果條件測試。第二，手機上的篩選標籤如果太多，會把第一屏塞滿，訪客連作品都還沒看到就被標籤擠掉，這部分要搭配行動版排序一起處理，可參考Divi 手機版排序的做法。

設定完上線前，該逐項檢查的四個小毛病

FilterGrid 設定不難，但上線前有四個小毛病最常讓作品集看起來「怪怪的」，建議每次上線前都逐項點開來看：

• 排序對不對：預設可能用發佈日期排，但你可能希望最新案子在最前面、或依專案年份排。記得到設定裡把 Order By 調成你要的欄位，否則客人會以為你很久沒更新。
• 縮圖比例不一致：作品圖如果直拍、橫拍混雜，又沒統一裁切比例，格線會高高低低像缺角的牙齒。FilterGrid 可以設統一的 aspect ratio，強制裁切成相同比例，這是視覺整齊度的關鍵。圖片壓縮的觀念可一併參考圖片壓縮工具。
• 分類標籤出現重複或空殼：後台若殘留沒歸到任何作品的分類，或同義分類沒合併，篩選列會出現「點下去卻空的」或「兩個長一樣」的標籤，看起來很業餘。上線前把每個分類都點一輪確認有內容。
• 點入單篇的連結對不對：有些案子你可能忘了設特色圖或連結，點下去是 404 或空白頁。每個篩選分類至少抽一個點進去，確認能正常開啟。

這四項檢查能及早發現常見呈現問題；實際耗時與發現比例因內容量及站點設定而異。把這當成上線前的固定儀式，作品的呈現品質會穩定很多。

把篩選接到 WooCommerce 商品頁

作品集走 CPT 分類，相對單純；電商就不是這回事了。WooCommerce 商品有自己的屬性系統（顏色、尺寸、材質），還有價格、庫存、標籤這些維度，篩選條件往往一疊就是四五層。這也是為什麼 WooCommerce 在全球電商系統的佔有率長期領先（依 W3Techs 的統計，2026 年 6 月），圍繞它的篩選方案也最成熟。

在 Divi 5 做商品篩選，先試 Loop Builder 搭配 Post Filter：官方已列出商品分類、屬性、價格範圍、庫存等控制。若需要特定 UI 或外部資料流程，再測 Divi Machine 或 JetSmartFilters；FilterGrid 也能顯示 WooCommerce 商品，不能一概排除。

實際接法的概念是這樣：你先確定商品要用哪些屬性被篩選（例如服飾就是顏色、尺寸、價格帶），然後在 WooCommerce 後台把這些屬性設好，再到篩選外掛裡指定「這個 facet 讀商品屬性、那個 facet 讀價格」。設定完，商品列表頁就會出現一組可疊加的篩選器，訪客同時勾「黑色＋M＋500 元以下」，清單即時收斂。

舉個具體一點的例子幫你抓到感覺。假設你經營一間選品服飾店，商品有兩百件，涵蓋上衣、外套、褲子、配件四大類。你會希望訪客能依「品類」先分流，再依「顏色」「尺寸」「價格帶」精修。在 WooCommerce 後台，你要先把這些設定成全域屬性（Products → Attributes），例如建一個叫「顏色」的屬性，底下展開黑、白、灰、卡其等值；建一個叫「尺寸」的屬性，展開 XS 到 XL。然後在每個商品頁勾選它具備的屬性值。這一步做完，篩選外掛才有料可以讀。

這裡有個新手常踩的小雷：屬性（attribute）跟分類（category）是不一樣的東西，不要混用。分類是「這件商品屬於哪一類」，每件商品通常僅歸一類；屬性是「這件商品具備哪些特徵」，可以多選。把顏色設成分類會讓後台結構爆炸，一件黑色 M 號上衣會被歸到「上衣／黑色／M 號」這種荒謬的多層分類裡。記住：分類管歸屬，屬性管特徵，兩者各司其職，篩選才會乾淨。

這裡有一個常被看漏的重點：商品篩選的結果頁，本身也是 SEO 的著力點。只有具獨立搜尋需求、足夠內容且可檢索的篩選結果頁，才值得評估開放索引。Ajax 不等於可索引 URL；大量顏色 × 尺寸組合反而可能浪費檢索資源，應依 Google 的分面導覽指南規劃。更完整的商品頁 SEO 思維，可以搭配WooCommerce 商品頁 SEO一起看；整體開店流程則參考WooCommerce 購物網站架設。

分類結構才是成敗關鍵，不是外掛本身

前面提過那個室內設計案例的教訓，這裡要把它講成一個原則：篩選體驗同時取決於資料分類、查詢能力和介面；沒有通用的七三比例。再貴的外掛，也救不了一組亂掉的分類。

規劃分類時，有兩個極端都要避開。第一種是「扁平到沒有層次」，例如把一百個作品全丟進十個平行的分類，訪客面對十個按鈕，每個都很多項目，等於沒篩。第二種是「深到迷宮」，分類套分類套到第四層，訪客點到一半忘了自己在哪。分類深度應以訪客任務和內容量決定；可先用用途分類，再依需要加子分類或獨立的風格篩選，不必硬守兩層。

用同一個室內設計例子把「壞結構」跟「好結構」擺在一起看，你會更有感覺。壞結構長這樣：分類有「住宅」「住家」「居家」「商空」「商業」「辦公」「public」「北歐」「現代」「工業」混在一起，有的用口語、有的用英文、有的依風格、有的依用途，完全沒有統一邏輯，篩選列一拉開像菜市場。好結構長這樣：主分類僅有三個（住宅、商業空間、公共空間），風格改用標籤處理、不佔用分類欄位，因為同一個案子可能既是住宅又是北歐風，把它放在「風格」這個標籤維度，才能跟用途分類並存而不打架。這樣訪客先依用途分流、再依風格精修，兩個維度各司其職。把分類跟標籤的角色分清楚，是這件事的核心，也是後續不管換哪一套外掛都不會亂的根基。

幾個判斷原則給你參考：

• 互斥原則：若主分類代表互斥用途，定義要清楚；但作品也可能合理屬於多個 taxonomy 或標籤，應由訪客的篩選任務決定。
• 數量均衡：查看各選項實際結果數，避免重要選項長期無內容；分類不必為了平均而拆分或合併。
• 用訪客的語言命名：分類名要用客戶會搜尋、會脫口而出的詞，不要用業內黑話。室內設計客戶會說「北歐風」，不會說「斯堪地那維亞極簡主義」。
• 預留成長空間：開站時分類不要一次切太細，等內容累積夠了再加層，否則前期很多分類僅有一兩個項目，看起來很空。

這套思維跟「主題叢集」的內容架構其實是同一件事：你怎麼組織資訊，決定了訪客（和搜尋引擎）能不能快速理解你網站在賣什麼、做什麼。把這層想清楚，外掛僅是把你的結構呈現出來的工具而已。

篩選 vs 站內搜尋，什麼時候該用哪一個

很多人把篩選跟站內搜尋混為一談，以為裝了搜尋框就不需要篩選，或反過來。這兩個是不同的東西，服務的是不同的使用情境，用錯場景體驗都會卡。以下把它們拆開來看。

篩選是「導覽」。它的前提是你已經知道內容可以被分成哪些面向（風格、地區、價格帶），訪客從你提供的標籤裡挑選，逐步縮小範圍。它的心智負擔低，因為選項是你給的、固定的，訪客不用自己想關鍵字。適合用在分類清晰、選項可控的場景，例如作品集、商品目錄。

站內搜尋是「探索」。它把發球權交給訪客，讓他自己輸入想找的詞。它的彈性高，能處理你分類沒想到的長尾需求（例如訪客直接搜「工業風小坪數」），但代價是訪客要會打字、要會描述自己的需求，而且搜尋結果的品質完全取決於你後台的內容與搜尋引擎。適合用在內容量大、需求分散的場景。

內容量大、名稱適合直接查找時，可以讓搜尋與篩選合作。例如訪客先搜「沙發」，再用篩選限定「灰色」「三人座」「兩萬以下」。要不要同時提供兩者，應看內容規模、分類方式與站內搜尋紀錄，不必用固定件數當門檻。如果你的站還沒做站內搜尋，WordPress 也有現成的搜尋外掛，先裝一套滿足訪客直接打關鍵字的需求，再來考慮怎麼跟篩選搭配。

也因此，不建議把篩選外掛當成萬靈丹。它解決的是「分類導覽」這一塊，不是全部的找東西需求。把它的邊界畫清楚，你才不會對它有錯誤期待。

篩選介面的五個細節，決定好不好用

外掛裝好了、分類也建好了，不等於篩選就好用。魔鬼藏在介面的五個小細節裡，這些是上線前一定要逐項檢查的：

這五點看起來瑣碎，但加起來就是「順手」跟「卡卡」的差別。行動版尤其重要，因為手機螢幕小，篩選器放錯位置，訪客根本找不到入口，等於沒做。RWD 的整體觀念可以一併參考響應式網頁設計。

Ajax 篩選對效能與 SEO 是兩面刃

評估篩選效能時，要看初始載入多少資料、點選條件是否發出請求，以及結果有沒有穩定 URL。以下用兩種常見資料取得方式說明；實際外掛也可能混用本地結果與 AJAX。

第一種是 初始載入整批資料後在瀏覽器過濾，這種實作在項目多時可能增加首屏傳輸。FilterGrid 官方文件描述的預設流程不同：先載入 Post Number 指定的項目，點其他篩選時通常以 AJAX 取回結果。不要因介面「免重整」就推論其資料一定全在前端。

第二種是 按條件向伺服器請求結果，FilterGrid、Divi Machine 與部分其他方案都會用到 AJAX。這可控制初始載入量，但每次操作仍有網路請求；是否能索引篩選結果，取決於可檢索 URL、伺服器回應、內容價值與檢索政策，不由 AJAX 這個技術名稱決定。

為什麼這件事跟 SEO 有關？Google 可執行 JavaScript，但仍建議確認重要內容和連結在 Google 實際渲染後可見；不能直接把使用 JS 等同排名下降（見 Google 的 JavaScript SEO 基礎知識文件）。若篩選條件只存在頁面狀態、沒有可連結的分類或結果 URL，就不應假設每種組合都有獨立搜尋入口；先保留有價值的分類頁，再決定哪些分面 URL 值得開放。

速度這關也躲不掉。網頁載入會影響使用者留存與轉換（見 web.dev 的研究，2026），Core Web Vitals 則是 Google 排名系統中的小幅訊號。作品或商品有幾百個時，client-side 一次載入全部資料可能拖慢初始呈現；應以實測的 LCP、請求量與裝置表現判斷。完整觀念可參考Core Web Vitals 與 SEO和網站速度優化。

那到底怎麼選？實務判斷是這樣：

• 列表項目少、分類簡單：先試 Divi 5 原生 Post Filter 或現有方案；量測初始項目數、請求量與實際點擊反應，不以 30 件當通用門檻。
• 商品／作品量較大且有搜尋需求：優先保留可連結的分類與商品頁；若要開放少數分面結果收錄，檢查 URL、頁面內容、重複組合與檢索成本。AJAX 不會自動產生可收錄頁。
• 僅供站內操作的篩選：以訪客實測的回應時間和資料量選方案，並控制不需搜尋曝光的分面 URL；不能單憑 client-side 或 AJAX 判定哪個較快。

不論篩選是在瀏覽器或用 AJAX，只要希望特定結果頁獲得搜尋曝光，就要先處理兩件事。第一是 URL 結構：有獨立搜尋需求的條件應有穩定可連結網址（例如 ?style=北歐風&type=商空）；其餘組合不必全數開放檢索。若網址不變或僅以片段識別（#）切換，通常不會形成獨立可檢索的篩選結果頁；這對只供站內使用的篩選未必是缺點。第二是 分頁與 lazy load 的搭配：作品幾百個時，全部塞一頁會拖垮速度，通常會搭配分頁或「捲動到底部自動載入下一批」的機制。這裡要小心，只靠使用者捲動觸發、沒有可連結分頁 URL 的後續內容，Google 可能無法發現。依 Google 指南為各批次提供穩定 URL 和順序連結，並檢查實際渲染內容。

這裡還有一個常被低估的成本要提醒你：篩選結果頁如果允許搜尋引擎收錄，理論上會產生大量「排列組合」出來的網址（顏色 × 尺寸 × 價格），其中很多組合可能重複或無內容；Google 的 分面導覽指南指出，大量組合網址會耗用檢索資源，可能拖慢重要新頁面的發現。實務上的折衷是：僅讓「有實質搜尋需求」的篩選組合被收錄，不需進入搜尋的組合，可按 Google 指南考慮以 robots.txt 阻止檢索，或以 URL fragment 呈現站內狀態；canonical 只是較弱的偏好訊號，不能把 noindex 當成節省檢索的通用解法。檢索預算的完整觀念可以參考檢索預算與 SEO。這個取捨沒有放諸四海皆準的公式，要看你的內容量與流量結構抓比例。

這個取捨沒有標準答案，關鍵是你要「知道自己選了哪一邊、為什麼」。盲目裝上去就上線，通常會在半年後流量沒起色時才回頭找原因，那時候要改就累了。

三個最常見的坑，你別再踩

收尾把實務上最常出問題的三個地方講清楚。

第一個坑：分類過度巢狀。常見一種情況是作品被硬分到第四層（作品 → 住宅 → 大樓 → 兩房 → 北歐風），結果篩選標籤像俄羅斯娃娃一層包一層，訪客點到第三層就放棄了。應先檢查各層是否符合訪客任務、選項能否理解，並在手機版實際測試。若有多層導覽，應提供清楚的返回入口；不存在普遍適用的兩層上限。

第二個坑：重複的篩選維度。同一個頁面同時放了「風格」和「風格類型」兩組看起來一樣的篩選，訪客根本分不出差別，勾了 A 又勾 B 結果互相衝突。原因是分類和標籤用了重疊的概念。設定篩選前，先把每個維度的定義寫清楚，任何兩個維度不能讓訪客產生「這兩個有什麼不一樣」的疑問。

第三個坑：忘了測「沒有結果」的情況。上線前刻意選一組無結果條件，查看提示、清除條件及返回入口是否明確。若畫面空白，訪客可能以為網站故障；FilterGrid 可在 Query Options 的 Empty Results Text 設定提示。

這三個坑的共同點是：真正的問題都不在外掛本身，根源在「規劃沒做好」。外掛會乖乖照你給的結構運作，所以結構錯了，它就忠實地呈現一個難用的介面給你。

從今天開始的三步行動方案

讀到這裡，別急著把一堆外掛名字記下來，更建議你立刻動手做三件事。下面是建議走的優先順序：

1. 盤點你現有的分類結構：打開後台，把你作品或商品的分類全部列出來，檢查有沒有重疊、有沒有命名不一致、有沒有一個分類擠爆而另一個空蕩蕩。實務上的做法是把分類攤開成一張表，每個分類後面寫上目前的項目數，把空分類、同義分類與訪客常用卻難找的分類標記出來；是否拆分要看搜尋與導覽需求，不用固定件數。這一步不用花錢，卻決定了後面一切。
2. 依資料來源挑一個外掛試裝：Divi 5 網站先測原生 Loop Builder＋Post Filter；原生功能不符時再依資料來源測 FilterGrid、Divi Machine 或 JetSmartFilters。先用一個小分類試跑，確認篩選行為符合預期，再套到全站。裝之前記得先備份網站，任何新外掛都該在備份保護下安裝，出問題時才能依已驗證的備份或還原流程復原。
3. 上線前逐項檢查那五個介面細節：UI 形式、選中狀態、結果計數、清除全部、行動版位置。同時補上空狀態訊息，並在手機實機上點一輪，確認體驗順暢。

把這三步走完，你的 Divi 作品集或商品頁，就會從「全部擺出來讓人自己找」升級成「點兩下就看到他要的」。訪客留得住、轉換率提得上，這才是篩選功能真正的價值。

如果你在挑外掛或規劃分類時卡關，不知道自己的網站適合 client-side 還是 server-side、也不確定分類結構怎麼切才不會半年後打掉重練，這類「動手前先把藍圖想清楚」的活，正是 Whoops SEO 平常在幫網站做的事。把你的網站跟困難丟過來，我們一起把結構理順，這是選項，不是義務。