ＷordPress佈景主題怎麼挑？４＋１套主題＆編輯器組合真心推薦！（2024）

「看佈景主題的官方Demo都很漂亮，但實際使用上，卻是一調整就版面整個崩壞…」「頁面上華麗豐富的視覺效果，但實際卻是很多個外掛東拚西湊起來的。」「我都還沒添加內容，全新空白頁面載入速度就超慢！」．．．這類層出不窮的抱怨聲，歐森聽過太多太多。

載入速度超級慢、一套板就崩壞、要成套安裝的外掛一長串……你也有過這樣的佈景主題惡夢嗎？我有！

就歐森的經驗，根本原因出在多數人挑佈景主題的時候，只被主題官方的Demo外觀吸引，而過度著重於「網站能呈現的華麗視覺效果」，而忽略了「是否適合自己使用」這一核心問題。

所有工具都有其學習曲線，而對WordPress 這樣集合眾多主題、外掛的內容管理系統來說，

各工具之間的協調性、兼容性、操控性，絕對該是優先於「網站視覺效果」的考慮要素！

核心思考：先選後端編輯器陣營、再關注前端視覺效果

幾乎所有的頁面／文章上的內容素材，都需要透過後端編輯器來完成排版呈現。

每個佈景主題，都有其支援的後端編輯器（editor），先確認該佈景主題所對應使用的後端編輯器，以及配合的外掛清單，才能在製作頁面時得心應手、讓想法付諸實現，而不會因為怎麼調整都不對而感到挫敗。

歐森習慣將後端編輯器，區分為【區塊編輯器（Gutenberg）】、【3rd 區塊編輯器（block editor）】和【頁面編輯器（page builder）】及【其他】四大陣營：

區塊編輯器（Block Editor／Gutenberg）

古騰堡編輯器是自 WordPress 5.0 開始引入的測試用編輯器，作為傳統編輯器TinyMCE的替代品，它提供了一種基於「塊（Block）」概念的新設計方式，玩法就像疊積木一樣：

我們可以自由將各種不同功能的＂塊＂（例如標題塊、文字塊、按鈕塊、小部件塊、價格表塊、圖片塊等等）相互堆疊組合，讓頁面／文章呈現方式更具靈活且彈性，並提供更好的可視化（所見即所得）體驗。

WordPress 5.9 版之後，古騰堡編輯器正式蛻變為「區塊編輯器」，進一步朝向將網站前後端都納入編輯範圍的「全站編輯器 (FSE, Full Site Editor)」 發展，包含網站頁首(header)、頁腳(footer)及其他部分都能編輯，讓不懂程式撰寫的站長也能做到一定程度的自定義。

2023/3/30 更新：ＷordPress 自 6.2 版本起，大幅提升FSE功能，雖然仍然與 3rd區塊編輯器／頁面編輯器帶來的架站體驗有不小差距，不過若你有興趣也可以試試看哦！

目前區塊編輯器仍有巨大進步空間（優缺如下表），但其勝在輕巧靈活。搭配好的佈景主題，幾乎可以保障網站載入速度，許多教學者也提倡只使用區塊編輯器，讓網站極簡化、輕量化，歐森也非常看好它的後續發展。

3rd 區塊編輯器（3rd Block Editor）

WordPress原生區塊編輯器，功能相對較陽春。

於是許多第三方開發商，也圍繞＂塊＂(block)的設計核心，開發出具備眾多擴展功能的編輯器工具，來填補原生區塊編輯器的不足，歐森統稱為【3rd 區塊編輯器】，它們通常與原生區塊編輯器一樣，代碼較乾淨、執行速度快（但並非絕對）。

歐森私心最愛的是【SWELL佈景主題】內建的區塊編輯器，其他知名的有：Useful Blocks、Kadence Blocks、Genesis Blocks、Stackable、Ultimate Blocks 等等……每一家公司開發的區塊編輯器，所包含的塊功能模組都不盡相同，你可以根據需求選擇。

理論上，這些3rd區塊編輯器，都可以和原生區塊編輯器混合使用，你甚至可以同時安裝多個不同3rd區塊編輯器，例如 Kadence Block + Ultimate Blocks，不過為了後續維護及網站效能，歐森建議只安裝其中一種就好。

需要留意的是，一些知名的、非區塊的頁面編輯器（page builder）廠商，在原生區塊編輯器問世之後，也陸續推出專屬的區塊外掛，允許用戶將其頁面編輯器所創建出的模板，導入到區塊編輯器中使用，例如：Elementor Blocks（Elementor）、Divi Layout Block（Divi）等。

但歐森覺得效果很不好，如果你不是同時對兩類編輯器都很熟悉，很容易因混用不當，造成難以預知的錯誤，雖然並不會造成網站崩潰，但發生問題時你也很難除錯。

頁面編輯器（Page Editor）

WordPress還在使用經典編輯器的時代，為了讓網頁製作更美觀更多功能，以「所見即所得」、「可在前端直接編輯」、「滑鼠拖拉就能使用」、「不必撰寫CSS就能有豐富視覺效果」及「多樣的的預置模板」為主打的頁面編輯器（page builder）非常受歡迎。

