2020-08-01閱讀時間 12 分鐘

製作高效能WordPress網站的Oxygen Builder網站編輯器

Oxygen Builder是一款WordPress的「網站」編輯器,擁有與其他WordPress「頁面」編輯器非常不同的特點,這款外掛讓網站開發者在進行網站高度客製化的同時,能夠兼顧網站效能及SEO。本文將介紹Oxygen Builder網站編輯器的特點,並與Elementor Pro頁面編輯器比較兩者間的差異,最後分享FirstHatch一起孵的使用經驗。

什麼是Oxygen Builder「網站」編輯器?

Oxygen Builder是一款由Soflyy團隊開發的「網站」編輯器外掛,第一個版本發佈於2016年,核心理念便是讓網站開發者能夠掌握WordPress的各個細節。

Oxygen Builder的運作方式與常見的頁面編輯器極為不同,在安裝這個外掛之後,主題會被直接停用,也就是說,主題的樣式、版型等均不會被帶入。網站開發者則必須透過這款編輯器從header及footer開始,一步一步完成各個頁面、列表頁、文章頁等的設計及製作,進而達到高度客製化WordPress網站設計的目的。這也就是為什麼Oxygen Builder被稱作「網站」編輯器。

Oxygen Builder網站編輯器的特色

和Elementor、Beaver Builder、Divi Builder等知名頁面編輯器相較,Oxygen Builder網站編輯器除了停用主題的獨特運作機制之外,其實還具有不少鮮明的特色。另外,從網站開發者的角度來說,Oxygen Builder其實較一般頁面編輯器來說更適合商業開發,也更符合客戶往往希望能夠自行修改內容的需求。以下將分別介紹並以Elementor Pro作為對比。

停用主題的運作機制

一般的頁面編輯器是與主題平行運作,在沒有使用頁面編輯器的地方,會使用主題本身的版面配置。Oxygen Builder網站編輯器則是將主題停用,所有頁面均需要透過Oxygen Builder網站編輯器製作。

舉例來說,一個剛建立的WordPress網站,前台顯示如下圖A。若安裝Elementor及Elementor Pro外掛後,前台顯示如下圖B。若安裝Oxygen Builder外掛後,前台顯示則如下圖C。相互對照圖A、圖B及圖C,應該就可以了解停用主題的運作機制對網站前台造成的影響了。

oxygen-builder-1

能夠高度客製化網站

由於停用主題的關係,使用Oxygen Builder的網站開發者必須要從header及footer的開始,依序設計及製作頁面、文章列表頁、分類列表頁、標籤列表頁、文章頁、404頁等頁面。

以Oxygen Builder建構頁面內容時的使用邏輯,則如同其他頁面編輯器,也是先建構section,在設置column,最後依據需求加入元素。Oxygen Builder提供的元素雖然數量不是很豐富,但包含了帶入動態欄位資料的功能,更能夠直接在編輯器中插入HTML、CSS、JavaScript和PHP並製作需要的功能,故足以解決大部分的需求。舉例來說,如果要以Elementor Pro製作列表頁的話,如果對專業版元素外觀不滿意的話,可能就必須安裝Elementor Custom Skin或是Dynamic Content for Elementor等外掛來解決問題。但透過Oxygen Builder可以直接以Code Block元素寫入PHP等相關程式碼製作列表頁所需元素。

在CSS樣式方面,Oxygen Builder提供Stylesheet讓網站開發者設置全站樣式,亦或是透過視覺化的selector detector針對各元素做細節調整。另外,Oxygen Builder也提供了不少精美的設計集,能夠整頁或是局部匯入,讓網站開發者能夠快速佈局頁面架構再做細部修改。

最後,和Elementor Pro相較,FirstHatch一起孵認為Oxygen Builder雖然提供較少的元素,但在全站客製化方面則更具彈性。

oxygen-builder-2

HTML結構乾淨、速度快、搜尋引擎友善

根據Oxygen Builder官網的敘述,以Elementor插入一個標題元素時,會產生9個div標籤,但以Oxygen Builder插入標題元素時,不會產生div標籤。這也意味著以Oxygen Builder製作的網站具有HTML結構較為乾淨、頁面大小較小、HTTP request較少等特點,故有較快的載入速度。在網站頁面結構較為複雜的時候,這個差異會更加明顯。另外,Oxygen Builder可以自由地對每個區塊設定HTML5語意標籤,有助於網站的搜尋引擎友善度。

與WooCommerce整合

WooCommerce是以WordPress做電子商務時的首選外掛,因此大部分的頁面編輯器都會強調能夠製作WooCommerce頁面,Oxygen Builder網站編輯器也不例外。與Elementor Pro相較,Oxygen Builder除了能夠製作商店頁及產品頁之外,還能夠製作購物車頁、結帳頁,甚至會員帳戶頁,適用範圍極廣。

與Gutenberg區塊編輯器整合

Oxygen Builder也提供了與Gutenberg區塊編輯器整合的解決方案,讓網站開發者能夠設計及製作符合需求的Gutenberg區塊,也就是說,網站開發者可以僅設計及製作網站樣式及Gutenberg區塊,而將頁面排版的自由度交給實際使用網站的人。另外,Oxygen Builder製作的頁面內容也可以直接透過Gutenberg區塊編輯器修改,再輔以客戶模式的角色權限,即可避免樣式設定在客戶自行修改頁面內容時被改變,盡可能滿足選擇以CMS作為網站核心的客戶需求。

