初次進入 WordPress 的世界，感受 WordPress 的自由與豐富的可能性，但是選擇多樣化也常常讓人不知所措，光是頁面編輯的方式就有這麼多種，到底怎麼選。

你也不知道怎麼選擇編輯頁面的方式嗎？我們可以來了解 WordPress 當中比較常討論的 區塊編輯器（Block Editor） 與 頁面編輯器（Page Builder） 兩者的差異，或許可以解答許多困惑！

本篇文章資料多翻譯自 WordPress 官方所提供的比較性影片，如果看得懂英文可以直接觀看影片。

什麼是區塊編輯器

區塊編輯器是 WordPress 內建的編輯器，他是以內容導向為主的一個編輯器，也叫做 Gutenberg（古騰堡）。Gutenberg 這個名字來自 15 世紀 Johannes Gutenberg 發明了移動式打字機， 從此改善人們文字的產出與知識的傳遞。

WordPress 的區塊編輯器從 2018 年更新後就隸屬於 WordPress 核心程式的功能，你不需要額外的安裝或更新，只要 WordPress 更新，他就會跟著一併被更新，這也意味著你可以免費使用，也可以獲得官方第一手的維護與支援。

區塊編輯是依靠每個區塊 Blocks 來編輯頁面，目的就是要快速與簡單的架設網站。透過每種區塊的不同功能，像是蓋房子或玩樂高一樣，一塊一塊的建築出網頁。

區塊編輯器的撰寫語言是以 React 語言來撰寫而成，透過這個現代的語言，讓整個使用體驗非常高速，也因著 React 模組化的特性，讓區塊編輯不僅簡單，也非常容易開發者修改。

什麼是頁面編輯器

頁面編輯器是 WordPress 第三方的軟體，並不隸屬於 WordPress 的核心程式當中，因此你需要額外的安裝頁面編輯器。這也有可能會產生額外的費用，因為他不隸屬於 WordPress 中，因此這款軟體維護也是第三方的軟體公司或工程師。

頁面編輯器在設計上有非常好的使用者體驗，最直覺的是拖曳（Drag and Drop）的編輯方式。在 2018 年區塊編輯出現之前，頁面編輯器真的是 WordPress 世界的一大救星。

其最主要目的就是提供富含設計風格的區塊、模板、或甚至是一個完整網站解決方案，你甚至只需要按一個鍵，你的網站就有個雛形了～比起區塊編輯，頁面編輯更有設計感，而且你也不需要太多的客製化，就可以完成一個網站設計了。

然而在使用頁面編輯器時，你有可能會遇到價格昂貴、比較慢、程式較肥大、或者甚至是學習上比較困難。

最嚴重的問題就是在每次更新時，頁面編輯器都需要戰戰兢兢的更新，因為不知道這次的版本到底有沒有完美支援，或者某些功能是否會有缺失…

雖然有這些缺點，但頁面編輯器的簡單使用與設計感，頁面編輯器還是有許多的擁護者，而隨著每一次的更新，頁面編輯器所遇到的問題也隨之銳減。

區塊編輯器與頁面編輯器比較

區塊編輯與頁面編輯器都是 WordPress 使用者可以選擇的頁面編輯方式，然而這兩個在雙棲使用上仍然有點困難，因此我建議大家還是選擇一種來作為主要架設網站的方式就好。

也因著兩者個差異性，我們可以來探討看看到底這兩種編輯頁面的方式，在功能與使用上有什麼差異。也希望透過對兩者的比較，你更能選擇到最適合你的編輯方式。

拖曳編輯 Drag Drop

相較於傳統的寫程式方式，頁面編輯器有非常優秀的拖曳編輯功能，你只需要將你想要的物件拖曳到網頁裡面來，就可以生成物件！因此頁面編輯器也常稱這個功能為所見即所編輯。如果你需要非常視覺化的編輯，頁面編輯器絕對是你的首選。

相較於頁面編輯拖曳，在區塊編輯上拖曳功能就比較沒那麼直覺，當然在這幾次的 WordPress 更新中，你也可以開始拖曳物見到你需要的地方，然而使用上依然沒有頁面編輯器流暢與直覺。

預設樣式

頁面編輯器有非常豐富的預設樣式，以結論來說我認為比區塊編輯器還要有設計感也還要來得漂亮！因此如果你是希望可以快速架設網站，或者需要已經設計好的區塊，那頁面編輯器絕對可以滿足你的需求。

區塊編輯器在預設樣式的發展目前還沒有頁面編輯器來得豐富，然而也漸漸看到區塊編輯器善用 WordPress 社群的力量，開放給所有用戶上傳他們設計好的區塊供大家使用，相信在不久的將來，區塊編輯器也能在預設樣式這個領域展露頭角。