然而，伴隨主打「不用寫一行程式碼」就可以自定義的豐富選項／視覺特效／預製模板而來的，往往是冗長且重複的程式碼結構、龐大臃腫的容量，以及超慢的網頁載入速度，這也是過往頁面編輯器為人詬病的理由。

但是這幾年隨著 Google 將「網站速度」列入重要排名要素，以及訪客對於緩慢網站越來越沒耐心，許多老牌且知名的頁面編輯器廠商，都對其旗艦產品做了非常完整地重寫更新，多數都能兼顧速度、效能及視覺呈現，不失為WordPress站長們的好選擇。

另外，這些老牌的頁面編輯器，通常擁有數量龐大的使用者族群，以及充滿活力的生態圈，基本上你遇到的任何問題，在社群中都能有高手為你解答。

以全球超過88萬用戶的佈景主題 Divi Theme 來說，它不僅擁有超過2000個預設好的頁面模板，還擁有自己的外掛市場 Divi Marketplace，眾多有創造力的開發者，為 Divi 量身打造各種功能外掛，讓使用Divi佈景主題的站長，配合其配套的頁面編輯器（Divi Builder）使用，架站時更能享受其中樂趣。

歐森推薦的頁面編輯器，除了Divi Builder（與Divi Theme搭配使用），還有 Brizy 和 WPBakery Page Builder；至於台灣滿多人推薦的 Elementor 和 Beaver Builder，歐森用起來覺得沒有前述三個順手，但純屬個人喜好。

其他（Other）

WordPress 世界這麼大，當然編輯器陣營也不會只有前面三大類。

歐森將無法歸於上述三大陣營的，都放在【其他】這個分類中，它們通常是以「程式開發人員」為主要目標用戶的WordPress架站工具，它們提供的預設模板數量不多，但提供更彈性的自定義框架、更乾淨的操作介面，讓開發者可以更自由更靈活地撰寫 CSS，甚至允許自定義 JS。要比喻的話，就像是Photoshop一樣，給你一個全空白的畫布，但提供所有你需要的小工具，讓你自由發揮。

歐森自己有在用的是 Oxygen Builder，安裝啟用後它會自動禁用其他WordPress後台的預設編輯器，以及佈景主題的CSS代碼，初次看到會以為網站好像壞掉了XD，但這也代表你踏入更自由寬廣的架站領域；雖然它的學習曲線非常高，但學會之後你能感受到架站自由帶來的愉悅。

那與Oxygen Builder 核心理念相似，但操作上更貼近頁面編輯器體驗的，還有近年很夯的 breakdance builder、bricks builder，各有所長，你都可以多方看看。

9大思考角度，助你評估佈景主題

從編輯器陣營開始選擇

歐森強烈建議你先不要著重網站華麗的視覺效果，而從後端編輯器角度先選擇陣營。如果你是 WordPress 新手站長，歐森推薦你從【3rd 區塊編輯器】及【頁面編輯器】兩者中擇一開始。

是否支援動態內容（dynamic content）並與自定義欄位外掛兼容？

所謂的動態內容（dynamic content），簡單來說是允許站長做一個網頁模板，模板上的各個欄位中的資料，是從資料庫中即時提取，而非你手動輸入的靜態資料。

例如你經營一個戶外用品部落格，你的其中一個文章類型為「商品評測」，它有一些固定的欄位，包含商品名稱、價格、星級評分、客戶推薦評價、商品圖片輪播。

當你每次寫商品評測文，都要從頭到尾排版一遍，你可能寫3篇就不想寫了；反過來說，如果你有很毅力寫了50篇，才發現你的商品評測的文章版型想要異動，光想到要重覆處理這50篇文章你就會頭皮發麻。

所以，如果你的佈景主題／編輯器有支援動態內容功能，你可以搭配自定義欄位外掛，例如 Advanced Custom Fields（ACF），先創建該文章版型（例如商品評測）需要的欄位以及它們的資料屬性，然後利用編輯器做出該文章類型的專屬模板，將這些欄位套用動態內容功能。

如此一來，以後你要新增商品評測文章的時候，只要填妥這些欄位的資料，按下送出，它就會自動套用這個模板，超級快速！未來你想異動模板的樣式，也只需要針對主模板重新設計，就能自動套用上所有同一類型的文章。

每個編輯器所支援的動態內容的欄位種類不盡相同，也不一定標榜與自定義欄外掛（如上述提到的ACF）完美兼容，睜大眼睛多了解，總是不吃虧的。

是否有豐富詳細的教學文檔／影片資源？

任何的佈景主題都有其學習曲線，你都需要花時間了解它的功能、運作邏輯，並勤加練習。

如果一個佈景主題的官方網站，並沒有提供詳細的教學文件／影片資源，或是你能找到的資訊已經很久沒有更新，歐森覺得會有很大風險，表示官方並不熱衷於與他們的顧客保持良好的關係。

該編輯器是否有成套的佈景主題？

