Gutenberg 區塊外掛怎麼選？五問診斷再決定裝哪款

快速重點：版面做不出來，多半不是缺區塊，而是還沒弄懂內容怎麼存、資源怎麼載、版型怎麼重用。先判斷再安裝：三個症狀分流、五個問題定位需求；局部缺口補一款區塊外掛，全站版面與動態範本才考慮頁面編輯器。多數網站一款主力加一款專精就是上限。

週五傍晚，客戶傳來一張參考網站的截圖，配一句話：這個版面做得出來嗎？你打開後台，把內建區塊清單從頭滑到尾，卡片、定價表、會動的數字，一個都拼不出來。回頭搜尋，結果更讓人茫然：一頁一頁翻不完的清單文，每一篇都在數款數，卻沒有一篇回答你手上這個頁面到底缺什麼。（建構情境，細節經過簡化。）

更常見的循環是這樣：卡片排不出來，找一款外掛；按鈕樣式調不動，再找一款；同一段行動呼籲每一頁都要重拉一次，又找一款。症狀不同，直覺反應卻一樣，都是再裝一款。裝到第三款之後，區塊選擇器開始膨脹，不同外掛的樣式互相覆蓋，問題從做不出來，慢慢變成說不清楚是誰弄壞的。

錯裝的代價也不只是慢一點。外掛會把標記寫進每一頁的內容裡，裝得越深，日後改版要重來的頁面越多，舊頁面跟著陪葬。所以該先回答的問題不是哪一款最好，而是你的狀況是不是真的需要外掛、需要到哪個層級。不給必裝清單，接下來給的是一條從症狀走到處方的判斷路徑，判斷的儀器是三層機制：內容怎麼存、資源怎麼載、版型怎麼重用。看懂機制，該裝幾款自然會收斂。

三個症狀先自測：缺的是元件、效率，還是掌控權

先把「版面做不出來」拆開，它其實是三種不同的狀況。症狀一是缺元件：要做的東西在區塊清單裡找不到，例如頁籤、帶圖示的資訊卡、樣式完整的按鈕。症狀二是缺效率：元件做得出來，但每次都要從頭組一次，同一組版面在十幾頁重複出現，改一處等於改十幾處。症狀三是缺掌控：想動的是頁首頁尾、全站配色、文章範本這一層，觸及的層級比單一頁面的內容更深。三個症狀指向的解法不同，先對號，再談安裝。

三個症狀裡，缺掌控最常被誤診成前兩種。頁首頁尾改不動、文章範本長得不像自己要的樣子，感覺上也像版面做不出來，於是裝了更多區塊外掛，卻始終碰不到那一層。判斷的方法是看位置：問題出現在頁面裡，屬於元件與效率；問題出現在包著頁面的框架，就屬於掌控。位置認對了，症狀就不會誤診，裝上去的東西也就不會白裝。

↔ 左右捲動檢視完整表格

症狀	實際場景	指向的解法
缺元件	頁籤、資訊卡在清單裡找不到	先試核心區塊加官方圖案庫，仍缺再補一款區塊外掛
缺效率	同一組版面每頁重做，修改要逐頁跑	把版面圖案化，插入後改文字
缺掌控	想調整頁首頁尾、全站範本與配色	區塊主題的網站編輯器，或評估頁面編輯器
三者皆無	版面偶爾調整，站上以內容為主	先不裝，有狀況再回來對照

前兩個症狀，多數時候先走零安裝處方：核心區塊加官方圖案庫。容器與群組這兩個觀念熟了，卡片、兩欄圖文、報價區段用內建區塊就組得出來；官方圖案庫再補上現成版型，匯入改字就能上線。這條路能覆蓋的需求比多數人想像的多，值得當第一線，稱不上安慰劑。若連容器與群組都還不熟，先把區塊編輯器的基本操作補起來再談擴充，後面所有判斷都建立在這個地基上。

官方圖案庫的檢查方式很直接：在編輯器打開插入面板，切到圖案分頁，用版面類型當關鍵詞搜一次。搜得到的，先匯入再改；搜不到的，才繼續往外掛找。這個順序比看任何清單都快，因為它回答的是你手上這一頁缺什麼，市面上有什麼是另一回事。

