Gutenberg 區塊編輯器外掛推薦：5 款必裝工具

Gutenberg 原生區塊不夠用？這篇給你最務實的五款清單

你也許曾遇過這種狀況：好不容易裝好 WordPress，打開內建的區塊編輯器 Gutenberg，想做一個頁籤切換、一個帶圖示的定價表，或一組對齊的兩欄按鈕，結果翻遍預設區塊就是找不到。於是你上網搜「WordPress 區塊外掛」，跳出兩百多款選項，每一款都說自己最強、最輕量、最必裝。

答案先給你。在各種網站上反覆用下來，這篇挑五款深入比較：Kadence Blocks、Spectra、GenerateBlocks、Stackable、Greenshift。評估重點不是功能數量，而是功能是否符合需求、效能能否控制、停用後內容是否仍可維護。下文會說明每一款的強項、弱項與適用對象，再提供橫向比較表和網站類型建議。

在挑區塊外掛之前，如果你還在比較 Gutenberg 跟其他視覺化編輯器的整體差異，可以先看這篇頁面編輯器終極比較，把大方向搞懂，再回來挑區塊外掛會更踏實。如果你連區塊的基本操作都還不熟，建議先讀過WordPress 頁面建立與編輯教學，把容器、欄位、群組這幾個觀念弄懂，後面挑外掛才不會霧煞煞。

先講一個常見的坑：裝越多區塊外掛，網站越慢

老實說，很多人剛開始用 Gutenberg 的時候，都會犯同一個錯：看到區塊庫就裝。Kadence Blocks 裝了、Spectra 裝了、CoBlocks 裝了、Ultimate Addons 也裝了，後台瞬間多了兩三百個區塊，挑區塊的時候像在逛超市，爽得很。

然後問題就來了。

第一個問題是區塊選擇器爆炸。你點加號，下拉選單捲不完，光找一個「按鈕」就要在多種按鈕之間選半天，編輯效率反而變差。第二個問題是前端資源增加。不同外掛的載入策略不一，有些只載入頁面實際使用的資源，有些會載入較大的共用樣式或腳本；外掛疊得越多，重複 CSS、JavaScript 與維護成本通常越高。影響大小要以實際頁面量測。

這不是小事。web.dev 整理的研究顯示，較慢的體驗可能影響使用者停留與轉換，但影響幅度會因網站、受眾與量測方式而異，不能把速度直接換算成固定收入。

所以你會發現，這套挑選邏輯跟市面上那種「二十大必裝 Gutenberg 外掛」的清單完全相反。這裡的主張是：主力挑一款全能型的，視需求再加一款專精型的，其他全部不要裝。少即是多，這句話在區塊外掛上特別成立。

Gutenberg 原生到底缺什麼？把缺口看清楚再選外掛

要挑外掛，得先搞清楚原生 Gutenberg 到底缺什麼，不然你會陷入「功能越多越好」的迷思。原生區塊編輯器從 WordPress 5.0 上路到現在，核心區塊其實已經做得不錯：段落、標題、圖片、清單、引用、欄位、群組、按鈕、表格，這些日常會用到的它都有。

但只要你想做「像樣一點」的版面，缺口馬上浮現。下表把最常被問到的原生缺口整理出來，這也是你之所以會想裝區塊外掛的真正原因：

你想做的事	原生 Gutenberg	缺口的痛點
頁籤切換（Tabs）／手風琴（Accordion）	近期版本已有 Accordion；Tabs 仍需自行組合或用外掛	先確認站點的 WordPress 版本，再決定是否補外掛
進階按鈕（圖示、漸層、hover 動畫）	只有陽春按鈕	樣式調不完，要自己寫 CSS
定價表、比較表	沒有	方案頁、報價頁必備，原生做不出來
圖文並列的 Info Box / Icon Box	要用欄位硬湊	對齊與間距難控制，手機版破版
進階容器與巢狀版面	群組+欄位有限	做不出複雜的卡片、網格
文章列表、自訂文章輪播	Query Loop 可做文章列表；輪播不是核心功能	複雜查詢與輪播仍可能需要外掛或程式
滾動動畫、視差、互動效果	完全沒有	想做一點微互動就得靠外掛或寫程式