佈景主題像是電腦的主機板，而編輯器則像是各種插入配件，兩者之間配合是否良好，很大程度決定你使用上舒不舒服、能否達到你心中所想。而歐森偏向「成套的佈景主題和編輯器」，也就是這兩者由同一家公司開發，彼此之間的契合度會更完美、發生問題時也能更快速獲得解決。

如果你也偏好成套的解決方案，歐森推薦你參考【SWELL】、【Kadence】或【Divi】，他們都有成套的佈景主題和編輯器。

參考該佈景主題用的 JS 及 CSS 框架

不嚴謹地廣義來說，CSS主要負責網站的「外觀」、JS則是網站的「功能」主擔當；而這兩者使用的開發框架是否輕量、高效，很大程度影響你的網站基底是否臃腫、運行速度及效率。

當然，並不是說用了某個框架網站效率就定型了，開發者有很多種方式可以提高網站運行效率，例如動態CSS、將Javacript模塊化、只在需要的時候延遲加載等等。但以現行的CSS及JS框架來說，如果佈景主題使用 Vanilla JS 和 Tailwind CSS 進行開發，歐森會給予它較高期待。

佈景主題的使用者生態圈是否龐大健全？

龐大健全的用戶生態圈，代表你遇到的使用問題，能夠最快速找到解法，因為你不會是第一個也不會是唯一一個遇到該問題的人。

要判斷佈景主題的生態圈是否健全的一個簡單方法，就是在Facebook上輸入該主題名稱去搜尋看看，如果官方有長期在經營自己的社團，或是有大量地區型／特定主題型的用戶社團，通常該佈景主題的生態圈都非常活躍。另外，許多佈景主題官方也都會不定期推出 Podcast節目、線上Live研討會，這也是評估官方是否積極的檢視角度之一。

確認付費方案細項，以及可安裝的網站數量

付費的佈景主題，收費方式通常採「年繳」居多，有一些則提供「一次付費的終身方案」。另外，有些開發商除了佈景主題／編輯器，還有許多付費外掛，所以也可能在「年繳」方案中，提供包含不同外掛功能的子方案，讓使用者依自身需求來選擇。

歐森傾向「有終身方案」且「不限網站安裝數」的付費方式。

以KadenceWP 來說，除了它的佈景主題Kadence Theme 和區塊編輯器 Kadence Blocks都有免費版及付費版外；官方還有許多有用的外掛，包含針對電商網站的 WooCommerce Shop Kit 工具包、針對歐森這種網站架設工作的 Kadence Cloud 雲端工具、等等。

所以KadenceWP在價格方案中，就有只包含付費主題＋付費編輯器的Essential Bundle方案（年繳），以及額外加入所有外掛的Full Bundle方案（年繳），還有一次付費的大全套 Lifetime Full Bundle方案（終身），且都是不限安裝的網站數量。

而 Divi 方面，佈景主題 Divi Theme 及 頁面編輯器 Divi Builder 沒有免費版本。其付費方式則是單純地分為「年繳」和「終身」兩種，都可以不限量使用佈景主題、編輯器，以及官方開發的電子報訂閱外掛 Bloom，以及社群分享外掛Monarch。

至於本站使用的【SWELL】則更加單純，一次付費、終身無限網站授權使用，非常划算！

電商網站：是否支持 woocommerce？

如果你打算用WordPress架設電商網站，很大機率會用woocommerce這套電商外掛。

Woocommerce本身是免費的，但是它的預設欄位和使用者邏輯可能有落差，例如我們的姓名欄位並沒有First name 和 Last name 需求；另外在單一商品版面、商品通知信件、結帳頁面等的內容呈現方面，woocommerce預設提供的設計滿陽春的，也不支援動態內容的提取。

所以如果你有使用Woocommerce需求，可以看看該佈景主題／編輯器開發商，是否有針對它提供額外功能。以Kadence來說，它有 Kadence Shop Kit 工具包；Divi 則本身就提供十多個 Woocommerce專屬功能模塊，幫助你從頭到尾打造專屬的購物頁面模板。

回歸本心：你真的有需要這麼多功能嗎？

你想要的，通常遠多於你需要的。

以【商用部落格】來說，我最需要的是：「內容」的安排呈現，以及導引訪客完成各種CTA的動線設計，網站外觀簡單乾淨就好。所以我會將重點放在不同主題／編輯器的功能模塊，是否能幫助我將資訊按照我要的方式呈現，而非各種諸如打字機效果、3D翻牌、滑鼠懸停等特效。

歐森推薦的 ４＋１套佈景主題＆編輯器組合

歐森最愛！日本No.1商用主題｜SWELL

輕量套裝｜Kadence Theme + Kadence Blocks

強強聯手｜Blocksy Theme + Brizy Builder

一站式解決方案｜Brizy Cloud

結論

這篇文章，歐森用了整整三個工作天撰寫修改，我反覆思考並整理自己當初選擇佈景主題的痛點，以及針對新手站長和不同需求情境，綜合評估出最推薦的 4+1 套組合，希望能幫助到準備架網站的你～

如果喜歡這篇文章，覺得它對你有幫助，歡迎留言正向交流，並請將文章分享給更多人哦！：）