三個症狀也可能混在同一個站裡。文章頁缺的是效率，同樣的作者欄位每一篇都重拉一次；首頁缺的是元件，促銷卡怎麼拼都不對。這時就分開處理：文章頁走圖案化，首頁補元件，不要指望用一次安裝解決兩個不同層級的問題。混著解，通常會裝出超出需要的數量。

回頭看開場的三個迴圈：卡片排不出、按鈕調不動、行動呼籲每頁重拉，看起來是三件事，追下去多半是同一個機制問題的三種面貌，分別對應儲存、載入、重用某一層沒被看懂。把三層拆開，是下一節的任務；講完之後，挑外掛的判斷幾乎都被這三層決定。

裝下去之前，先看懂外掛動了網站的三個地方

一款區塊外掛裝下去，同時動了網站的三個地方：內容怎麼存、資源怎麼載、版型怎麼重用。三層分別決定退出成本、訪客體驗與生產力。看懂它們，就知道安裝數量為什麼要收斂，也知道之後驗收該盯哪裡。三層互相獨立：一款外掛可能存得乾淨卻載得笨重，也可能載得輕盈卻不提供任何重用機制，所以要分開看，不能用一句好壞帶過。

第一層是儲存。區塊內容會依區塊類型以不同方式儲存與呈現，多數版面區塊的結構與文字跟著頁面內容一起存進資料庫，這也是退出成本的來源：換佈景主題或停用某個擴充之前，仍要檢查版面與功能是否相容；內容還在、樣式走樣，是停用之後常見的結果，而不是文字整段消失那麼乾脆。

第二層是載入，這裡要把兩件事分開：註冊與載入。外掛啟用後，它的區塊會註冊進編輯器，選單變長、選擇變多，這是編輯體驗的問題；前端頁面實際下載多少 CSS 與 JavaScript，才是訪客體驗的問題。註冊了不等於每一頁都載入，實際策略因外掛而異，所以「裝越多越慢」是直覺，不是定律。驗證有個直接的做法：挑一個沒有用到該外掛區塊的頁面，打開瀏覽器開發者工具的 Network 面板，看資源清單裡有沒有路徑含外掛名稱的檔案；有，那一頁的重量才能歸因給它。

選擇器膨脹也不是無害的小麻煩。找一個區塊要捲過一長串清單，每一次編輯都在付這個稅；多人協作的網站更明顯，同事得先搞清楚三款長得一樣的按鈕各自是誰。這類成本不出現在測速報告裡，卻實實在在吃掉維護的意願，判斷安裝數量時，把它跟載入重量放在同一個天平上。

速度為什麼值得這樣查？web.dev 整理的研究把話講得保守：載入偏慢的頁面，使用者續留與轉換確實可能受影響，但效應大小會隨站別、客群與量測方法伸縮，沒有一體適用的換算公式。實驗室數據又自帶單次抖動，只測一回就下結論，等於把雜訊當發現；量測環境記錄在案、前後對照並列，數字才站得住。哪些指標值得長期盯，Core Web Vitals 的指標脈絡有完整整理，版面工具的選擇最終要回到這些數字來檢驗。

第三層是重用，也是多數人最晚學會的一層：把做好的版面存成圖案，讓之後的頁面用插入代替重做。生產力的開關就在這一層，實作的順序留給後面整節，這裡先把三層接起來看。

把三層放回挑選現場，問題會從哪一款最好，變成三個具體的檢查：這款把什麼寫進我的內容？它在沒用到區塊的頁面載入了什麼？它有沒有幫我把版面變成可重用的資產？三個答案都講得出來的，才有資格進候選名單；講不出來的，換下一款問同樣三題。挑外掛的過程，其實就是重複回答這三題的過程，而回答之前，得先把自己的需求講清楚，那是下一節的事。

五個問題，把模糊的「版面做不出來」變成需求卡