看出來了嗎？原生的缺口主要落在互動元件、進階排版容器、設計型區塊這三大塊。這剛好也決定了接下來挑外掛的方向：針對這三個缺口，挑最能補上、又最不拖累速度的工具，會比硬找一款什麼都有的巨無霸更實在。

挑區塊外掛的四個鐵則

在看五款評測之前，先把評分標準說清楚，你才能自己判斷哪一款適合你。這四個標準是從實際踩坑經驗歸納出來的，適用於任何區塊外掛，不限於這五款。

1. 前端效能可控。檢查外掛是否能依頁面或區塊載入資源，並用 Network 與效能工具確認實際 CSS、JavaScript 成本。這跟Core Web Vitals 完全攻略裡的指標直接相關。
2. 相依套件合理。使用 jQuery 不等於外掛一定慢，也不代表每頁都會新增完整程式庫；WordPress 或其他功能可能已經載入它。重點是該依賴是否真的在前台載入、是否阻塞，以及功能是否值得成本。
3. 卸載後可遷移。區塊通常會在文章內容中留下序列化標記或輸出的 HTML；停用外掛後，版面、樣式與互動仍可能失效，不一定只是變空白。正式採用前先在測試頁停用外掛，確認內容是否仍可讀、是否容易轉換。
4. 設計 token 與全域樣式可控。一款好的外掛要能讓你設一次主色、圓角、間距，全域套用，避免每個區塊都要逐一調整。這在做多頁網站的時候差距會非常大。

這四個鐵則你記住，下面五款用同樣的尺來衡量，你會看得很清楚誰過關、誰勉強、誰是地雷。

五款區塊外掛深度評測

先講分類邏輯，免得你覺得五款是隨便湊的。這五款可分成三種角色：全能型（Kadence Blocks、Spectra），負責補上原生缺口的八成版面需求；極簡效能型（GenerateBlocks），用最少區塊拼出最多版面；專精型（Stackable 顧設計、Greenshift 顧動畫）。挑法很簡單：從全能型挑一款當主力，再視需求加一款專精型。

Kadence Blocks：全能型主力，一份外掛搞定八成版面

Kadence Blocks 是 Kadence WP 團隊的作品，跟同名的 Kadence 主題是同一條產品線。它的定位很清楚：用一份免費外掛，補上原生 Gutenberg 最常見的缺口。

強項在於區塊種類齊全又實用。進階按鈕、Info Box、圖示、手風琴、頁籤、Table of Contents（目錄）、文章網格、進階表格與 Advanced Form 都涵蓋常見需求。Kadence 已停止維護舊的 Classic Form block，新站應使用 Advanced Form，既有網站也要依官方遷移說明處理。它的全域調色盤和排版設定可跟主題同步。

弱項是它走的是「大而全」路線，區塊數量多，前端載入策略雖然已經做了一定程度的 per-block 控制，但整體 CSS 體積還是比 GenerateBlocks 這種極簡派大。如果你追求極致的首字節速度，它不是最快的那一款。

適合誰：需要擴充 Gutenberg 區塊的中小企業形象網站、部落格與內容站。若只打算安裝一款綜合型區塊套件，Kadence Blocks可列入候選，但仍應依實際元件、資源載入方式、更新紀錄與現有主題相容性評估。

Spectra：Astra 用戶的首選，設計區塊最齊全

Spectra 是 Brainstorm Force 團隊做的，這個名字你可能不熟，但他們就是 Astra 主題背後的同一家公司。它早期叫 Ultimate Addons for Gutenberg，後來改名 Spectra，跟 Astra 主題是設計來搭配使用的。

強項是設計感。Spectra 的區塊樣式起步點比 Kadence 更精緻，容器、價格表、吸引區塊（Cta）、計時器、進度條這些行銷頁常用元件，預設樣式就很有質感。它跟 Astra 主題深度整合，全域色彩與字體會自動套用，幾乎不用手調。如果你已經用 Astra，裝 Spectra 是最順手的選擇。

弱項是綁定 Astra 生態的成分偏高。雖然它也能用在別的主題上，但脫離 Astra 之後，那份「無縫整合」的紅利就少了一半。它的免費版區塊雖然多，但有些進階變體要 Pro 版才解鎖，升級誘因設計得比較積極。

