本站使用日本人氣 No.1 商業佈景主題【SWELL】架設!瞭解更多

WordPress佈景主題怎麼挑?4+1套主題&編輯器組合真心推薦!(2024)

歐森 Olsen

選對佈景主題,才能為你帶來舒服輕鬆的架站體驗!

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

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

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

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

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

目錄

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

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

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

歐森習慣將後端編輯器,區分為【區塊編輯器(Gitenberg)】、【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 更新:WordPress 自 6.2 版本起,大幅提升FSE功能,雖然仍然與 3rd區塊編輯器/頁面編輯器帶來的架站體驗有不小差距,不過若你有興趣也可以試試看哦!

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

區塊編輯器
優點
  • 代碼乾淨、輕量、速度快
  • 為WordPress內建核心功能,兼容性100%
  • 完全免費
區塊編輯器
缺點
  • “塊”的種類不多,較難快速做出複雜的設計
  • 每個”塊”提供的可調整選項較欠缺
WordPress內建區塊編輯器(Gutenberg),適合網頁設計需求較低的站長

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)等。

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

3rd 區塊編輯器
優點
  • 代碼乾淨、輕量、速度快
  • 功能塊種類眾多,填補原生區塊編輯器不足
  • 區塊編輯器之間,可相互搭配使用
  • 部分區塊編輯器有提供免費版本
3rd 區塊編輯器
缺點
  • 官方不一定有推薦與其搭配的佈景主題,需要多看其他使用者的評價與心得。
  • 有些區塊編輯器只有付費版本,無法試用
  • 須避開頁面編輯器所推出的區塊相容外掛模組
區塊編輯器 Kadence Blocks 操作畫面,是不是跟古騰堡編輯器很相似呢?

頁面編輯器(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,歐森用起來覺得沒有前述三個順手,但純屬個人喜好。

頁面編輯器
優點
  • 詳細完整的自定義選項,你幾乎可以做到任何效果
  • 使用者生態圈龐大,沒有社群解決不了的問題
  • 以該頁面編輯器為核心打造的外掛眾多
  • 與其他知名外掛通常都有合作、兼容性極高
頁面編輯器
缺點
  • 核心程式容量通常偏大,網頁載入速度略慢
  • 功能豐富但通常大於你實際需求,學習曲線更高
  • 價格通常較高
知名的頁面編輯器 Divi Builder 操作畫面,所見即所得非常有魅力!

其他(Other)

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

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

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

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

Oxygen Builder 操作畫面,是不是有種Photoshop的即視感?

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翻牌、滑鼠懸停等特效。

歐森推薦的 4+1套佈景主題&編輯器組合

歐森最愛!日本No.1商用主題|SWELL

商用部落格、企業形象網站

如果只能買一套佈景主題,歐森毫不猶豫選SWELL!

SWELL設計核心是「簡單而強大」,它不只增強WordPress區塊編輯器的原生塊,也新增18個新的塊功能,並全部以「讓使用者快速創建內容、獲得商用價值」為核心打造。

你可以在文章中插入廣告代碼、創建可易於管理的聯盟營銷塊、以強大的表格功能展示內容資訊、輕鬆設定文章標題/文章列表格式/首頁輪播圖……等等強大功能,而不需要撰寫任何一行CSS!且不只是商用部落格,SWELL要做企業形象網站也很方便!

雖然其操作語言為日文,但其實邏輯簡單明瞭不複雜,相當好上手;SWELL官方提供詳盡的操作手冊,歐森也正製作繁中非官方手冊線上課程,敬啟期待!

輕量套裝|Kadence Theme + Kadence Blocks

3rd 區塊編輯器陣營首選

歐森從2017年踏入WordPress世界後,幾乎不使用免費主題,因為通常質量不是太好且後續更新會斷掉。但從古騰堡問世,帶來”區塊(block)”概念後,Kadence Theme + Kadence Blocks 的輕量及架站速度感,以及與其他高級付費主題相媲美的自定義選項,無疑成為我首選的免費佈景主題

當然,如果你跟歐森一樣,有動態內容、Mega Menu等設計需求,Kadence Pro 版本也絕對是物超所值之選:)

全能套裝|Divi Theme + Divi Builder

頁面編輯器陣營首選

Divi 功能超級豐富、介面友善容易上手,雖然對新手來說龐大的功能讓你眼花撩亂、學習曲線較高,但官方提供了非常詳盡的教學文檔及影片,網路上你也找到豐沛的教學資源;全球超過88萬用戶所形成的強大生態圈以及官方遠端支援系統,讓你遇到任何問題都能有解。

另外,Divi 是 WordPress圈信譽很好的主題開發商,因此許多知名的外掛商,都與 Divi 有密切合作(點我看合作列表),兼容性很高。加上 Divi 自己的外掛市場,以及每周免費發布的網頁模板(已經累績超過2000個預制模板囉!),你幾乎能以Divi為核心,架出任一類型的網站!

至於舊版 Divi 為人詬病的頁面載入速度,在2022年初的全面大改版之後,已有了相當有感的改善

如果你喜歡豐富的視覺效果,以及想套用模板快速架站,Divi 會是你的好選擇:)

強強聯手|Blocksy Theme + Brizy Builder

極簡風格/華麗設計,都可以搞定!

Blocksy 和 Kadence 一樣,都是歐森心中極輕量佈景主題的代表。Blocksy 預設與古騰堡編輯器搭配使用,而原生的 Blocksy 就能快速做出很有質感的部落格/雜誌風格網站,無須其他編輯器外掛。

但如果你希望你的網站不只是純粹的部落格,而是在其他類型頁面也能有精彩排版呈現,那一樣輕量且操作直覺的 Brizy Builder 絕對是它最好的搭檔!

一站式解決方案|Brizy Cloud

從主機到架站工具全都包,每月最低不到 $7美金!

Brizy Cloud 是一個基於雲端運行的 SaaS 應用工具,如果你用過Wix、Squarespace、Weebly,歐森認為 Brizy Cloud 是更超值的選擇。

與上述三種組合主題+編輯器組合不同,使用 Brizy Cloud ,你不必自己租用網站主機跟維護它。直接登入Brizy Cloud 後,即可在線上與你的協作夥伴,共同架設、編輯、管理你所有網站;基於雲端運行的優勢,Brizy Cloud 已經配備了SSL 及 全球CDN服務,並且與 Google 翻譯集成,非常方便。

Brizy Cloud 可以用來做具有動態內容模板的部落格,以及很流行的 Web Story 風格網站,不過歐森最常用它來創建以Landing Page 為基礎的多頁面網站,或是為客戶製作需求不複雜的形象官網。

要說缺點的話,Brizy Cloud 並不像WordPress一樣,讓你任意安裝各種外掛,在應用彈性上較為缺乏。但你可以從他們的合作集成功能中,去串接你要的功能服務:)

結論

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

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

聯盟推廣揭露說明

本文章含有聯盟推廣連結,當您透過本站連結至相關服務商,租用服務/購買產品,歐森將會獲得一筆推廣佣金,用以維護本站營運。敬請放心,您不需為此支付任何額外費用,亦不會因此損失任何服務/商品應有權益,非常感謝您:)

請分享給更多人!^^
  • 已成功複製本頁網址(URL)!
  • 已成功複製本頁網址(URL)!

責任編輯

不在電腦前寫稿剪片,就在探索世界角落的路上。信仰「內容」的力量,相信發自內心的真誠分享,就是數位時代能攏聚一眾人心的關鍵密碼!:)

歡迎留言一起討論!

撰寫留言

目錄