需求說不清楚，挑選就會變成憑感覺。能列為候選的套件有數十款到上百款，一款一款試完，時間早就超過排版本身。先依序回答五個問題，把答案寫下來，就是一張需求卡；拿著卡對照後面的處方，比拿著清單勾選可靠得多。寫卡的價值不在文件本身，在寫的當下被迫把「想要」翻譯成「條件」，很多裝了才發現用不到的功能，在這一步就會自己退場。

1. 版面範圍是單頁還是全站？只有某幾頁要做特殊版面，方向往區塊外掛走；連頁首頁尾、範本與全站樣式都要動，方向往整體編輯方式走。
2. 需要多少互動？靜態排版加輕微動態是一個量級；輪播、動態內容、複雜互動是另一個量級，對工具的要求高得多。
3. 之後由誰維護？自己顧，學習曲線可以陡一點；要交給客戶或非技術同事，編輯流程的單純程度就要排第一。
4. 效能底線在哪？對載入速度有硬性要求的頁面，把資源載入策略列為必答題，不是附加題。
5. 未來會換佈景主題嗎？會換，內容可攜性要提前想；短期不換，綁定深一點的工具也可以列入候選。

五個答案寫下來，模糊的感覺會變成具體的條件組合，條件組合可以直接對應處方。若第五題的答案把你推向整體編輯方式的比較，頁面編輯器的完整比較可以先讀，把光譜拉開再回來；其餘情況，繼續往下畫分界線。

需求卡在僵持不下的時候特別有用。兩三款候選各有吸引點，回頭讀卡，不回頭讀產品頁。產品頁列的是它有的東西，需求卡列的是你要的東西，兩者的交集才是該裝的東西。多數僵局是被產品頁說服去多要了用不到的功能，卡寫得越具體，這種動搖越少；網站方向變了，就重寫一張卡，別急著在外掛清單上做加法。

分界線畫在哪：補一種區塊，還是換一種編輯方式

區塊外掛與頁面編輯器的界線，一句話可以畫出輪廓：區塊外掛補元件，頁面編輯器換掉整套編輯方式。真正難判斷的是介於兩者之間的灰色地帶，所以判斷要寫成條件，沒有放諸四海皆準的標準答案。

分界線可以先畫粗一點再修：缺的是特定元件，用一款區塊外掛補上就好；要的是全站版面、動態範本與主題層級的掌控，才需要認真評估頁面編輯器；介於兩者之間的需求，先用原生區塊加上必要的擴充做一頁範例，確認編輯流程、輸出結果與載入效能都在可接受範圍後，再決定要不要換整套編輯方式。

能力上也別用一句話定輸贏。某些頁面編輯器整合了動態內容、彈出視窗或特定商店版型，這些確實是它們的強項；但使用區塊主題時，WordPress 的網站編輯器同樣能管理頁首頁尾、範本與全站樣式。該依實際需求、主題支援度與維護方式逐項比較，毋須預設頁面編輯器一定做得到更多。

個別工具各有專文可深讀：想看主流選項，Elementor 從安裝到進階的完整教學走過一遍流程；想看另一個方向，Bricks Builder 的操作教學也把細節攤開了。這裡只補一個判斷維度：頁面編輯器多為年費訂閱，綁定程度也深，用它蓋了幾十個頁面之後，換掉的成本會隨頁數累積。訂閱與綁定該放進總預算衡量，計法可以對照WordPress 架站費用的完整拆解，各方案金額會浮動，這裡不引用具體數字。

儲存層的差異也值得放進天平。區塊外掛生出來的內容，多數以標準區塊格式留在頁面裡；頁面編輯器則通常把版面資料存進自己的結構，內容欄只留一小段標記，完整版面要靠它還原。這不代表頁面編輯器不能搬家，多數都有匯出與轉換工具，而是代表轉換要靠工具、靠流程，不像區塊內容那樣天生就在頁面裡。評估時把這層差異想清楚，日後遇到搬家或改版，就不會被這件事追著跑。