誰該用：Astra 主題的用戶、重視預設設計質感、不想花太多時間調樣式的人。如果你用的是其他主題，Kadence Blocks 會是更中性的選擇。

GenerateBlocks：極簡效能派，四個區塊拼出全世界

GenerateBlocks 的哲學跟前面兩款完全相反。它是 GeneratePress 主題作者 Tom Usborne 的作品，主張是：與其給你一百個區塊，不如給你四個能拼出任何版面的積木。免費版核心只有 Container（容器）、Grid（網格）、Headline（標題）、Button（按鈕）這四個。

第一次聽到的人通常會問：才四個區塊能做什麼？答案是，這四個區塊的參數細到不可思議。容器的間距、邊框、背景、響應式斷點全部可調，網格可以做到任意欄數與間距。你用這四個積木，可以拼出定價表、卡片、頁籤的視覺、複雜的 Hero 區段，什麼都行。

強項是極致的效能。GenerateBlocks 的前端足跡小到幾乎可以忽略，它只載入你實際用到的區塊樣式，而且幾乎不注入 JavaScript。實測下來，它是這五款裡對網站速度優化最友善的一款。Pro 版才補上 Accordions、Tabs、Query Loop（文章列表）這類需要互動或資料查詢的區塊。

弱項很明顯：學習曲線陡。因為它什麼都要你自己拼，新手一開始會覺得什麼都做不出來。它也不適合需要大量互動元件（日曆、表單、進度條）的場景，那些要靠 Pro 或乾脆交給全能型外掛。

誰該用：追求效能極致的站、有設計底子願意自己拼版的人、GeneratePress 用戶。如果你怕麻煩，這款先跳過。

Stackable：設計感最強，進階排版與微互動

Stackable 走的是另一條路：設計感。它的區塊預設樣式非常有現代感，卡片、部落格文章列表、文章輪播、圖庫、進階欄位，預設就有雜誌級的排版。對於內容站、媒體站這種需要把文章「排得好看」的場景，Stackable 特別能發揮。

強項是設計彈性。它有獨立的進階設定面板，可以對單一區塊做非常細的排版控制，包括動態內容（Dynamic Content）、全域色彩同步、版面響應式控制。Premium 版還加上文章輪播、進階文章網格這些內容站必備功能。

弱項是它的設定面板資訊密度很高，新手會有點壓迫感。而且它跟 Spectra、Kadence 在全能型這個位置上有重疊，三選一的時候容易糾結。實務上的建議是：如果你是內容站、媒體站，選 Stackable；如果是形象官網或部落格，選 Kadence 或 Spectra。

誰該用：內容站、媒體站、雜誌型網站、對排版質感要求高的設計師。

Greenshift：偏重動畫與滾動效果的選擇

前面四款都是「區塊庫」，Greenshift 不一樣，它的核心是動畫與互動。如果你想做出滾動觸發的淡入、視差背景、數字動畫、互動式圖表，但又不想引入肥重的動畫庫，Greenshift 是目前 Gutenberg 生態裡最乾淨的選擇。

強項是它用純 CSS 動畫與 Intersection Observer 實作互動效果，不依賴 jQuery 或沉重的動畫引擎，這在動畫類外掛裡非常罕見。它也附帶一套區塊，但它真正的價值，是讓你在不寫程式的前提下，做出會動的版面，區塊數量不是重點。

弱項是它不是主力區塊庫，你不能只裝它就搞定日常版面。它是當作專精型加掛的，跟你挑的全能型主力搭配用。還有，動畫這件事本身要節制，做太多反而傷使用者體驗與效能。

誰該用：想在 Gutenberg 裡做出滾動動畫、視差、互動效果的人；重視效能不想用傳統動畫外掛的進階使用者。

五款橫向比較：定位、強項、效能策略一次看

五款講完，底下用一張表把它們放在同一個座標系上，方便你直接對照。這張表刻意不放精確到小數點的數字，因為那些數字會隨版本變動，這裡要給你的是判斷維度，不是一閃而過的規格。

