在上一集中，我們已經分享完關於 WordPress.com 跟 WordPress.org 的差異、共享主機的好處、圖片處理簡單化、有問題找官方跟電子信件等的基礎概念，而在這一集中，就要來聊聊大家最容易搞混的區塊編輯器、頁面編輯器跟 Gutenberg 了。
在這集中，收集了幾個蠻在各社團中出現與編輯器有相關的問題，從佈景主題到頁面編輯器，再從編輯器衍生出第三方、區塊編輯器及 Gutenberg，最後就是文章編輯最容易犯的錯。特別是關於 Gutenberg 的部分，很多老手跟講師還在 Gutenberg 跟區塊編輯器傻傻分不清。
希望透過這次的分享，能讓大家夠更加了解區塊編輯器，畢竟這是官方主力再推的項目，也是未來 WordPress 的走向，尤其是在 5.8 版本中可以看到區塊編輯器進化到全站編輯，不同於過往的大改，是宣告未來的趨勢，也許有人還是喜歡傳統編輯器跟頁面編輯器，然而時代持續演變中，區塊編輯器絕對是未來的趨勢。
還有就是要謝謝桓桓鄉寇的Eric 協助校對文中是否有需要糾正之處，秉持著 WordPress 開源精神，資訊取自社群，自然也要回饋給社群，這就是 WordPress 社群迷人之處。
佈景主題與頁面編輯器，傻傻分不清楚
佈景主題，簡單說就是把程式碼圖像化，讓你不用去看程式碼來調整網站結構，而是直接透過已經圖像化的程式碼去設定跟拖拉，藉由圖像話讓複雜的網站設計能降低難度，讓剛新手也能以比較簡單的方式完成網站，這也是為什麼 WordPress 完成安裝後，會需要載入一款佈景主題的原因所在。
佈景主題就像房子的主結構，像是鋼筋水泥，基本上一但在主結構確定好的設計，要做更改就會很麻煩，就像是要把廚房改成廁所，不是不行就是很麻煩，套到網站來說，網站中的選單、頁首頁尾、可全域控制網站顏色字體大小等，這些都由佈景主題所負責掌控。
由於開發團隊對於網站結構有不同的設計規劃，有些在 A 家佈景主題能輕鬆調整的功能，在 B 家可能會搞得很複雜，這是很多討論社團要求發問者要告知佈景主題是什麼的緣故，有些問題在佈景主題的設定中就能解決，有些則否，要先搞清楚是哪款佈景主題，方能對症下藥。
然而不管開發團隊如何設定，基本上佈景主題都是有一個專區可以進行主結構的調整的，輕量型佈景主題像是 OceanWP、Astra 是在「自訂」選項中。多功能佈景主題如 Avada 之類的，除了在「自訂」當中有之外，通常在後台側邊資訊欄位中也有項目，這些就是調整網站主要結構之處，例如文章中的文字大小字體要一次變更就是來這邊處理。
要注意的是，每款佈景主題都是獨立個體，也就是說開發團隊在規劃佈景主題都會不同考量，不同佈景主題就是不同程式碼所組成，不會有一模一樣的佈景主題，所以說不要拿 A 佈景主題來問為什麼 B 佈景主題沒有，就像不能拿著明朝的劍去斬清朝的官。也因此如此，通常不建議新手購買太過冷門的佈景主題，因為太冷門可能台灣地區就你一個買，有問題也沒人救得了你。
如果不確定自己有意購買的佈景主題是否屬於冷門，可以到專門可以讓大家自行登錄 WordPress 網站的平台－WP 網站資訊，可以到其中的佈景主題專區查詢該你所購買的佈景主題是否有人使用，然後又有幾位使用，雖然這網站並非官方設定，不過收錄資料頗多，依舊很有參考價值。
頁面編輯器則是跟佈景主題相搭配的，如果說佈景主題是房子的鋼筋水泥，那麼頁面編輯器負責的就是房子室內裝潢，頁面的版位從顏色、字體、動畫、圖片等等你所能在網站上看的內容，幾乎都是由頁面編輯器主導，這時候就跟佈景主題的關聯性不大了。
因此購買佈景主題之前一定要確認使用哪一款頁面編輯器支援，每一款頁面編輯器能做到的效果，以及設定位置都是天差地遠的不同。雖然大部分的佈景主題都會與市面上的熱門頁面編輯器相容，但偶爾還是會有例外，假設你擅長 Elementor，結果購買的佈景主題不支援，萬一硬是要用就會發整個很卡，甚至直接掛掉都不稀奇，購買前請務必詳閱說明書。
簡單說佈景主題是整個網站外觀的主要掌握者，大至功能，小至背景顏色都是由佈景主題所掌握，就像是一棟房子的室內裝潢設計師，網站雛型就是由佈景主題來主導；而網站中更細膩的局部設定，像是單一網頁的排版、字體選擇大小、圖片位置等都是由頁面編輯器負責，可說是網站風格由頁面編輯器來主導。
不過有些強大的頁面編輯器，如 Elementor 會把部分佈景主題的功能給搶走，像是頁首頁尾的設定，讓人覺得好像不需要佈景主題的存在，那是很大部分沒有把佈景主題的功能跟頁面編輯器的功能分清楚，各司其職才能讓網站有效率的運行，當然你也可以全靠頁面編輯器，只是很浪費效能而已。
頁面編輯器有兩種，第三方頁面編輯器跟區塊編輯器
在 WordPress 5.0 推出之前，講到頁面編輯器就是泛指所謂的第三方頁面編輯器，像是 Elementor、Divi、Beaver Builde、WPBakery 等都是，這是因為當時的 WordPress 內建的傳統編輯器在製作網頁時，會需要對 HTML 跟 CSS 的有一定的了解，對於程式碼新手而言並不是很方便。隨需求所產生的應對方案就是第三方頁面編輯器，這些頁面編輯器的最大特色就是直覺式操作，學習時間較低，能做出的效果比傳統編輯器強上很多，因此廣泛受到歡迎，尤其是 Elementor 這款頁面編輯器推出後，這波聲勢可謂是達到顛峰。
不過頁面編輯器有個最大的缺點就是檔案過於肥大，如果主機效能又不好，就會造成載入速度緩慢，對訪客而言體驗感受差。偏偏這些體驗感受差的都是使用 WordPress 架設而成，長遠以往會給產生一種使用 WordPress 架設網站就慢的刻板印象，對於 WordPress 未來發展並無好處，才讓官方後來著手推出了區塊編輯器來取代傳統編輯器。
區塊編輯器採取類似於第三方頁面編輯器的拖拉式設定，把每項功能做成單一區塊，而非自己設定程式碼，使用上就像俄羅斯方塊那樣一塊塊交疊而成，再與其他開發者開發出的區塊組合套件相搭配，讓頁面呈現效果更加多元與豐富，大幅改善了傳統編輯器需要 HTML 跟 CSS 技術的缺點，也解決掉受到第三方頁面編輯器所拖累的載入速度。
因此兩種頁面編輯器是完全不同的東西，以未來趨勢來看，WordPress 官方賦予區塊編輯器的功能會越來越多，這從 5.0 之後的每次升級的重點都集中在區塊編輯器本身的能力上可端見一二，跟著官方步調走，對於未來網站維護會比較輕鬆，畢竟核心功能是很穩定的。
區塊編輯器的好夥伴－區塊套件組合，強化頁面編輯效果
雖然區塊編輯器大幅進步，只是官方能提供的功能畢竟還是有限，隨之而生的就是區塊套件組合，區塊套件組合的特色在於他們是依附區塊編輯器而生，就像是後宮娘娘旁的掌事姑姑，隨時提供比官方更多元的元素來豐富網站頁面。
由於區塊套件組合是依附區塊編輯器而生，他們的檔案遠比第三方頁面編輯器小很多，也因此安裝到 2 款區塊套件組合也沒關係，彼此間也不太會有衝突，甚至現在趨勢是各家開發團隊或開發者，推出單一區塊元素，讓大家依照需求下載需要的來使用即可，這樣大幅降低無謂的消耗。同時這種單一功能的區塊元素，本身就輕巧，不易拖累網站速度，又大幅改進了有時只是為了其中單一功能而下載外掛，其他功能用不到但也刪除不了的窘境，使得區塊編輯器能更有彈性的發揮空間。
從上述中，我們知道區塊套件組合能安裝 2 款，區塊元素安裝 N 款，都不容易拖累網站速度，外掛衝突機率也低，然而第三方頁面編輯器可就不行這樣做，安裝 2 款就有很高的機率會產生外掛衝突， 拖累網站速度的機率高，基於這些原因，不要安裝兩款以上的第三方頁面編輯器到網站中，成為了基本的認知之一。
最棒的是，由於區塊套件組合的程式碼是開源的，因此區塊套件組合基本上都有提供免費版本可供使用，若需要更強大的功能可再使用付費版，不過也容易找到其他免費的替代區塊套件組來使用，更能讓預算花在刀口上，像我就曾經同時使用 Qubely 跟 Ultimate Addons for Gutenberg，因為 Qubely 中的文章輪播是付費版才能有的功能，但在 Ultimate Addons for Gutenberg 之中卻是免費的，讓我在很長一段時間是兩者並用，直到後來購買了 Qubely Pro 版後才移除。
區塊編輯器 ≠ Gutenberg，他們很像卻又不一樣
講到區塊編輯器，一定有很多人會把區塊編輯器跟 Gutenberg 搞混，以為兩者是一樣，認為區塊編輯器的英文就是 Gutenberg，其實並不適，區塊編輯器的英文是 Block Editor。
這點不只國內搞混，連一些國外網站都搞錯，明明是在講 Block Editor 的情境，卻用了 Gutenberg Editor，像是外國知名主機商 Kinsta 撰寫的文章就曾經犯下這種錯誤 (文章連結)。所以說區塊編輯器是區塊編輯器，Gutenberg 是 Gutenberg，兩者是不一樣的，不要再傻傻分不清了。還有一點要注意的就是 Gutenberg 的中文翻譯不叫古騰堡，目前官方並沒有相對應的中文名稱稱呼 Gutenberg，因此我們講到 Gutenberg 時，還是會以 Gutenberg 來稱呼他，而不是「古騰堡」。
Gutenberg 跟區塊編輯器的關係，簡單說 Gutenberg 是一項專案計畫，而區塊編輯器是這項專案計畫中的第一階段成果，接下來 Gutenberg 的第二階段是客製化的全站編輯 ( 5.8版本推出 )，第三階段是協同作業，第四階段是多語內容。因此區塊編輯器當作是 Gutenberg，在第一階段時會感覺不到差異，然而等到後續階段陸續加入核心後，這種說法會越來越奇怪。
我們要知曉 Gutenberg 是官方在實驗新功能時的先期測試外掛版本，任何新功能都會先放在 Gutenberg 中來測試是否可行，等到時機成熟後，下次更新時會整併進去區塊編輯器中，但不一定每次推出的新功能會都整併進去，也有過沒有整併進去的紀錄，故官方也不建議在正式網站中使用 Gutenberg，畢竟不可控因素還是很大。
實際面上，區塊編輯器是你一安裝完 WordPress 後就會有的功能，內建在核心當中，不管你需不需要他都會在，也因此任何跟區塊編輯器衝突的外掛，都會需要自行修正，畢竟區塊編輯器無法刪除，就像任何牴觸憲法的法律都視同無效，都需自行修正，而不是憲法要去配合；而 Gutenberg 則是需要自行下載，安不安裝端看個人選擇，也因此 Gutenberg 雖是官方推出，只是生為眾多外掛的一員，也是避不開跟其他外掛產生衝突的可能，若不幸發生衝突時就是自己想辦法，看自己是要刪除哪一支外掛，其他外掛沒義務配合 Gutenberg。
基於以上種種原因，我們會說區塊編輯器適合一般人／正式網站使用，身為核心內建功能，他是非常穩定又完整的上架產品；而 Gutenberg 就跟區塊編輯器截然相反，他比較像是原型產品，有很多不確定因素在，通常會是開發者或是資深玩家拿來測試的，畢竟遇到外掛衝突，他們知道該如何處理。
結論就是一般使用者就乖乖用區塊編輯器就好，Gutenberg 就留待高手去玩吧～但還是要搞清楚兩者差異，這樣子在提問時才能得到正確的解答。
不想改文章改到吐血，就請用區塊編輯器來寫文章
撰寫文章時，常會有新手習慣了 Elementor 方便性跟效果，且很多線上教學的影片並沒有講到後續效應，於是選擇使用 Elementor 來撰寫文章。發自內心且衷心的建議，千萬不要這麼做，更甚至是建議連區塊套件組合都不要用到文章中，文章就乖乖地用區塊編輯器內建的本身區塊元素來寫就好。
這是因為不管是 Elementor 或是其他第三方頁面編輯器，以及 Quebly 之類的區塊套件組合，更甚至是其他單獨區塊元素等，都是屬於額外功能，不是內建的核心功能。萬一哪天開發團隊放棄維護、有更好的替代品出現等原因，你想撤換掉時就會發現一個窘境，就是換掉這些外掛，你置放在文章中的預計撤換的外掛區塊都會不見，要不排版亂掉，要不就是出現一推亂碼。
這時候更悲劇的是，通常這個問題是無法寫程式來批次處理掉，你就只能一篇篇的修正重排，想想萬一累積了上百篇之後的結果，認真說你絕對很絕望，這就是為什麼一直一直強調寫文章時，要用區塊編輯器的原因了。除非你覺得這文章刪除掉也沒差的話，那就無所謂了。
而使用 Elementor 還有一個問題，就是 Elementor 本身是個很肥大的系統，導致開啟使用 Elementor 編輯的頁面都會很吃主機效能，單用在頁面是還好，一個網站頁面也就十來頁，感覺應該還好，只是有些規格不夠的主機連應付十來頁頁面都很吃力了，更不要提上百頁了。
而文章是可以有上百篇，全部都用 Elementor 來做編輯撰寫，那麼主機規格就會需要一直往上調，要知道主機規格越高，費用越貴，為了文章效果而一直上調主機規格，讓網站支出成本大幅增加，這點也是大家聽到要用 Elementor 寫文章時，都會聞之色變的主要原因，以網站長久經營來講， 這種消耗預算的作法，就真的是錢很多才會這樣做 。
要記得一個原則，想要長久保存的東西，就是要使用內建核心的系統去處理，就算官方之後想改，也會幫忙想好解決方案， 全球市佔率 40% 就注定了官方每走一步都不需小心謹慎， 不然全球使用者一起發難，這可不是用錢就能擺平的事情。
下集待續……
相關基礎概念文章推薦：
- 也許你不該使用 WordPress 自架站
- [WordPress] 01/29 板橋小聚 – 新手的十個常見問題
- 一起來寫出符合SEO規格的文章-6個命名原則與6個編排重點
- WordPress 文章排版新手必讀~區塊編輯器中文章編排常使用到的元素項目分享
- WordPress 文章編輯請用區塊編輯器，別再用 Elementor /第三方頁面編輯器來寫文章了