範例頁的做法把判斷收得更窄：挑一頁真正要上線的版面，用原生區塊加候選擴充完整做一遍，計時、截圖、測速都留檔。做完之後問自己三件事：這個流程願意每週重複嗎？輸出的頁面手機版站得住嗎？與基準頁的測速差距在可接受範圍嗎？三個都是，就不必換；有一個遲疑，再往頁面編輯器評估，此時比較的也是具體的一頁，兩個抽象的產品類別幫不上判斷。

換軌的訊號長什麼樣子？假設一個情境：線上課程品牌每個月都推新活動，每檔都要出一頁新的促銷版面，設計需求高、上線時間緊、結構每檔都不同。這種使用密度下，範本系統與主題層級的掌控開始值錢，頁面編輯器才從選項變成答案。（假設情境，用於示意訊號。）相對地，一年只改兩次活動頁的站，把時間花在版面圖案化，回報通常更高。

候選名單怎麼來：排除法比評分法可靠

需求卡寫好，面前還是一排候選。評分法的麻煩在於分數會互相抵銷：功能多的贏了分數、輸了效能，繞一圈還是回到判斷。排除法問相反的問題：什麼情況下，一款可以直接出局。四個出局條件，任何一條成立，就不必再比較。

條件一，資源載入策略說不清楚。說明文件只列功能，講不出 CSS 與 JavaScript 怎麼載，先出局。驗證不難：Network 面板看資源路徑，路徑裡通常帶著外掛名稱，對得上就能歸因；連文件都迴避這題的，前景可想而知。

條件二，停用後內容不可讀。在測試頁做一次停用演練：裝上、做一頁、停用、再看一次。退化的形態依區塊類型而異，有的只剩文字、排版全垮，有的連內容都讀不出來。文字留得住、版面救得回的，才值得列入。

條件三，缺乏全域樣式控制。主色、圓角、間距若要逐區塊調，頁面一多就是維護負擔，也是樣式互蓋的溫床。全域設定能與主題同步的，優先留下。驗法不複雜：把同一顆按鈕放進三個頁面，改一次主色，三處都變才算過關；只動一處的，全域控制就只是設定頁裡的裝飾。

條件四，更新停滯。版次停在一年以上、與新版核心的相容狀況沒有下文，代表未來的維運風險要自己吸收，不值得。

這四關還有一個附帶效果：把研究外掛變成驗證外掛。研究是在別人的頁面之間比規格，越比越茫然；驗證是在自己的測試頁看行為，每一步都有產出。花一個下午把兩三款各自裝上測試頁跑一輪，得到的判斷比讀十篇評測更貼近自己的站，因為你的主題、外掛組合與內容長度，都是評測環境模擬不出來的變因。

四關都過的候選，通常只剩兩三款，這時再問一句：其中兩款，你講得出各自無法被取代的功能嗎？講不出來，就只需要一款，這句話就是混裝的檢驗法，跟喜好無關。速度的具體優化做法，另有專文整理網站速度優化的可行做法，這裡不重複。

五條處方對號入座

走到這裡，需求卡上的條件可以對號入座了。五條處方對應五種情況，每條只解決它聲明的那個問題，沒有全部都裝的劇本；主力一款，專精至多一款，是多數網站的上限。

↔ 左右捲動檢視完整表格

你的情況	處方	要接受的代價
特殊版面偶爾才需要	核心區塊加官方圖案庫	複雜版面要自己組，起步慢
要一款通用主力補常見元件	Kadence Blocks	樣式系統要熟悉期，樣式檔較厚
效能底線硬、願意用組裝換輕量	GenerateBlocks	互動元件要另尋方案
網站已用 Astra 主題	Spectra	綁該生態，離開後優勢折半
主力已定，還缺動畫互動	Greenshift 當加掛	本身也含版面功能，與主力重疊，須劃清分工

處方一，零安裝：核心區塊加官方圖案庫。你的情況是特殊版面一季碰不到幾次、內容才是主角，就屬於這條。要接受的代價是複雜版面得花時間組，別人一步匯入的版型，你要自己拼；換到的東西則很實在：後台乾淨、載入輕，日後要換任何東西都沒有歷史包袱。

