您可以使用 WordPress 構(gòu)建網(wǎng)站,無需太多編碼技能,甚至無需接觸任何代碼行。原因在于許多出色的工具可以幫助您輕松完成。毫無疑問,最受歡迎的工具是古騰堡( Gutenberg )和頁面構(gòu)建器/頁面生成器。目前,它們各有利弊,因此很難決定哪一個是最好的。
但是,仍然可以對Gutenberg 和頁面構(gòu)建器進(jìn)行一般的外觀和誠實(shí)的審查、比較。因此,我們將按照以下標(biāo)準(zhǔn)對它們進(jìn)行比較、深入分析:
- 突出特點(diǎn)
- 便于使用
- 反應(yīng)靈敏
- 實(shí)際表現(xiàn)
至于 Gutenberg 與頁面構(gòu)建器的性能比較,我們將比較 Gutenberg 和最近知名的頁面構(gòu)建器 – Oxygen。
該性能測試是根據(jù)一些標(biāo)準(zhǔn)客觀完成的,我將在測試方法部分為您提供更多詳細(xì)信息。無論如何,我必須承認(rèn)我不是網(wǎng)站速度測試的專家,因此可能很難避免意外錯誤。因此,請留下您的意見,以幫助這篇文章更全面。
此外,在開始這個比較之前,要說明的是,我們不完全支持古騰堡或本文中的任何頁面構(gòu)建器。在將這些 WordPress 工具用于不同的項(xiàng)目后,我將寫下我的經(jīng)驗(yàn)。
廢話不多說,讓我們開始吧!
古騰堡簡介
眾所周知,2018 年 6 月 12 日,WordPress 5.0 發(fā)布了一個重大變化:新編輯器名為 Gutenberg。
Gutenberg 最初是作為基于塊的編輯器推出的 – 所以我們稱之為塊編輯器。您可以通過拖放來移動塊,將它們放在列中以更改布局,將塊分組,……每個塊也有自己的設(shè)置,以便您可以輕松自定義。Gutenberg 還集成了許多預(yù)先構(gòu)建的塊和塊模式,因此用戶可以立即使用它們并更改其內(nèi)容。
嗯,所以可以看出 Gutenberg 可以幫助您以比以前的 TinyMCE 更直觀的方式創(chuàng)建內(nèi)容。
隨著時間的推移,古騰堡得到了發(fā)展和升級。它現(xiàn)在不僅僅是一個編輯器。它提供了很多高級塊,如按鈕、表格、嵌入等,以及構(gòu)建整個網(wǎng)站的元素,如站點(diǎn)徽標(biāo)、導(dǎo)航等,正如我在前面介紹的那樣,在完整站點(diǎn)編輯(FSE) 發(fā)布時就出現(xiàn)了文章區(qū)塊。多虧了他們,Gutenberg 已成為構(gòu)建整個網(wǎng)站的工具,而且顯然無需編碼。
現(xiàn)在,讓我們看看 Gutenberg 和頁面構(gòu)建器之間的區(qū)別是什么。
突出特點(diǎn)
首先,我在下表中總結(jié)了古騰堡和頁面構(gòu)建器的高亮功能的區(qū)別:
| 古騰堡 | 頁面構(gòu)建器 | |
| 構(gòu)建內(nèi)容的要素 | 使用塊來構(gòu)建內(nèi)容。提供基本塊,如文本、圖像、表格、按鈕、嵌入… | 每個頁面構(gòu)建器都有自己的術(shù)語,例如元素或模塊。提供更多不同的元素,如地圖、圖像輪播、手風(fēng)琴標(biāo)簽、…高級版本通常具有更高級和更有趣的元素,如表單、幻燈片、定價(jià)表、作品集、推薦、計(jì)數(shù)器…… |
| 可定制性 | 基本上允許對每個塊或整個內(nèi)容進(jìn)行自定義。 | 能夠自定義許多不同的元素,從填充、邊距到動畫和樣式。 |
| 布局創(chuàng)建 | 以基本方式創(chuàng)建列。無法拖動以更改列的大小。 | 創(chuàng)建復(fù)雜和復(fù)雜的布局。能夠按住并拖動以更改列之間的大小和比例。 |
| 全站編輯能力 | 完整站點(diǎn)編輯功能仍在試用中。 | 高級版本提供全站點(diǎn)編輯選項(xiàng),如頁眉、頁腳、側(cè)邊欄、… |
| 所見即所得 | 還沒有上架。后端的接口可能與前端不同。 | 可用的。您可以生動地預(yù)覽您的更改,它們與前端顯示完全相同。 |
通過這張表,我們可以看到頁面構(gòu)建器的優(yōu)勢在于它們能夠創(chuàng)建復(fù)雜的布局和強(qiáng)大的可定制性。
雖然頁面構(gòu)建器超越了文章或頁面編輯器,可以幫助用戶編輯整個網(wǎng)站,但古騰堡現(xiàn)在仍在測試完整站點(diǎn)編輯。但是,Gutenberg 發(fā)展很快,誰知道它是否會在很短的時間內(nèi)趕上頁面構(gòu)建器,甚至超過它們。
易用性
古騰堡
Gutenberg 的界面非常清晰簡單,因此非常易于使用。
處理塊也很容易和快速。例如,只需單擊 (+) 號即可添加新塊。
右側(cè)用于自定義塊的設(shè)置選項(xiàng)卡為您提供了每種塊類型的許多配置。但是,它們主要是基本設(shè)置,清晰且易于處理。
有帶有詳細(xì)說明和直觀示例的工具提示,向用戶展示如何使用塊類型。
頁面構(gòu)建器
當(dāng)然,每個頁面構(gòu)建器都有不同的界面,但它們的使用方式非常相似。所以我會以O(shè)xygen為例。
您有一個用于實(shí)時預(yù)覽的區(qū)域,以了解您的網(wǎng)站究竟是什么樣子。
Oxygen 在左側(cè)有一個元素列表(其他頁面構(gòu)建器也有該列表)。要將這些元素添加到您的站點(diǎn),只需雙擊它們。這很簡單。
添加元素時,左側(cè)邊欄將自動轉(zhuǎn)到具有此元素的許多選項(xiàng)的設(shè)置區(qū)域。
對于大多數(shù)頁面構(gòu)建器,元素都有各種設(shè)置。一般來說,它們比古騰堡更復(fù)雜。但這也意味著您具有更高的可定制性。
如果您想查看網(wǎng)站上的順序或排列元素,只需轉(zhuǎn)到Structure。您可以通過將元素拖放到此處而不是在預(yù)覽區(qū)域中來復(fù)制、刪除或移動元素。
然而,這僅適用于 Oxygen 。其他頁面構(gòu)建器可能不同。某些工具可以讓您直接在預(yù)覽區(qū)域上拖放元素。總的來說,我發(fā)現(xiàn)這個拖放功能仍然不是很流暢,甚至有時很難將元素拖到想要的地方。
總結(jié):
您可以看到每個工具都有自己的界面,每個頁面構(gòu)建器也是如此。因此,很明顯,每種工具都有不同的使用和交互方式。此外,難易取決于用戶的習(xí)慣和愛好。在我看來,我認(rèn)為 Gutenberg 比頁面構(gòu)建器的界面更簡單、更容易使用并且更容易習(xí)慣。
自適應(yīng)
越來越多的人使用智能手機(jī)和平板電腦等移動設(shè)備瀏覽網(wǎng)頁。據(jù)Statista 統(tǒng)計(jì),有 42.8 億人使用移動設(shè)備上網(wǎng),占互聯(lián)網(wǎng)用戶總數(shù)的 90%。因此,響應(yīng)能力現(xiàn)在是網(wǎng)站帶來更好用戶體驗(yàn)的強(qiáng)制性要求。在這方面,頁面構(gòu)建器似乎比 Gutenberg 做得更好。
頁面構(gòu)建器通常為用戶提供非常強(qiáng)大的功能,可以在不同設(shè)備上預(yù)覽和自定義網(wǎng)站的顯示。即便如此,您還可以為每個設(shè)備設(shè)置字體大小、填充、邊距、動畫……。
對于古騰堡,手機(jī)和平板電腦上的實(shí)時預(yù)覽尚未可用。因此,我認(rèn)為很難確保您的布局在其他設(shè)備上看起來不錯。
性能
加載速度測試
我將使用兩個網(wǎng)站來測試和比較它們的加載速度。一個是用 Gutenberg(使用TT1 Blocks,一個基于塊的主題)構(gòu)建的,另一個是用Oxygen(最新版本)構(gòu)建的。
我選擇 Oxygen 是因?yàn)榇隧撁鏄?gòu)建器完全停用了主題,因此該站點(diǎn)將從頭開始構(gòu)建。這就是為什么 Oxygen 被認(rèn)為有助于顯著提高網(wǎng)站加載速度的原因。選擇 Oxygen 將有助于這篇文章更加客觀。
此外,我將遵循以下標(biāo)準(zhǔn):
- 為兩個網(wǎng)站使用相同的共享主機(jī);
- 兩個網(wǎng)站使用相同的結(jié)構(gòu)和內(nèi)容;
- 禁用兩個網(wǎng)站的緩存;
- 使用最新的 WooCommerce 版本為兩個網(wǎng)站構(gòu)建產(chǎn)品頁面;
- 使用Google PageSpeed Insights和GTMetrix測試工具,測試時我在同一個位置;
- 使用索引:速度得分、總頁面大小 (kB)、完全加載次數(shù)和必要請求數(shù)、JS、CSS 文件和加載的字體。
網(wǎng)站的總體表現(xiàn)
在對網(wǎng)站的總體性能進(jìn)行測試后,我得到了以下結(jié)果:
| 頁面生成器 | 速度得分 | 請求 | 總頁面大小 (kB) | 滿載時間(s) | JS | CSS | 字體 |
| 古騰堡 | 93 | 25 | 117 | 1.75 | 9 | 10 | 0 |
| Oxygen | 87 | 41 | 208 | 2.6 | 13 | 17 | 4 |