外掛	角色定位	免費版強項	Pro 補強方向	依賴 jQuery	效能策略	最適合誰
Kadence Blocks	全能型主力	進階按鈕、表單、頁籤、手風琴、文章網格、Info Box	更多區塊變體、進階表單欄位、動態內容	否	per-block 載入，CSS 中等	中小企業形象站、部落格、想一款搞定的人
Spectra	全能型（Astra 配套）	質感區塊、價格表、CTA、計時器、容器	進階變體、動態內容、彈出視窗	否	per-block 載入，與 Astra 深度整合	Astra 用戶、重視預設設計質感
GenerateBlocks	極簡效能型	四核心積木：Container、Grid、Headline、Button	Accordion、Tabs、Query Loop、進階容器	否	極致輕量，幾乎不注入 JS	效能至上、有設計底子、GeneratePress 用戶
Stackable	設計型全能	卡片、文章列表、圖庫、進階欄位、質感排版	文章輪播、動態內容、進階文章網格	否	per-block 載入，面板較重	內容站、媒體站、雜誌型網站
Greenshift	動畫互動專精	滾動動畫、視差、數字動畫、互動圖表	進階動畫、動態內容、效能分析工具	否	純 CSS 動畫，不依賴動畫庫	想做動態版面、不想用肥動畫外掛的人

看完這張表，你應該已經有感覺了：全能型三款（Kadence、Spectra、Stackable）功能重疊度高，挑一款就夠；GenerateBlocks 是走另一條哲學的異類；Greenshift 是加掛用的專精工具。下面直接告訴你怎麼組合。

區塊外掛 vs 頁面編輯器：什麼時候你該認真考慮換軌

有一個問題幾乎每個月都有人問：「我用 Gutenberg 加區塊外掛就夠了，還是要換成 Elementor 那種頁面編輯器？」這不是一個有標準答案的問題，但有一個清楚的判斷框架。先把兩者的本質差異講明白。

區塊外掛是依附在 Gutenberg 之上的擴充，它生出來的內容還是原生區塊格式，存進資料庫的就是標準 HTML，任何佈景主題都能讀。頁面編輯器（Elementor、Bricks、Divi）則是另起一套完整的視覺編輯系統，它有自己的資料結構、自己的範本系統、自己的 Theme Builder，等於在 WordPress 上面再疊一層引擎。

這個本質差異決定了三件現實後果。第一，頁面編輯器能做的事遠比區塊外掛多：全站頁首頁尾、動態範本、商品頁客製、彈出視窗、主題建構，這些是它的主場。第二，頁面編輯器的代價是綁定更深，一旦你用 Elementor 蓋了五十個頁面，要換掉它的成本極高，等於把網站的視覺層整個託付給這套工具。第三，頁面編輯器對前端效能的消耗通常比區塊外掛大，因為它載入的是一整套框架，不是幾個零件。

所以判斷框架很簡單。如果你做的是內容驅動的網站（部落格、形象官網、內容站），版面需求落在文章、頁面、CTA、表單，那麼 Gutenberg 加一款全能型區塊外掛就綽綽有餘，沒有必要換軌，你還能保有原生區塊的輕量與可攜性。如果你做的是設計驅動的網站（複雜的全站版面、大量動態範本、需要 Theme Builder 全站掌控、每一頁都要高度客製），那麼你應該認真考慮頁面編輯器，這時候可以去看Elementor 完整教學或Bricks Builder 教學，把整體編輯器選型弄清楚。

還有一個成本角度值得放進來。頁面編輯器通常是年費訂閱，金額不低，加上它綁定深、換掉成本高，長期持有成本會累積。如果你想理解這類工具怎麼算進整體架站預算，可以對照WordPress 架站費用拆解，把外掛與編輯器的花費放回總成本裡看，會更清醒。區塊外掛與頁面編輯器不是誰取代誰，而是兩個不同量級的選擇，先想清楚你要蓋的是公寓還是百貨公司，再決定用哪種工具。

Full Site Editing 時代，區塊外掛還有未來嗎