處方二，Kadence Blocks。你的情況是需要一款通用主力，把按鈕、資訊卡、表單、文章網格一次補齊，就屬於這條；同團隊也提供AI 協助的初始版面生成，起站階段能省一些工。它的全域設定能跟主題接上，多頁網站的樣式一致性靠這裡顧。要接受的代價是樣式檔比極簡派厚，樣式系統也要一個下午才熟。

處方三，GenerateBlocks。你的情況是效能底線硬、願意用組裝換輕量，就屬於這條：少數幾個積木拼出所有版面，前端負擔小，做版的時候腦子裡想的是結構，不是元件名稱。要接受的代價是學習曲線陡，輪播、頁籤這類互動元件要靠付費版或另行處理，適合已經把容器觀念練熟的人。

處方四，Spectra。你的情況是網站已經用 Astra 主題，就屬於這條，同一條產品線的整合讓全域色彩與字體自動接上，預設樣式的完成度也高，Astra 主題的設定教學可以對照著讀。要接受的代價是離開那套生態後，整合的優勢少一大半，換主題前要把它當成變數重新評估。

處方五，Greenshift。你的情況是主力已經選定，還缺動畫與互動效果，就屬於這條，把它當加掛而非主力。它的強項在動態呈現：進場動畫、捲動觸發、數字變化這類效果，不用自己寫程式。要接受的代價是它本身也提供版面與資料區塊，功能與主力外掛重疊，不劃清分工就會變成兩套系統並行；動畫做過頭也會反過來傷體驗與效能，加掛前先想清楚哪些頁面真的需要動。

表單在這裡順便分流：一般聯絡需求，主力外掛的表單區塊應付得來；多步驟、條件邏輯、要串客戶名單系統的表單，交給專門的WordPress 表單外掛，不硬用版面工具湊。版面工具的表單元件贏在跟版面整合，專門表單工具贏在欄位邏輯與後端串接，需求落在哪一邊，看你要的是長得好看還是收得乾淨。

還有一種常見的猶豫：同一條處方裡的兩款，能不能都裝？答案回到混裝檢驗法。兩款通用主力功能高度重疊，幾乎講不出各自無法被取代的功能，所以通用主力就是一款；講得出分工的組合，只存在於主力加單一用途的加掛。這條界線畫下去，安裝頁面上多數的糾結會直接消失。

舉一個收斂的例子：南投的茶葉品牌要做形象官網，頁面就是品牌故事、產品線與幾頁內容，一年改版一次。需求卡寫下來，範圍以單頁為主、互動輕、維護者是自己、效能有底線、短期不換主題，對到處方二，主力一款就收工，多裝的每一款都在稀釋維護的注意力。（假設情境，用於示意收斂。）

把版面變成資產：圖案化的實作順序

第一個滿意的版面做出來之後，先別急著複製到每一頁，走一次圖案化的流程。順序走對，這個版面就從一次性的工，變成可重用的資產。時間帳是這樣算的：第一次做是完整的工，之後每一次只剩插入與改字；反過來說，只出現一次的版面，這筆帳不成立，圖案化本身也有成本，判斷永遠回到會不會重複這一條。

實作的起點有兩種：想快，從官方或佈景主題提供的現成圖案匯入，換文字、調顏色就是自己的版面；想完全掌控結構，用容器與網格把區塊一層層組裝起來。兩種起點做到滿意之後，再依重用需求決定保存方式：會重複出現的版面存成圖案，之後的頁面插入圖案、改掉文字就能上線。

存圖案時要選同步狀態，這個選擇比存不存更影響日後的維護。內容要全站一致的元件，選同步圖案，修改時會影響所有引用它的位置，改一次等於全站更新；各頁需要獨立調整內容的版面，選非同步圖案，插入時是各自的副本，互不牽動。判斷依據只有一條：這個版面在每一頁的內容相不相同。

圖案化本身也有界線：會重複使用的版型才值得存成圖案，只用一次的版面直接留在頁面裡，不必多一層維護。圖案清單越長，命名與整理的成本越高，找不到要插哪一個的時候，省下的時間又吐了回去。

