Divi Filter 外掛教學：分類篩選功能讓作品商品一目了然
Divi Filter 外掛是一類專為 Divi 主題設計的擴充外掛，能在作品集、部落格文章、WooCommerce 商品上方加上分類、標籤與自訂欄位的篩選按鈕，訪客點擊後列表即時…
Divi Filter 外掛是一類專為 Divi 主題設計的擴充外掛，能在作品集、部落格文章、WooCommerce 商品上方加上分類、標籤與自訂欄位的篩選按鈕，訪客點擊後列表即時縮減、不必重整整頁。Divi 是目前全球使用量最大的付費 WordPress 主題之一，數百萬個網站採用，因此圍繞它延伸的篩選外掛也形成兩大主流：DiviPlugins 出品的 FilterGrid，以及 Divi Engine 的 Ajax Filter（屬 Divi Machine）[來源：DiviPlugins〈FilterGrid〉〈https://diviplugins.com/plugins/filter-grid/〉〈2026〉]。換句話說，它補的是 Divi 原生缺少的進階篩選能力。
把視野拉到整個 WordPress 生態，能更理解這類外掛為何重要。WordPress 本身驅動了 41.5% 的所有網站，在已知內容管理系統的網站中更高達 59.2% [來源：W3Techs〈Usage Statistics and Market Share of WordPress〉 https://w3techs.com/technologies/details/cm-wordpress 2026-06-29]。在這個龐大的基數裡，Divi 長期是市占最高的付費主題之一，依附在它之上的篩選外掛因此擁有一個穩定且龐大的需求層。這也解釋了為何 FilterGrid 與 Ajax Filter 都把資源投入在「與 Divi 深度整合」而非追求跨主題通用：對大多數 Divi 站長來說，能在熟悉的 Visual Builder 裡直接插入模組，遠比功能更全卻要另學一套設定邏輯的方案更實際。
篩選外掛的真正用途，從來不是「把列表變好看」，而是把分散在文章、自訂文章類型、商品裡的內容，轉成訪客可按分類、標籤、價格、自訂欄位即時縮減的動態列表。商品一多就難找的網站，它決定的是訪客停留 5 秒離開，還是留下來看到第 3 頁。如果你才剛接觸 Divi 本體，建議先讀過 Divi 主題架站全攻略，或參考 必裝的 Divi 外掛清單 把生態系看清楚再回來。
重點先看：Divi 篩選外掛的核心不在按鈕，而在分類與自訂欄位有沒有先建好；免費版能撑住多數中小型站，真正需要付費的訊號是商品破百且要複合條件篩選，而 Divi 主題本身被數百萬個網站採用 [來源：Elegant Themes〈Divi〉〈https://www.elegantthemes.com/gallery/divi/〉〈2026〉]。
Divi Filter 外掛在做什麼
Divi 的篩選外掛到底在做什麼？它跟一般列表差在哪？答案是：一般列表是靜態排序，內容依你預先設定的條件排好後就固定不動；篩選外掛則讀取 WordPress 的分類、標籤、自訂欄位（例如 ACF 建立的價格、顏色欄位），讓訪客在前端自己決定要看哪些內容。按一下「品牌設計」這顆按鈕，整個作品集網格立刻只剩品牌類作品，沒有整頁重新載入的等待。要理解這個定位，最好先有 Divi 主題終極指南 的背景。
很多人以為篩選就是「加幾顆按鈕」，這個想像漏掉一件關鍵的事：按鈕背後的資料來源。篩選外掛本身不生產內容，它只是把已經存在 WordPress 裡的分類與欄位讀出來、做成可點的介面。分類沒建、欄位沒填，再貴的外掛也篩不出半件東西。這也是我把這篇定位成「分類工程」而非「外掛開箱」的原因：分類體系決定了篩選能做到什麼程度，外掛只是把既有的資料搬上前台。把 Divi 生態摸熟一點，會更清楚篩選外掛的位置。
- 定位：Divi 主題的擴充外掛，補上 Divi 原生缺少的進階篩選功能，與 Divi 輪播外掛推薦 屬不同任務。
- 運作原理：讀取分類、標籤、自訂欄位（ACF 等），即時過濾網格列表。
- 常見用途：作品集依類型篩選、商品依價格或顏色縮減、文章依主題過濾。
- 與 Divi 內建網格的差異：內建只能依分類靜態排列，外掛可做多條件即時篩選。
- 市面主要有兩家：DiviPlugins 的 FilterGrid（免費加 Pro）、Divi Engine 的 Ajax Filter（屬 Divi Machine，偏付費）。
從使用者行為看篩選的價值
退一步看，篩選外掛解決的其實是「選擇過載」這個老問題。當一個作品集只有 20 件作品，訪客捲動一下就看完了，篩選的邊際效益有限；但當商品累積到上百件、文章累積到數百篇，沒有篩選幾乎等於逼訪客離開。研究消費者行為的資料反覆顯示，過多的選項會降低決策意願而非提高，這也是為什麼大型購物網站幾乎都把篩選做成核心功能而非選配。對用 Divi 架站的中小型站長來說，這個訊號很實際：你不必等到商品破百才開始想篩選，但你必須等到分類建好之後才有資格談篩選。
這裡我會誠實承認一個限制：篩選能提升停留時間與轉換率的說法，多數來自電商平台的個案報告，缺乏針對 Divi 篩選外掛的獨立實驗資料。因此我不會寫「加裝篩選外掛能提升幾成轉換」這種沒有依據的數字。能確定的是邏輯鏈：商品多、沒篩選、訪客找不到、提早離開。這條鏈成立，後面才值得討論裝哪一款。如果你想看完整建站脈絡，WordPress 架站新手教學 與 30 分鐘快速架 WordPress 都有涵蓋。
FilterGrid、Ajax Filter 與其他篩選外掛的選擇
Divi 篩選外掛那麼多，到底該選哪一款？給多數人最直接的答案：先用 DiviPlugins 的 FilterGrid 免費版。它能處理作品集、文章與基本商品的分類標籤篩選，中文相容性也沒問題；當你需要複合條件（價格區間加顏色加尺寸）、進階網格樣式或 Ajax 即時過濾，再考慮升級 FilterGrid Pro 或改用 Divi Engine 的 Ajax Filter；非 Divi 用戶或要更強大自訂的，則看 FacetWP、JetSmartFilters 這類跨主題方案。底下這張比較表把差異攤開來看，比逐家研究省時間。
| 外掛 | 廠商 | 免費版 | 核心強項 | 適合場景 | 授權 |
|---|---|---|---|---|---|
| FilterGrid | DiviPlugins | 有，分類標籤篩選、網格佈局 | 中文友善、設定直覺、入門門檻低 | 作品集、中小型商品站、文章列表 | 免費加年費 Pro [來源：DiviPlugins〈FilterGrid〉〈https://diviplugins.com/plugins/filter-grid/〉〈2026〉] |
| Ajax Filter | Divi Engine（Divi Machine） | 多為付費 | Ajax 即時過濾、ACF 整合深、複合條件強 | 大型商品站、自訂文章類型複雜站 | 年費，以官方定價頁為準 [來源：Divi Engine〈Ajax Filter / Divi Machine〉〈https://diviengine.com/〉〈2026〉] |
| FacetWP | FacetWP LLC | 無免費版 | 跨主題通用、自訂能力最強、API 完整 | 非 Divi 站、需要高度客製的開發者 | 年費，以官方定價頁為準 [來源：FacetWP〈Pricing〉〈https://facetwp.com/〉〈2026〉] |
| JetSmartFilters | Crocoblock | 無免費版 | 與 JetEngine 深度整合、篩選類型多元 | 使用 JetEngine 自訂文章類型的站 | 年費，以官方定價頁為準 [來源：Crocoblock〈JetSmartFilters〉〈https://crocoblock.com/plugins/jetsmartfilters/〉〈2026〉] |
這張表刻意把「免費版有沒有」放進去，因為這是中小型站長最容易踩錯的決策點。很多人看到 FacetWP 功能強就直接買，結果用不到三成功能，還要花時間學一套新邏輯。我的判斷順序是：先問「要篩幾個條件」，再問「商品破百了嗎」，免費撑不住才升級。說到底，外掛選擇是需求問題，不是預算問題。篩選條件夠單純，FilterGrid 免費版就能做出專業級體驗。
一個常見的判斷陷阱
最該避免的陷阱，是「因為看起來功能多就買年費方案」。我見過不少案例：站長花了年費買 Pro，結果一年下來只用分類篩選，連 Ajax 都沒開。問題出在需求沒先想清楚，Pro 的功能本身沒有錯。Pro 版的價值要等真的需要複合條件、商品破百、或要 Ajax 無重整體驗時才會兌現。在那之前，免費版加上好的分類體系，表現不會輸。所以比起先掏錢，我會建議先把 Divi 子主題推薦精選 摸熟，弄清楚自己到底缺哪一塊。
另一個值得提的比較點是 Divi Supreme 模塊擴充 這類整合型外掛。它們有時也帶基本篩選或網格功能，但深度通常不及專門的 FilterGrid。如果你的站本來就裝了整合型外掛，可以先試它的網格模組，不夠用再獨立裝篩選外掛，避免功能重疊造成設定打架。
為什麼分類與自訂欄位要先建好
裝外掛之前，要先做什麼準備才不會裝完發現篩不出東西？關鍵在於：篩選外掛不是按鈕一加就能用，它的資料來源是 WordPress 的分類、標籤與自訂欄位。所以裝外掛之前，要先把作品或商品的分類體系建好、每篇內容都歸到正確分類，若要依價格、顏色等條件篩選，還得先用 ACF 等外掛把對應的自訂欄位建出來並逐一填值。這一步偷懶，後面全部白做。
- 分類體系：先規劃好一階或兩階分類，避免日後重整成本。可參考 WordPress 分類排序教學。
- 每篇內容歸類：未歸類的文章商品在篩選時會消失或被丟進「未分類」。
- 自訂欄位：價格、顏色、尺寸、材質等條件，需先用 ACF 建欄位並逐一填值。
- WooCommerce 商品：內建就有分類與屬性，可直接拿來當篩選條件，不必另建。
- 前置沒做好是「按了沒反應」的最大元兇，比外掛本身的問題更常見。
我自己在幾個案子上吃過這個虧。有一次幫客戶建作品集，分類用得很隨興，結果裝好 FilterGrid 後按鈕按下去列表空空，客戶以為外掛壞了。查了半小時才發現是「未分類」這個預設項目把一堆作品吞掉了。從那次起，我會要求自己在外掛啟用前先把分類樹列出來，逐一檢查每篇內容的歸屬。這個動作枯燥，但省下的除錯時間遠超過它花的時間。說實在的，前置準備沒做好，等於把房子的地基蓋在沙地上。
自訂欄位這塊特別要提醒：ACF 建欄位不難，難的是「填值」這件事要落實到每一篇。很多人建了顏色欄位，卻只在新商品上填，舊商品全部空白，結果篩選時舊商品永遠被排除在外。這種資料不完整的問題，外掛本身解決不了，只能靠資料清理。如果你對 ACF 還不熟，Divi 自訂字體上傳 雖然是講字體，但操作 ACF 欄位的邏輯相通，可當暖身練習。
分類體系設計的三個層次
分類體系不只是「建幾個分類」，它牽涉到一個站的資訊架構。把分類設計拆成三個層次，能避免日後不斷重整。第一層是分類本體，決定內容被切成幾大塊，建議控制在五到八個以內，過多會讓按鈕排不下，也讓訪客難以一眼看懂站點主題。第二層是標籤，處理更細的切入點，彈性高但容易失控，因此要約束命名一致，避免「wordpress」「WordPress」「WP」三種寫法並存。第三層是自訂欄位，針對需要精確條件的內容（價格、尺寸、年份、地區）補上結構化資料。
三層各自的維護成本不同。分類一旦定下來變動成本最高，因為會牽動選單、麵包屑、內部連結；標籤變動成本中等，但累積速度快，需要定期清理無人使用或重複的標籤；自訂欄位的成本集中在「填值紀律」，技術上建欄位只要十分鐘，但要讓每一篇內容都填對，靠的是流程與習慣。評估一個站適不適合上篩選外掛，可以先用這三層的自我檢查：分類是否穩定、標籤是否整齊、欄位是否完整。三項都過關，篩選外掛才能發揮價值；任何一項殘缺，再強的外掛也只會把殘缺搬到前端讓訪客看見。
分類體系還要預留成長空間。一個剛起步的作品集可能只有三個分類，但若預期半年後會擴充到六到八個，按鈕排版的設計就要先容納這個量級，否則日後要重新調整版面。自訂欄位也一樣，最佳時機是內容數量還少、補填成本低的時候就把欄位建好，事後補建的工遠比預先建好要多。這些前置投資看似增加初期負擔，實際上能在內容成長後省下大量重整的工。
安裝與設定：Divi FilterGrid 從下載到上架的完整步驟
FilterGrid 要怎麼安裝、怎麼把篩選按鈕放到頁面上？流程分四步：在 WordPress 後台上傳並啟用 FilterGrid 外掛、在 Divi Visual Builder 裡新增 FilterGrid 模組、選擇要顯示的文章類型與分類、最後設定篩選條件與網格欄數，存檔後頁面上就會出現可即時篩選的列表。底下把每一步拆開來講，照著做基本不會出錯。如果你連 Divi 主題都還沒裝，先看 WordPress 主題安裝教學 與 WordPress 外掛安裝方法。
- 後台安裝：到 WordPress 後台「外掛 → 新增 → 上傳外掛」，選 FilterGrid 的 zip 檔，安裝後啟用。免費版可直接從 Divi Marketplace 免費資源 取得。
- 進入 Visual Builder：到要放篩選的頁面，點上方「啟用 Visual Builder」。對 Divi 5 的介面不熟的話，可先讀 Divi 5 全新介面解析。
- 插入模組：在 row 裡按加號，找到 FilterGrid 模組，設定文章類型（文章、商品或自訂文章類型）。
- 設定篩選條件：在模組設定裡勾選要開放篩選的分類、標籤、ACF 欄位，並設定網格欄數與排序方式。
- 進階樣式：可調整篩選按鈕樣式、預設顯示分類、行動版欄數；Pro 版可開 Ajax 即時過濾。
第四步是新手最容易卡住的地方。篩選條件要勾哪些，取決於你前面分類與欄位建了什麼。FilterGrid 會自動列出它讀得到的分類與欄位，所以如果你在這一步看到選項比預期少，多半是前置準備漏了，這時回去補分類比在這裡硬試快得多。設定欄數時，桌面通常設 3 或 4 欄，平板 2 欄，手機 1 欄，這個分配在 Divi 手機版排序調整 有更細的討論。
關於網格佈局，FilterGrid 提供多種網格樣式，但免費版的選擇有限。如果你的版型需求複雜，例如要交錯大小、要特殊比例，可能需要 Pro 版或搭配 Divi 佈局版型設計 與 Divi 高質感版型庫。但對多數作品集來說，標準等寬網格就夠用，不必為了視覺把功能需求疊上去。篩選按鈕的排列也一樣，放在頁面上方一排、用按鈕或下拉選單都行，重點是讓訪客一眼看到入口。
完成這幾步後，建議先在測試環境跑一遍，點過每顆篩選按鈕，確認列表縮減結果正確。我也會刻意留一篇「未分類」的內容，看看它會不會在篩選時消失，如果消失了，代表你的分類歸屬需要再檢查。這個小習慣能在上線前抓出八成的設定問題。想看 Divi 頁面設計的整體搭配，Divi 標題設計技巧 與 Divi 頁首設計套版 能幫你把篩選區塊融入版面。
進階設定：排序、預設值與空狀態
基本設定跑通之後，三個進階細節會決定篩選體驗從「能用」變成「好用」。第一是結果排序。FilterGrid 通常允許依發佈日期、標題、自訂欄位值（例如價格）排序，商品站建議把「價格由低到高」或「最新上架」設為預設，讓訪客一進列表就看到合理的順序。第二是預設顯示的分類。頁面第一次載入時，建議預設顯示全部或最受歡迎的分類，避免訪客看到一個空白列表誤以外為頁面壞掉。
第三個細節是空狀態（empty state）的處理。當某個篩選條件組合下沒有任何內容時，預設行為可能是顯示空白區塊，這會讓訪客困惑。理想做法是設定一段提示文字，例如「此條件下暫無內容，試試其他分類」，並提供回到全部內容的連結。這個小設計能降低訪客因誤判頁面故障而離開的機率。這三個進階設定都不需要付費版，卻能明顯拉開專業站與陽春站的距離。
三種實戰情境：作品集、文章列表與 WooCommerce 商品
作品集、部落格文章、購物商品分別要怎麼用篩選？作品集最常用單層分類（網頁設計、平面、品牌）配網格呈現；部落格文章適合用分類加標籤雙條件，讓讀者依主題縮減；WooCommerce 商品則直接接內建的商品分類與屬性（顏色、尺寸、價格區間），是篩選外掛最能發揮價值的場景，因為商品一多，訪客完全不會有耐心用捲動找。三種情境的操作細節不同，底下分開講。
情境一：作品集分類篩選
作品集是最常見的入門場景，也是免費版就能做得漂亮的類型。分類建議用單層、不超過七到八個，太多會讓按鈕排不下。每一件作品都要歸到一個分類，並附上夠大的封面圖，因為網格呈現時圖片是主角。篩選按鈕放在作品集頁面上方一排，用按鈕形式比下拉選單更直覺。想看作品集整體規劃，Divi 作品集設計教學 與 作品集網站設計指南 都有完整脈絡。如果你的作品集是放在一頁式網站裡，Divi 一頁式網頁設計 會提醒你篩選區塊的錨點配置。
作品集篩選的節奏感很重要。按鈕要夠大、點擊回饋要即時，否則訪客會懷疑自己是不是點錯。FilterGrid 免費版在切換分類時會有一次頁面重整，這個等待時間在作品集這種輕量場景裡幾乎無感；但若作品數量破百，重整的延遲就會被感知到，這時 Ajax 的價值才會浮現。所以判斷要不要升級，作品數量是第一個訊號。
情境二：部落格文章列表
部落格文章適合用「分類加標籤」雙條件。分類處理大主題（例如 WordPress、SEO、設計），標籤處理更細的切入點（例如 Divi、WooCommerce、圖片優化）。雙條件的好處是讀者可以同時縮窄兩個維度，例如「WordPress 分類」加「Divi 標籤」，快速找到特定主題的文章。不過雙條件也代表標籤要維護得整齊，否則篩選結果會零散。如果你的站內容主題多元，這個情境的投資報酬率很高。延伸閱讀可看 WordPress 架站與 SEO 全攻略 與 Rank Math SEO 外掛教學。
一個實際的小提醒：文章列表的篩選結果頁，最好還是讓每篇文章有自己的靜態連結。這樣即使讀者從分類頁點進去，搜尋引擎也能收錄到文章本身。篩選只是幫讀者更快找到入口，不該變成唯一的內容路徑。這個原則在後面 SEO 段落會再強調一次。
情境三：WooCommerce 商品篩選
WooCommerce 是篩選外掛最能發揮價值的場景。商品內建就有分類與屬性（顏色、尺寸、材質），FilterGrid 可以直接讀取這些資料當篩選條件，不必再用 ACF 建欄位。要做價格區間、顏色、尺寸的複合條件篩選，這是標準用法。對商品破百的站來說，沒有篩選幾乎等於把客人推給對手。完整架站流程可參考 WooCommerce 購物網站架設 與 WordPress 購物網站架設。
這個場景的規模也值得從數字看清楚：W3Techs 的調查顯示，WooCommerce 占所有網站的 8.2%，在其調查的所有電商系統中更高達 48.6% [來源：W3Techs〈Usage Statistics and Market Share of WooCommerce〉 https://w3techs.com/technologies/details/cm-woocommerce 2026-06-29]。換句話說，接近半數的電商網站跑在 WooCommerce 上，而這類商品站正是篩選外掛最直接受惠的對象，這也是我把 WooCommerce 列為篩選外掛「最能發揮價值場景」的依據。
- 商品分類：接 WooCommerce 內建分類，例如服飾可分上衣、褲子、配件。
- 屬性篩選：顏色、尺寸、材質等 WooCommerce 屬性，可直接設為篩選按鈕。
- 價格區間：需 Pro 版或搭配進階設定，是大型商品站升級的主因。
- 商品排序：可依價格、新增日期、熱門度排序，提升轉換機會。
- 行動版體驗：商品頁的篩選在手機上更要好按，行動版欄數要獨立調整。
這個情境也是從免費升付費訊號最明確的地方。商品破百、需要價格加顏色加尺寸的複合篩選、需要 Ajax 無重整體驗，這三個條件湊齊，Pro 版的年費才划算。少一個，免費版多半撑得住。商品頁 SEO 也不能放掉，WooCommerce 商品頁 SEO 優化 與 最佳 WooCommerce 佈景主題 可以一起看。
篩選外掛選擇決策矩陣：用兩個維度定位你的站
前面把各款外掛與情境分開講，但站長真正需要的是一個能快速定位的判斷工具。這裡提供一個原創的二維決策矩陣，用「內容數量」與「篩選條件複雜度」這兩個維度，把站點分到四個象限，各自對應一個明確的選擇。這個矩陣不是官方資料，而是把前面歸納的判斷邏輯濃縮成可操作的格式。
| 象限 | 內容數量 | 條件複雜度 | 建議選擇 | 理由 |
|---|---|---|---|---|
| 第一象限 | 少（50 件以內） | 單一條件（分類） | 先別裝，或用免費版頂著 | 內容少到捲動就看得到，篩選邊際效益有限 |
| 第二象限 | 少（50 件以內） | 多條件（分類加屬性加價格） | FilterGrid 免費版 | 條件多但總量少，免費版能呈現，重整延遲無感 |
| 第三象限 | 多（破百件） | 單一條件（分類） | FilterGrid 免費版，留意重整速度 | 量大但條件單純，可先免費上線觀察是否需要 Ajax |
| 第四象限 | 多（破百件） | 多條件複合（價格加顏色加尺寸） | FilterGrid Pro 或 Ajax Filter | 量大且條件複雜，Ajax 無重整與複合篩選的價值在此兌現 |
使用這個矩陣時要避免一個誤判：把「預期未來會變多」當成「現在就屬於多」。判斷依據應以當下實際的內容量與條件為準，對成長的預期留到下一階段再說。篩選需求跟著內容成長，預先買好 Pro 卻用不到，等同把預算卡在沒有回報的地方。正確做法是先用矩陣定位現況，等站點移動到下一個象限再升級。
條件複雜度這個維度還可以再拆細。所謂單一條件，指的是只用一種分類法（例如只依作品類型）；多條件則是同時啟用兩種以上的分類法或自訂欄位。WooCommerce 商品站通常落在第四象限，因為商品分類、屬性、價格三者經常並存；純作品集則多半落在第二或第三象限。把這個拆解想清楚，挑外掛就不會被「功能多」牽著走。
什麼情況根本不該上篩選外掛
誠實地說，有些站根本不需要篩選外掛，硬裝反而增加維護負擔與效能成本。第一種是內容量很小的站，例如只有十幾件作品的新創作品集，或剛起步不到二十篇文章的部落格。這類站捲動就能看完，加上篩選按鈕只會讓版面多出一排訪客用不到的元素，也讓站長多維護一套分類。第二種是分類體系本身混亂、短期內無法整頓的站。在分類沒整理好之前裝外掛，按下去不是空白就是結果零散，比沒裝更糟。
第三種不該裝的情況，是站點的主訴求本來就不是「瀏覽大量內容」。例如一頁式銷售頁、活動登陸頁、品牌形象首頁，這些頁面的目標是引導單一動作（報名、購買、聯絡），加上篩選反而分散注意力。第四種是已經重度依賴其他外掛生態的站，例如裝了 JetEngine 與 JetSmartFilters 的站，再疊一套 Divi 專屬篩選外掛會造成兩套系統設定打架，這時應該二選一而非兩者並存。判斷的標準很單純：篩選外掛解決的是「內容多到找不到」的問題，如果這個問題不存在，外掛就沒有施力點。
免費 vs 付費：FilterGrid Pro 的方案與升級時機
FilterGrid 免費版能撑到什麼程度？什麼時候才真的需要買 Pro？先給結論：免費版能處理基本的分類與標籤篩選，適合多數作品集與文章列表；Pro 版則補上 Ajax 即時過濾、複合條件、更多網格樣式、ACF 進階欄位與優先支援，採年費授權、一個方案可多站使用 [來源：DiviPlugins〈FilterGrid Pricing〉〈https://diviplugins.com/plugins/filter-grid/〉〈2026〉]。判斷要不要升級，看的是「商品或內容數量」和「要不要多條件同時篩」，不是看預算。
| 功能 | 免費版 | Pro 版 | 對誰重要 |
|---|---|---|---|
| 分類與標籤篩選 | 有 | 有 | 所有使用者 |
| 網格佈局 | 基本樣式 | 進階樣式 | 重視視覺的設計師 |
| Ajax 即時過濾 | 無（頁面重整） | 有（無重整） | 商品破百的電商站 |
| 複合條件（價格加顏色加尺寸） | 有限 | 完整支援 | 大型購物網站 |
| ACF 進階欄位 | 基本讀取 | 進階欄位類型 | 重度自訂站 |
| 多站授權 | 單站 | 多站 [來源：DiviPlugins〈FilterGrid Pricing〉〈https://diviplugins.com/plugins/filter-grid/〉〈2026〉] | 接案工作室、多站站長 |
| 優先客服 | 一般佇列 | 優先處理 | 營利型網站 |
計費方式要講清楚以免誤解：FilterGrid Pro 是年費授權，單一方案涵蓋多站使用，續約價以官方公告為準。我不在這裡寫死金額，因為定價會隨廠商政策調整，寫死反而誤導。要看最新價格，直接到 diviplugins.com 官方定價頁核對最準。如果你同時維護多個站、又是接案性質，年費方案的多站授權通常比單站單買划算；但若你只有一個站，免費版加上 Pro 的單站方案才需要考慮。
升級訊號清單
為了讓判斷更具體，我把升級訊號整理成一份檢查清單。這些訊號是實務經驗歸納，並非官方資料。滿足兩個以上，才比較有理由從免費換到 Pro。
- 商品或作品數量破百，免費版的頁面重整開始被感知為延遲。
- 需要複合條件，例如價格區間加顏色加尺寸同時篩選。
- 需要 Ajax 無重整體驗，追求即時過濾的流暢感。
- 同時維護多個站，多站授權比逐站單買划算。
- 需要 ACF 進階欄位類型（例如重複器、關聯欄位）當篩選條件。
- 站點是營利型，優先客服的價值才會浮現。
反過來看，如果你只有一個作品集、分類清楚、數量在 50 件以內，免費版綽綽有餘。很多人升級是因為「怕以後不夠用」，但篩選需求是跟著內容成長的，不是預先買好的。等到訊號出現再升級，年費花得才有依據。這也呼應我前面一直強調的順序：先建分類，再裝免費版，最後才評估付費。順序錯了，花再多錢也救不回來。
常見問題排解：按了沒反應、行動版跑掉、SEO 會不會受影響
篩選外掛最容易踩的雷有哪些？會不會拖累 SEO？三個最常見的問題：篩選按了沒反應，九成是分類沒歸好或自訂欄位沒填值；行動版欄數跑掉，是模組的行動版欄數設定沒調；至於 SEO，篩選本身不會拖累收錄，但若用 Ajax 動態載入又沒做對應的結構化處理，搜尋引擎可能抓不到篩選後的內容，建議保留可靜態連到的分類頁。下面把這三類問題拆開講。
問題一：篩選按了沒反應
這是搜尋「Divi 分類篩選不顯示原因」最常出現的痛點。排查順序我固定這樣跑：先看分類是否歸類（未歸類的內容篩不到）、再看自訂欄位是否填值（空白欄位的內容會被排除）、最後看快取是否清過（頁面快取有時會卡住篩選結果）。三個查完還沒解決，才考慮外掛衝突。九成的案例停在第一步或第二步。如果你對 WordPress 分類機制不熟，WordPress 區塊小工具設定 能補上背景知識。
- 分類歸屬檢查：在後台進入對應的文章類型，把每篇內容的分類欄位核對一次，特別留意被系統自動歸到「未分類」的項目。
- 自訂欄位填值檢查：開啟 ACF 或原生自訂欄位面板，逐一確認每篇內容的篩選欄位都有值，空白欄位會讓該筆內容在對應條件下消失。
- 快取清理：清除頁面快取（WP Rocket、LiteSpeed Cache 等）與瀏覽器快取，重新整理頁面再測。
- 外掛衝突測試：暫時停用其他可能影響前端 JavaScript 的外掛（例如效能優化、腳本延遲載入類），逐一還原找出衝突來源。
- 主題與核心版本：確認 Divi 主題與 WordPress 核心都更新到 FilterGrid 支援的版本，過舊的版本組合可能讓模組載入失敗。
問題二：行動版跑版
篩選按鈕或網格在手機上擠成一團，通常是行動版欄數設定沒調。FilterGrid 模組裡可以分桌面、平板、手機各設欄數，手機建議設 1 欄，按鈕則改成下拉選單或橫向捲動，避免一排按鈕在手機上換行造成版面破碎。這個調整不複雜，但很容易漏掉，因為很多人只在桌面預覽。響應式設計的觀念在 響應式網頁設計觀念 與 RWD 響應式網頁設計 有完整討論，建議上線前都用手機實機看過一次。
問題三：SEO 影響
「Divi 篩選影響 SEO 嗎」是高頻疑問。直接回答：篩選本身不會扣分，搜尋引擎不會因為你裝了篩選外掛就降排名。真正的風險在純 Ajax 動態載入的內容。Google 搜尋中心對 JavaScript 與爬取的官方說明指出，搜尋引擎雖然能執行 JavaScript，但動態載入的內容不保證被完整索引 [來源：Google Search Central〈JavaScript SEO 基礎知識〉〈https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics〉〈2026〉]。因此實務建議是：分類頁保留可靜態連到的網址，篩選作為體驗加值而非唯一路徑。爬取預算的觀念可看 爬取預算優化策略，結構化資料看 技術性 SEO 完全指南。要幫搜尋引擎把分類頁更快收進索引，搭配一份 XML Sitemap 對 SEO 收錄的幫助 一起規劃，會讓可靜態連到的分類結構更容易被發掘。
效能與速度
篩選外掛會增加前端 JavaScript 的載入量，這對效能有實際影響。降低影響的標準做法是搭配快取外掛與圖片壓縮。WordPress 快取外掛推薦、WordPress 圖片優化指南 與 圖片壓縮工具實測 是基本三件套。如果你追求 Core Web Vitals 的分數，Core Web Vitals SEO 優化 與 網站速度優化技巧 會把篩選外掛的 JS 量放進整體效能盤點。講了這麼多，效能這塊沒有捷徑，就是量測、壓縮、快取三件事循環做。
至於效能改善能換到什麼，外部案例提供了具體參考：Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%、轉換率提升 33.13% [來源：web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。這雖然不是篩選外掛本身的實驗，但說明了把前端載入與互動體驗顧好，對電商站的營收確實有感，因此篩選外掛的 JS 與 Ajax 重排造成的延遲值得認真處理。
把焦點再收窄到「互動」這個面向，會更貼近篩選外掛的真實負擔。篩選按鈕被點擊的那一刻，屬於 Core Web Vitals 裡的 INP（Interaction to Next Paint）指標。web.dev 公開的案例顯示，Vodafone 把 LCP 改善 31% 後銷售增加 8%，而 redBus 改善 INP 後銷售增加 7% [來源：web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。換句話說，互動順暢度與載入速度一樣會直接反映在轉換上，這對仰賴即時篩選的電商站尤其關鍵。FilterGrid 免費版在切換分類時有一次頁面重整，這個動作的等待時間正是 INP 與整體互動體驗要權衡的地方，也是商品破百後升級 Ajax 版的主要理由之一。
這裡也誠實承認：篩選外掛對 LCP 或 CLS 的具體影響幅度，沒有針對 FilterGrid 的獨立基準測試，所以我不會給一個「降低幾毫秒」的數字。能說的是方向，篩選按鈕的 JS 多半在互動時才執行，初始載入的負擔有限；真正要留意的是篩選後的圖片是否延遲載入，以及網格重排時有沒有造成版面跳動。
行動版與互動體驗的優先順序
行動版的重要性不只是版面，還有它在整體流量中的占比。2026 年第一季，行動裝置（不含平板）占全球網站流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。過半流量來自手機，意味篩選外掛的行動版體驗直接決定多數訪客的第一印象。在手機上，篩選按鈕的點擊熱區要夠大、回饋要即時，否則訪客會誤觸或以為沒反應而離開。把篩選按鈕從橫排改成下拉選單或可橫向捲動的區塊，是兼顧觸控友善與版面整潔的常見做法。
另一個常被忽略的行動版細節是篩選後的捲動位置。訪客在手機上點了分類按鈕後，頁面如果跳回首頂，會打斷瀏覽節奏；理想狀態是篩選結果原地更新、捲動位置保留，這正是 Ajax 版相對於重整版的體驗優勢。如果你用的是免費版，可以透過把篩選按鈕放在距離網格較近的位置，降低重整後需要重新捲動的距離來緩解。
結論與挑選建議：先把分類建好，再決定要不要付費
看完這篇，到底該怎麼開始、怎麼決定？一句話總結：先花時間把分類與自訂欄位建好，再用 FilterGrid 免費版上線，等商品或作品破百、需要複合條件或 Ajax 體驗再升級。篩選外掛的價值不在功能多寡，而在分類夠不夠乾淨，分類亂的外掛再強也救不回來，分類清楚的站，連免費版都能做出專業級體驗。說到底，分類工程才是真正決定成果的環節。
- 盤點並整理分類體系，這是所有篩選的基礎，可對照 品牌官網設計全攻略 的內容架構思考。
- 用 FilterGrid 免費版上線，驗證訪客行為與實際需求。
- 等商品破百或需要複合條件，再評估升級 Pro。
- 判斷公式：內容量加上篩選條件複雜度，決定免費撐得住還是要付費。
- 分類頁仍要保留靜態可連網址顧 SEO，篩選只當體驗加值。
回顧一下幾個關鍵判斷。選外掛，先問要篩幾個條件、商品破百了沒，免費撑不住才升級，別因為看起來功能多就掏年費。裝之前，分類與自訂欄位先建好、每篇內容都歸類，這是「按了沒反應」最常見的元兇。SEO 不必擔心篩選本身，但要小心純 Ajax 動態內容不被索引，保留靜態分類頁是兼顧 UX 與收錄的做法。效能上，搭配快取與圖片壓縮就能把篩選外掛的 JS 負擔降到可接受範圍。把握這幾個原則，站點規模變大時也比較不容易走偏。
如果你還在評估要不要用 Divi 整體作為建站主題，WordPress 頁面編輯器比較 與 WordPress 佈景主題推薦 能幫你做橫向選擇；若已經決定走 Divi 路線，Divi Cloud 雲端版型庫、Divi 視差滾動效果、Divi 圖片懸停特效 與 Divi 價目表設計技巧 都是搭配篩選外掛一起規劃版型時會用到的資源。篩選外掛解決的是介面問題，真正能不能篩得動，看的是分類與欄位建得多扎實。
常見問題 FAQ
Divi Filter 外掛是什麼？能做什麼？
它是一類專門擴充 Divi 主題的第三方外掛，能在作品集、文章、商品列表上方加上分類、標籤與自訂欄位的篩選按鈕，訪客點擊後列表即時縮減、不必重整整頁。主要彌補 Divi 原生缺少的進階過濾能力。
Divi FilterGrid 免費版跟 Pro 版差在哪？
免費版提供分類與標籤的基本篩選、網格佈局，多數作品集與中小型商品站夠用；Pro 版補上 Ajax 即時過濾、複合條件、更多網格樣式、ACF 進階欄位與優先客服，採年費授權、單一方案可多站使用 [來源：DiviPlugins〈FilterGrid Pricing〉〈https://diviplugins.com/plugins/filter-grid/〉〈2026〉]。
Divi 哪一款篩選外掛最推薦？
給多數人的答案是 DiviPlugins 的 FilterGrid 免費版，中文相容、設定直覺；要複合條件或 Ajax 才考慮 FilterGrid Pro 或 Divi Engine 的 Ajax Filter；非 Divi 站則看 FacetWP、JetSmartFilters。選擇看的是需求條件，不是價格。
Divi FilterGrid 怎麼安裝設定？
四步完成：後台上傳 zip 並啟用、進 Divi Visual Builder、插入 FilterGrid 模組並選文章類型、勾選篩選條件與網格欄數。存檔後頁面就會出現可即時篩選的列表，進階樣式與 Ajax 屬 Pro 版功能。
Divi 作品集怎麼加上分類篩選？
先把作品歸到單層分類（例如網頁設計、平面、品牌），分類數量建議不超過七到八個，再裝 FilterGrid、在模組設定勾選分類篩選、設網格欄數，按鈕放在作品集頁面上方一排即可。
WooCommerce 商品可以用 Divi 篩選嗎？
可以，而且是最能發揮篩選價值的場景。FilterGrid 能直接讀取 WooCommerce 內建的商品分類與屬性（顏色、尺寸、材質）當篩選條件，不必另用 ACF 建欄位；要價格區間或複合條件則建議用 Pro 版。
Divi 篩選按鈕為什麼按了沒反應？
九成是分類沒歸好或自訂欄位沒填值，未歸類或欄位空白的內容會在篩選時消失。排查順序：先查分類歸屬、再查欄位填值、最後查快取是否清過，三步查完多半就能解決。
Divi 篩選會影響 Google SEO 收錄嗎？
篩選本身不會扣分，但純 Ajax 動態載入的內容搜尋引擎可能無法完整索引。建議保留可靜態連到的分類頁，把篩選當體驗加值而非唯一內容路徑，就能兼顧 UX 與收錄 [來源：Google Search Central〈JavaScript SEO 基礎知識〉〈https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics〉〈2026〉]。
Divi FilterGrid 一年要多少錢？
FilterGrid 採年費授權，單一方案涵蓋多站，定價會隨官方政策調整，因此不在此寫死金額，請以 diviplugins.com 官方定價頁為準。免費版可先免費使用，需求明確後再評估付費。
Divi FilterGrid 支援手機版嗎？
支援，模組可分桌面、平板、手機各設欄數，手機建議設 1 欄，篩選按鈕改成下拉選單或橫向捲動。上線前務必用實機預覽，確認按鈕與網格不會在手機上擠成一團。
Divi Ajax Filter 跟 FilterGrid 差在哪？
FilterGrid 由 DiviPlugins 出品、有免費版、入門門檻低；Ajax Filter 屬 Divi Engine 的 Divi Machine、偏付費、與 ACF 整合深、複合條件能力強 [來源：DiviPlugins〈FilterGrid〉〈https://diviplugins.com/plugins/filter-grid/〉〈2026〉；Divi Engine〈Divi Machine〉〈https://diviengine.com/〉〈2026〉]。需要 Ajax 即時過濾與重度自訂的專業站，才比較適合選 Ajax Filter。
什麼情況下不該裝 Divi 篩選外掛？
內容量很小（例如十幾件作品或不到二十篇文章）、分類體系短期無法整頓、主訴求是單一動作的登陸頁，或已重度依賴 JetEngine 加 JetSmartFilters 的站，都不建議再疊一套 Divi 專屬篩選外掛。篩選外掛解決的是「內容多到找不到」，這個問題不存在時，外掛只會增加維護與效能負擔。
Divi 篩選外掛會拖慢網站速度嗎？
會增加一些前端 JavaScript 載入量，但影響幅度取決於設定與搭配。篩選按鈕的腳本多半在互動時才執行，初始載入負擔有限；真正要留意的是篩選後圖片是否延遲載入、網格重排是否造成版面跳動。搭配快取外掛、圖片壓縮與延遲載入，就能把負擔壓到可接受範圍。互動體驗對轉換有實際影響，web.dev 公開案例顯示改善 INP 讓 redBus 銷售增加 7%、改善 LCP 讓 Vodafone 銷售增加 8% [來源：web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。
ACF 自訂欄位空白會影響篩選嗎？
會。篩選外掛讀取的是欄位值，欄位空白的內容在對應條件下會被排除。常見狀況是新內容有填、舊內容全空，結果舊內容在顏色或尺寸篩選時永遠不出現。解法只有資料清理：逐一補齊舊內容的欄位值，或在篩選設定上調整空值內容的呈現方式。建欄位容易，難的是讓填值紀律落實到每一篇。
想看 Divi 在其他類型網站的應用，可參考 用 Divi 打造瑜珈網站、Divi 與 Extra 主題部落格、用 Divi 打造 3C 購物網站、Bloom 電子報訂閱外掛、Monarch 社群分享按鈕、品牌網站關鍵建議、WordPress 必裝外掛清單、WordPress 自架網站費用解析，以及 電商平台完整比較 與 WordPress SEO 外掛評測，把篩選外掛放進整體建站與行銷的決策裡。