WordPress 從 5.9 開始正式上線 Full Site Editing（全站編輯，簡稱 FSE），再加上區塊主題（Block Theme）的成熟，很多人開始問一個尖銳的問題：既然核心編輯器連頁首頁尾、範本都能編了，區塊外掛是不是早晚會被淘汰？答案是：不會被淘汰，但會被重新定位。

FSE 解決的是「能不能用區塊編輯整個網站」這個架構問題，提供範本編輯與核心區塊。近期核心已補上 Accordion 與 Query Loop 等能力，但 Tabs、專用定價表與多數進階動畫仍可能需要圖案、外掛或程式。採用外掛前先核對目前 WordPress 版本，避免為核心已具備的功能重複安裝。

挑選時也要看區塊外掛能否配合區塊主題與 FSE。具體檢查兩件事：一是有沒有樣式變體（style variations）或預設圖案（block patterns）；二是全域設定能否與主題的全域樣式協作。實際整合程度會隨主題與版本改變，應在測試站套用全域色彩、字體與範本後再決定。

如果你目前用的是傳統主題（PHP 模板類），FSE 對你暫時沒有直接影響，區塊外掛照樣能用。但如果你正在考慮搬到區塊主題，那就把「FSE 整合度」加進你的評分標準，挑一個會跟著核心一起演進的外掛，才不會兩年後發現自己選的工具停在舊時代。

五個最常見的誤區

外掛講完了，真正影響維護成本的，往往是你怎麼用這些工具。下面五個誤區可作為採用前的檢查清單。

誤區一：全能型外掛裝好幾款。這是最常見也最要命的錯。Kadence、Spectra、Stackable 全裝，後台區塊暴增，前端 CSS 互相覆蓋，樣式衝突到分不清是誰的問題。實務上的規矩是全能型只能裝一款，想換的時候先解除安裝舊的再裝新的，中間不要重疊。

誤區二：把區塊外掛當頁面編輯器用。區塊外掛是擴充 Gutenberg，不是取代頁面編輯器。如果你要做的是複雜的全站版面、Theme Builder、動態範本，那你要的是 Elementor 或 Bricks Builder 這類頁面編輯器，不是區塊外掛。把工具放對位置，才不會硬凹。這個取捨後面會專門拉一段來講。

誤區三：裝了不測速。外掛上線前後應在相同頁面與環境重複跑實驗室測試，並在有足夠流量時觀察 CrUX 欄位資料。PageSpeed Insights 的單次結果會波動，不能靠一跑就判定外掛影響；重點是保留測試條件與前後差異。

誤區四：忽略容器與響應式。原生 Gutenberg 的欄位在手機版很容易破版，很多人裝了區塊外掛卻沒在用它們的容器，還是用原生欄位硬湊，結果手機版一樣醜。容器區塊的價值就在響應式控制，請務必用它來包版面，避免直接堆欄位。

誤區五：不會用同步區塊（Reusable Block）與圖案（Pattern）。區塊外掛給你零件，但真正讓你省時間的是把常用組合存成同步區塊或圖案。CTA 區段、報價卡、作者簡介，這些重複出現的元件存一次，全站同步更新，這才是區塊編輯器的正確用法。很多人零件裝了一堆，卻還在每頁重頭拉，白費。

根據你的網站類型，建議的組合

講了這麼多，直接給你落地建議。根據四種最常見的網站類型，配上實務上會選的組合，你對號入座就好。

網站類型	主力（全能型三選一）	加掛（視需求）	理由
個人部落格 / 內容站	Kadence Blocks	Greenshift（適度動畫）	部落格需求單純，Kadence 一次補齊，加一點滾動動畫提升閱讀體驗即可
中小企業形象官網	Spectra（若用 Astra）/ Kadence Blocks（其他主題）	不需要	形象官網版面需求落在 CTA、價格表、團隊介紹，一款全能型就夠
WooCommerce 購物網站	Kadence Blocks	GenerateBlocks（首頁與活動頁）	購物網站首頁常需客製拼裝，GenerateBlocks 的容器幫你做促銷版面又不拖累商品頁速度
設計師 / 重質感專案	Stackable	Greenshift（互動）+ GenerateBlocks（效能頁）	設計師要排版質感選 Stackable，動態效果交給 Greenshift，追求速度的頁面交給 GenerateBlocks