拿定價表當練習：三欄方案、中間方案加強調、手機版收成單欄。先問原生表格加容器夠不夠，多數情況夠用；不夠再靠外掛元件，挑選時對照WordPress 表格外掛的比較。手機版是這個練習的真正考題：欄位收成單欄後，方案之間的排序、強調樣式還在不在，按鈕會不會擠成一團，這些細節處理得好，之後做的每個版面都會跟著受益。

做出來之後，圖案庫先補三件事：行動呼籲區段、報價卡、作者欄位。這三個幾乎每個內容站都會重複用到，而且整套流程不依賴任何特定品牌的外掛，換工具時照搬。圖案的管理也一次到位：命名用位置加用途，例如文章結尾行動呼籲、首頁促銷卡，找的時候用位置聯想；清單超過一頁，就刪掉不再用的。圖案庫會自然堆積，網站沒有人替你整理，一路堆下去，每一個新版面都要先考古，維護的節奏可以是每季清一次。

裝完當天就做：三個驗收動作

安裝完成的定義不是啟用成功，而是三個驗收動作都過：與基準頁對照測速、在測試頁做停用演練、逐一檢查手機版斷點。三項都過，這次安裝才算塵埃落定。

為什麼強調當天？因為記憶會稀釋責任。裝完當下不測，兩週後頁面變慢，已經分不清是外掛、是新圖片、還是那陣子的流量；對照要有效的唯一條件，是改動前後的環境盡量相同，而這個條件隨時間消失得最快。把三個動作壓在安裝後的同一個時段做完，證據才對得上因果。

測速的講究在條件：基準頁與複測沿用同一裝置、同一路徑，環境一變，差異就無從歸因；單跑一次的數字波動成分高，不引用也罷。基準頁怎麼挑也有影響：首頁加上一頁代表性的內容頁，各測數次看趨勢。只有首頁的基準，漏得掉內容頁長版面的問題；只有內容頁的基準，又看不出首頁的區塊密度，兩頁都留檔，對照才有意義。

停用演練前面出現過，這裡把它變成當天必做：在測試頁停用一次，看清內容退化的形態，對退出成本心裡有底。手機版則逐個斷點檢查，欄位堆疊順序、間距、按鈕寬度，多數破版都藏在這一步。

責任也要分層：版面歸區塊外掛；圖片壓縮與延遲載入交給專門方案，版面再輕也救不了沒壓縮的主圖，作法見WordPress 圖片優化指南；交付交給快取層，主機或 CDN 已有快取就不必再疊一套，真要選，快取外掛的比較有整理，留意最小化與延遲規則互撞的問題。維運上，版本更新前做相容檢查、例行把沒用到的區塊停用，讓儲存層的整潔可以持續。

三個邊界情況，把問題分流到對的工具

有三種情況看起來像區塊外掛的問題，動手前先分流，答案常常是別的工具。

情況一，購物網站的商品版面。商品頁與結帳流程有自己的範本系統，WooCommerce 官方即提供商品頁與結帳的區塊化設定，佈景主題的支援程度決定在這之上還能客製多少，先從適合購物網站的佈景主題裡挑對基礎；區塊套件真正派得上用場的位置，是首頁促銷、活動登陸頁這類非商品頁的組版。順序對了，需求常常比原本以為的小：主題換對，商品頁的問題跟著消失，回頭看促銷版面，往往只剩兩三個區塊要補。

情況二，一次性需求。臨時報名、活動問卷，用嵌入就夠，做法參考把 Google 表單嵌入 WordPress 頁面的教學，不必為一次活動裝一套外掛。判斷的句子很簡單：這個表單三個月後還在收嗎？在，值得一套正式工具；不在，嵌入就好。要長期收名單、欄位會越長越複雜的，再回頭看前面對表單的分流。

情況三，成本視角。免費外掛不等於總持有成本低，學習時間、維運注意力、未來換軌的隱性成本都要計入；判斷的框架回到分界線那一節的預算衡量，這裡不重複。

工具選型只是整體藍圖的一段。網站要被找到、被信任，還有更長的路，下一步可以接著讀WordPress SEO 的全局攻略，把版面之外的事情一次想清楚。裝上去的外掛總有退場的一天，判斷的路徑會留下來。