著陸頁的表現(xiàn)
轉(zhuǎn)到每個網(wǎng)站上的著陸頁,其中有許多圖像和復(fù)雜的布局,以下是性能結(jié)果:
| 頁面生成器 | 請求 | 總頁面大小 (kB) | 滿載時間(s) | JS | CSS | 字體 |
| 古騰堡 | 29 | 249 | 2.2 | 9 | 10 | 0 |
| Oxygen | 45 | 339 | 2.8 | 13 | 17 | 4 |
博客存檔頁面的性能
我還測試了兩個網(wǎng)站查詢服務(wù)器以在博客頁面上顯示帖子列表時的性能。在此處查看結(jié)果:
| 頁面生成器 | 請求 | 總頁面大小 (kB) | 滿載時間(s) | JS | CSS | 字體 |
| 古騰堡 | 27 | 285 | 2.3 | 9 | 10 | 0 |
| Oxygen | 44 | 430 | 4 | 13 | 17 | 4 |
商店存檔頁面的性能
我使用 WooCommerce 為兩個站點(diǎn)創(chuàng)建商店頁面。
下面是測試兩個店鋪頁面性能后的結(jié)果:
| 頁面生成器 | 請求 | 總頁面大小 (kB) | 滿載時間(s) | JS | CSS | 字體 |
| 古騰堡 | 38 | 238 | 2.0 | 9 | 10 | 0 |
| Oxygen | 57 | 362 | 5.5 | 13 | 17 | 6 |
產(chǎn)品頁面的性能
在最后一部分中,我將檢查使用 WooCommerce 創(chuàng)建的兩個產(chǎn)品頁面的性能。這些頁面通常具有更復(fù)雜的布局,并且需要更多的 CSS 和 JS 代碼才能為客戶提供所需的功能。
查看此表中的比較:
| 頁面生成器 | 請求 | 總頁面大小 (kB) | 滿載時間(s) | JS | CSS | 字體 |
| 古騰堡 | 38 | 238 | 2.0 | 9 | 10 | 0 |
| Oxygen | 57 | 362 | 5.5 | 13 | 17 | 6 |
結(jié)論
通過上面的性能對比表,你可以看到在大多數(shù)情況下,用古騰堡建的網(wǎng)站往往比用氧氣建的網(wǎng)站有更好的結(jié)果。與 Oxygen 相比,使用 Gutenberg 構(gòu)建的網(wǎng)站加載最少的 JS、CSS 文件、字體以及使用更少的資源和加載速度。
因此,通過測試,Gutenberg 表明它在速度和性能方面可以超越 Oxygen。
如果我們總體上看一下,Gutenberg 與 Full Site Editing 一起變得更加強(qiáng)大,并為用戶提供了更多功能以輕松構(gòu)建網(wǎng)站。與此同時,Gutenberg 仍然為每個用??戶保留了簡單易用的方法以及網(wǎng)站的良好性能。這些是古騰堡的巨大優(yōu)勢。
如果您想保持一切簡單,優(yōu)化網(wǎng)站性能,又不想涉及太多第三方插件,那么最好的選擇就是Gutenberg。我們的團(tuán)隊(duì)還使用 Gutenberg 構(gòu)建了titanweb.vn。這個網(wǎng)站的加載速度非常快。此外,使用古騰堡也不難,所以我們覺得還可以。
但是,我認(rèn)為這些功能對于古騰堡來說還不夠。目前,它仍然缺乏很多東西來適應(yīng)網(wǎng)站開發(fā)人員的所有高級需求。另一方面,頁面構(gòu)建器非常擅長這些事情。所以如果你想構(gòu)建一個布局復(fù)雜、自定義程度更高的網(wǎng)站,我們?nèi)匀粦?yīng)該考慮使用頁面構(gòu)建器,至少目前是這樣。
我們還需要等待未來整站編輯器的高級功能。或許,在 整站編輯器 正式版中,古騰堡會在各個方面完全超越頁面構(gòu)建器。
最后總結(jié)
有了以上信息,您是否有自己的選擇來構(gòu)建您的網(wǎng)站?古騰堡或任何其他頁面構(gòu)建器?
畢竟,您絕對應(yīng)該根據(jù)您網(wǎng)站的每個功能和要求仔細(xì)考慮。并請注意,在撰寫本文時,本文中的信息是真實(shí)的。當(dāng)頁面構(gòu)建器或古騰堡中的任何人使用新功能升級新版本時,每個工具的特權(quán)可能與我們列出的不同。
非常感謝您花時間閱讀這篇文章。如果您喜歡這篇文章或?qū)@篇文章有任何評論,請告訴我們。
注:本文出自 metabox.io,由 WordPress大學(xué) 翻譯整理。
倡萌注:雖然古騰堡編輯器一直為國人嘲弄,但是不得不承認(rèn),它的確在慢慢成長,倡萌也使用古騰堡為少數(shù)幾個客戶做過網(wǎng)站開發(fā),結(jié)合一些第三方的增強(qiáng)插件,還是可以滿足一般的網(wǎng)站需求的,而且性能上的確要優(yōu)于采用其他可視化編輯器制作的網(wǎng)站。正如本文所說的,做復(fù)雜一些的網(wǎng)站,目前還不推薦采用古騰堡,畢竟它的功能還是比較弱。
推薦閱讀:
- 3個不錯的WordPress可視化頁面生成器比較
- WordPress 古騰堡區(qū)塊設(shè)計(jì)選項(xiàng)增強(qiáng)插件 EditorPlus
- WordPress 古騰堡編輯器的可重用區(qū)塊終極指南
- WordPress 5.4的古騰堡編輯器鍵盤快捷鍵
- WordPress使用PDF Block在古騰堡編輯器中插入并顯示PDF文件
- WordPress自定義古騰堡編輯器的顏色調(diào)色板
- WordPress自定義古騰堡編輯器的漸變色
- 如何禁用WordPress中古騰堡編輯器的全屏模式
- WordPress古騰堡編輯器相冊/畫廊增強(qiáng)插件WP Gallery Enhancer
- Code Syntax Block:為古騰堡的代碼區(qū)塊添加高亮顯示
- WordPress 禁用Gutenberg古騰堡編輯器














我做了經(jīng)典編輯器、古騰堡編輯器、ELE頁面構(gòu)建器三者自由切換。