這張表的精神只有一句話：主力一款、加掛最多一款，其他別碰。如果你看完還是忍不住想多裝，回去把「誤區一」再讀一次。

用最小代價做出一個定價表：三種方法的實際對照

講了很多觀念，這裡給你一個能直接動手的對照。定價表（Pricing Table）同時考驗容器、欄位、按鈕與響應式設定。以下用同一個需求：三欄方案、中間方案強調「最 popular」、手機版轉單欄，示範三種做法。

方法一：用 Kadence Design Library 的定價表圖案。Kadence 目前提供可匯入的 pricing table 設計圖案，而不是獨立的 Pricing Table block。匯入後仍要檢查方案欄位、強調樣式與手機版堆疊。這種做法起步快，但實際載入哪些資源要用前台 Network 驗證。

方法二：用 GenerateBlocks 從零拼。沒有現成的定價表區塊，你用一個 Container 當外框，裡面放 Grid 三欄，每欄再放一個 Container 當卡片，卡片裡依序塞 Headline（方案名）、Headline（價格）、清單（功能）、Button（按鈕）。中間方案的強調樣式，靠的是把那張卡片的 Container 邊框與背景調出來。這套流程第一次做可能要半小時，但做完你會徹底理解容器的運作邏輯，而且前端幾乎零負擔。這是積木極簡派的典型打法：給你四個萬能零件，你自己組合。

方法三：存成同步區塊重複用。不管你用方法一還是方法二做出第一個定價表，下一步都是把它存成同步區塊（Reusable Block）或自訂圖案（Pattern）。之後每個新頁面要定價表，直接插入、改文字就好，全站樣式還能同步更新。這一步很多人會漏，但它是區塊編輯器真正的生產力爆發點。

三種方法沒有誰對誰錯，對應的是不同的取捨。你要的是快，選方法一；你要的是輕量與可控，選方法二；不管哪一種，方法三都要做，這才是把區塊外掛的價值放大三倍的關鍵。

裝完不是結束：讓區塊外掛不拖垮速度的三個動作

很多文章到推薦外掛就結束了，但真正決定網站快不快的，是裝完之後的設定。這三個動作建議每裝一款區塊外掛就跟著做一次，把速度傷害降到最低。

動作一：關掉沒用到的區塊。若外掛提供區塊啟用設定，停用不使用的項目可先讓後台選擇器更乾淨；是否減少前台資源取決於各外掛的載入策略，仍要實測確認。

動作二：把圖片交給專門的外掛處理。區塊外掛負責版面，圖片優化不要靠它。請再裝一套圖片壓縮與延遲載入的解決方案，這部分可以參考WordPress 圖片優化指南。區塊外掛插入的圖片如果沒壓縮、沒延遲載入，再輕量的外掛也救不了你的 LCP。

動作三：檢查既有快取層。主機、CDN 或網站若已有頁面與瀏覽器快取，不一定要再疊一套快取外掛。需要時可參考WordPress 快取外掛推薦，但避免重複最小化、延遲或快取規則互相衝突。

這三個動作加起來，就是「外掛負責版面、圖片外掛負責圖、快取外掛負責交付」的分工。各司其職，速度才不會被任何一個環節拖垮。

挑選前你最常問的五個問題

這節把實際被問最多次的問題一次回答，如果前面有沒講到的細節，這裡補上。

問題一：免費版到底夠不夠用？夠，而且對大多數網站來說綽綽有餘。這五款的免費版都是「能用、能上線」的完整產品，不是閹割展示品。Pro 版補的是進階變體、動態內容、表單進階欄位這類「用了會更爽、不用也不會死」的功能。實務上的建議是先用免費版跑一個月，真的撞到瓶頸再考慮付費，不要一開始就買 Pro。還有一個判斷竅門：如果一個外掛的免費版連「停用沒用到的區塊」這種基本設定都要付費才能用，那它的商業模式就是在用免費版釣魚，這種外掛通常可直接淘汰。