Gutenberg Hub 這個網站是目前區塊編輯器上提供最多樣式的組織，你可以直接找到喜歡的區塊並複製貼上到你的網站做使用！我認為這個網站的設計庫幾乎媲美了頁面編輯器所提供的樣式。

客製化選項

如果你喜歡客製化，頁面編輯器所提供的選項與樣式功能非常多！多到你需要花時間學習與熟悉的程度～不論是大小、顏色、漸層等… 你想得到的編輯工具幾乎一應俱全。

相較於頁面編輯器，區塊編輯器所提供的客製化選項就相對來說少了許多，有時候你甚至要寫一些 Css code 才有辦法達成。然而 Kadence 這個外掛就解決了這個窘境，他所提供的客製化選項幾乎包括了頁面編輯器所提供的所有功能。

網頁載入速度

“區塊編輯器的網頁速度超快！”

這大概會是所有區塊編輯器推薦者會跟你說的。然而我必須要說，在 2020 年開始，市場上開始出現高速的頁面編輯器，因此這句話目前可能有待商榷了！我可能需要重新修改一下這句話

“區塊編輯器可以很簡單就讓你網頁速度超快！”

你不需要做太多額外的設定，不用懂太多的專業技術，網站速度一樣起飛到不行～

而頁面編輯器在使用上，你需要注意他載入什麼 js 腳本，他有沒有載入額外的程式碼，或甚至他的 DOM 結構乾不乾淨，你需要一點專業技術才有辦法精熟並校正他！

學習時間成本

哪個比較好學？

在 WordPress 5.0 更新以前，我認為頁面編輯器絕對是比較簡單與直覺的。然而自從 WordPress 5.0 更新後，Gutenberg 問世，我會認為兩者的學習成本幾乎一樣。

不過習慣還是挺難改變的，因此現在依然有許多人的網站版本停留在 4.x 那個時候～或者將 Gutenberg 停用下來。如果你是新手要投入，我會建議從 Gutenberg 開始學習起，畢竟他是免費的！

相容性

程式語言的東西就是會遇到 Bug，不管誰來維護都一樣！然而可怕的不是遇到 Bug，而是遇到 Bug 沒人修。

區塊編輯器的維護人員就是 WordPress 本身，他與 WordPress 核心是綁在一起的，因此你不用擔心相容性問題，基本上所有相容問題都可以被 WordPress 的一次次更新而解決。

頁面編輯器的維護人員就是開發者或開發公司，因此你使用的頁面編輯器背後的開發人員信譽也是要注意的一個因素之一，畢竟如果遇到擺爛不管，或者需要你自己 debug 的情形，到時候情況就不是這麼簡單解決了～另外，每一次的更新都要注意相容性問題，或許更新與 WordPress 不會有太多衝突，但與其他外掛可能會有衝突問題，因此這也是大家要考慮的外部成本之一。

價格

區塊編輯器是免費內建於 WordPress 的，當然也許多開發者開發第三方的區塊給大家使用。而第三方區塊甚至有付費版本，付費版的一定有更強化的功能與設計庫給你使用！不過如果要省預算，免費的區塊編輯器與第三方外掛絕對就可以應付大部分人需求。

頁面編輯器有些會提供免費版的供你試用，然而如果你需要體驗完整的功能，絕對是付費版的功能才齊全。

大部分的編輯器價格都是以訂閱制，也就是一年要繳一次錢。因此這也是需要納入考量的成本之一！

網站安全

區塊編輯器的維護人為是 WordPress，因此安全性問題完全不用擔心，後面有一堆人在保護你的網站安全。記得 2020 年有發生 Woocommmerce 外掛安全疑慮（也是 WordPress 官方維護的外掛），他們馬上提供更新版本，一下子就解決這個問題了！

頁面編輯器的安全性就是依靠開發人員與開發公司，如果頁面編輯器有安全破口，你的網站是有可能被駭客破解的！不過全世界任何軟體都一樣拉～重點是有做好每日備份，才不會損失所有你努力的內容！

Summary

到底這兩者，要選哪個比較好，我統整了幾個要點供你參考：

你希望可以低成本（免費）、超多第三方免費外掛、快速開始不用額外安裝，或者你是新手想要嘗試編輯頁面，你很適合選擇區塊編輯器！

如果你希望有漂亮的設計庫，你在尋找一站式的解決方案，或者你很願意學習進階的排版與功能，你就比較適合頁面編輯器。

透過這篇文章，相信你一定更加瞭解區塊編輯器與頁面編輯器的差異與相同之處，不過編輯器就只是一個工具而已，真正重要的還是你網站的設計與內容，因此學習使用編輯器，並能開發出你心目中最理想的網頁樣子更為重要！