Oxygen Builder網站編輯器的缺點

根據FirstHatch一起孵的使用經驗,目前發現一些Oxygen Builder網站編輯器的缺點。以下將分別說明。

第三方延伸外掛不多

推測由於使用者人數較少或是歷史較短的原因,造成Oxygen Builder網站編輯器的第三方延伸外掛不多較其他頁面編輯器來得少。因此,如果外掛原生元素不敷使用時,並沒有太多第三方延伸外掛可以選擇,但如果真的找不到,其實還是可以透過Code Block元素自己寫。

社群資源不多

推測原因同樣是由於使用者人數較少或是歷史較短,造成社群數量相對較少,目前僅有找到官方社群和數個英文社群,但尚未看到中文社群,也鮮少在中文社群中看到討論。

和多語言翻譯外掛相容性不佳

Oxygen Builder雖和大多數外掛相容,但目前並沒有正式支援和多語言翻譯外掛的相容性,在一些案例中可能有不相容的情況。根據FirstHatch一起孵自己的經驗,和多語言翻譯外掛WPML的相容性真的是有待加強。

Oxygen Builder及Elementor Pro的比較

在前兩段中,FirstHatch一起孵分別介紹了Oxygen Builder網站編輯器的特點及缺點,以下將以Elementor Pro作為比較對象,對Oxygen Builder做一個系統性的整理。

Oxygen Builder Elementor Pro
主題相容性 因為不需要主題,所以無相容性問題 與大多數主題相容
編輯器內原生元素
編輯器適用範圍 Header&Footer 適用 適用
Page 適用 適用
Single post 適用 適用
Archive 適用 適用
與WooCoommerce頁面的整合性 Woocommerce shop 適用 適用
Woocommerce product 適用 適用
Woocommerce cart 適用 不適用
Woocommerce checkout 適用 不適用
Woocommerce account 適用 不適用
與Gutenberg區塊編輯器的相容性 已整合,可以同時使用 只能選擇一個,不能同時使用
外掛相容性 與大部分外掛相容,但與多語言翻譯外掛相容性不佳 與大部分外掛相容
客製化設計容易度 極高 高,但容易受限於元素外觀設計
第三方延伸外掛
社群資源
費用 價格 99 - 249 USD/ 次 49 - 199 USD/ 年
版本內容 價格不同,功能不同,但無網站安裝數量限制 價格不同,功能相同,但網站安裝數量限制不同

FirstHatch一起孵新舊網站效能評測

事實上,FirstHatch一起孵在仔細研究過Oxygen Builder網站編輯器之後,就立刻著手以Oxygen Builder重新建立自己的網站,也因此得以在網站翻新的過程中比較效能上的變化。

評測方法

首先,在同一個主機內建立兩個WordPress網站,分別安裝Astra主題和其他必要外掛(詳見下表)。將主題及必要外掛啟用後,建立相同的首頁,再以常見速度評測工具進行測試。

新網站(Oxygen bulder) 舊網站(Elementor Pro)
已安裝外掛
  • Breeze
  • Contact Form 7
  • Oxygen Builder
  • Breeze
  • Contact Form 7
  • Elementor
  • Elementor Pro
備註 Breeze僅開啟預設選項,包括Cache System、Gzip Compression、Browser Cache及Auto Purge Varnish。

評測工具

採用以下三個常見速度評測工具。

  • Google PageSpeed Insights
  • GTmetrix
  • Pingdom Website Speed Test

評測結果

經過實際測試後可以發現,除了Google PageSpeed Insights的結果之外,兩者在速度分數上並沒有太明顯的差異。然而,用Oxygen Builder所建立的首頁的頁面大小及Http requests大概是Elementor Pro的一半。詳見下表。

新網站(Oxygen bulder) 舊網站(Elementor Pro)
Google PageSpeed Insights 行動版 89分 47分
電腦版 98分 80分
GTmetrix PageSpeed Score A (96%) A (95%)
YSlow Score B (88%) A (90%)
Fully Loaded Time 2.7s 2.4s
Total Page Size 198KB 487KB
Requests 25 48
Pingdom Website Speed Test (Test from Asia-Japan-Tokyo) Performance grade A (92) B (86)
Page size 214.6KB 518.0KB
Load time 251ms 500ms
Requests 25 48

結論

Oxygen Builder網站編輯器的特色打破了一般頁面編輯器的限制,除了能夠編輯所有的WordPress及WooCommerce網站頁面之外,也能夠和Gutenberg區塊編輯器整合,滿足網站開發者和客戶的需求。另外,FirstHatch一起孵以Oxygen Builder翻新網站之後,發現除了與WPML相容性不佳的問題之外,網站效能獲得大幅改善,整體表現良好,目前感到非常滿意。

相關文章
WordPress是什麼?超過30%市佔率的內容管理系統(CMS)
完整移除WordPress外掛的2個方法,有效減少網站效能負擔
網站設計與架設的6個步驟與流程
如何顯示WordPress文章閱讀時間?

分享:
訂閱FirstHatch一起孵,聊聊有興趣的主題