問題二：五款之間可以混裝嗎？可以，但不建議全能型彼此混裝。比較合理的混裝是「全能型一款 ＋ 專精型一款」，例如 Kadence Blocks 加 Greenshift，或 Spectra 加 GenerateBlocks（用 GenerateBlocks 處理追求速度的頁面）。混裝前請想清楚每一款負責什麼，沒有明確分工就不要混。一個簡單的檢驗方法是：如果你說不出這兩款各自不可取代的功能是什麼，那就代表你只需要一款。

問題三：裝了區塊外掛，還需要表單外掛嗎？看需求與維護狀態。Kadence 應使用 Advanced Form，不要再以已停止維護的 Classic Form 建新表單；若需要多步驟、條件邏輯、CRM 串接、報名或更完整的垃圾訊息防護，仍應評估專門表單外掛。可對照WordPress 表單外掛推薦。

問題四：做 WooCommerce 購物網站，區塊外掛幫得上忙嗎？幫得上，但角色是輔助。商品頁、結帳流程這些 WooCommerce 核心版面，主要還是看你的主題怎麼處理，可以先參考WooCommerce 佈景主題推薦選一個購物導向的主題。區塊外掛的用武之地在首頁促銷版面、活動登陸頁、分類頁上方的客製區塊這些「非商品頁」的版面。GenerateBlocks 在這種場景特別好用，因為它能拼出促銷版面又不拖累商品頁的速度。

問題五：裝了之後網站變慢，怎麼抓兇手？按三步排查。第一步，在瀏覽器開發者工具的 Network 面板，按檔案大小排序，看是哪個 CSS 或 JS 特別肥。第二步，對照檔案路徑判斷是哪個外掛載入的（路徑裡通常會有外掛的 slug）。第三步，回到那個外掛的設定頁，把用不到的區塊停用，或開啟它的資源優化選項。如果怎麼調都救不回來，那就認真考慮換一款效能策略更激進的外掛，例如從全能型換到 GenerateBlocks。

給你的下一步行動方案

看完這篇，不要衝動去把五款全裝。以下給你一個可以照著做的行動方案，五個步驟，今天就能動工。這套流程對應到新建網站時實際會走的順序，從盤點、挑選、測速到收尾，每一階段都有一個明確的產出，不會做到一半迷失方向。

1. 盤點你現在裝了哪些區塊外掛。打開後台外掛清單，把所有 Gutenberg 區塊庫性質的外掛一個一個列出來。如果你裝超過兩款，請準備砍掉只留一款全能型。
2. 確認你的主題與需求。用 Astra 就配 Spectra；用 GeneratePress 或追求極致速度就配 GenerateBlocks；其他情況從 Kadence Blocks 開始最安全。
3. 建立基準測速。在動任何外掛之前，以相同裝置與網路條件重複測試首頁及重要文章，記下實驗室指標；有 CrUX 欄位資料時也一併保存。
4. 裝主力、停用沒用到的區塊、再測一次。裝完記得到設定頁關掉用不到的區塊，然後重測速，確認數字沒有明顯惡化。如果有，回頭檢查是哪個區塊在偷載資源。
5. 視需求加一款專精型。主力跑順之後，真的有動畫或進階排版需求，再加 Greenshift 或 Stackable，一樣加完要測速，確認數字沒有惡化。

區塊外掛這件事，說穿了就一個原則：夠用就好，少裝為妙。Gutenberg 本身已經夠強，外掛是來補洞的，不是來取代它的。把主力挑對、把沒用到的關掉、把速度顧住，你的頁面設計能力就會比八成還在裝一堆外掛的網站強。

回頭看用 Gutenberg 的整個過程，最大的轉變不是裝了哪一款神外掛，而是心態從「還缺什麼」變成「已經夠了」。當你停止追逐功能清單，開始把手上的工具用到透，你的網站會同時變得更快、更好維護、也更難被超越。這跟做 SEO 是同一個道理：不是誰塞得多誰贏，是誰做得扎實誰留得久。外掛是手段，速度與體驗才是你要顧的結果。

如果你想從更上層看 WordPress 架站的整體藍圖，把 SEO、效能、內容一次想清楚，可以接著讀WordPress 架站與 SEO 優化全攻略。把工具放在對的位置，剩下來的就是持續把內容跟體驗做好，時間會站在你這邊，這條路走得越久，差距會拉得越明顯。