WordPress佈景主題開發首選 氧氣簡介

嗨!當你點開這篇文章,就代表你已經準備好要進入氧氣(Oxygen Builder)的世界了!我是三原內容顧問所的Andy,曾經也是Elementor的愛好者,但是前幾年接觸氧氣之後,立刻被氧氣的獨特與自由征服!

女生比較愛氧氣?

氧氣在台灣的市場上一直都不受到喜愛,因為總是被貼上一個「太過困難」的標籤,這一點Andy測試過,但是目前接觸過氧氣並愛上氧氣的,都不是工程師,而且女性的接受程度也比男生高很多!這意味其實氧氣一點也不難!

如果拿氧氣跟Elementor比較,定位上的確非常不同!以Andy自己認識來說,Elementor著重在架站的速度,並將定位鎖定在完全不想花時間調整細節的用戶!當然,Elementor要能夠處理到精細也可以,但是會花費相當多的精神。

氧氣著重工具

反之,氧氣著重在提供工具,相對來講不要求架站的速度,提供更多的細節調整,鎖定在想要完整客製化網站的用戶,也因此在國際上受到許多接案者的愛好,也有許多設計師一碰就愛上氧氣,因為利用氧氣可以完全達到想要的效果跟細節!

完美主義強迫症的WP架站福音

簡單來說,如果你只是要很快速的建立起一個符合大眾基礎美學規範的網站,不去在意太多的細節,Elementor會是一個相當好的工具,不過如果個性上稍微有些「龜毛」或是「完美主義」甚至是「強迫症」的你,那麼氧氣會是你的救贖!

氧氣三大主體

要接觸氧氣的第一步,就是要先認識氧氣,在購買氧氣的授權時,有分為三個外掛,分別是主程式、電商Woo整合以及區塊編輯器整合!

主程式架構

這是氧氣的基礎,所有基礎的功能都在這個外掛裡面,這個主程式根據授權的不同,又分為基礎元件跟進階元件(Composite Elements)!

相信很多人都是碰過Elementor的,Elementor的世界裡,進階的元件通常都需要購買,因為進階元件是一個完全獨立的元件,很難透過基礎的元件組合出來。

所有元件都是基礎元件組合出來的

氧氣的世界裡要有一個觀念,就是所有進階的元件都是可以透過基礎元件組合出來的!這是什麼意思呢?所謂的進階元件的目的是省時,並不是多了什麼東西,換句話說,進階元件都是從基礎元件組合而成,有一些會加上一些客製化的程式碼!

以Andy自己來說,我自己也有買了氧氣的進階元件,但是熟悉了氧氣之後,很多東西都靠自己去組合,就幾乎沒有用過進階元件的部分了!所以是否需要進階元件的授權,可以自行評估看看!

Woocommerce整合

第二個套件就是針對電商的整合套件,針對有電商需求的用戶,可以購買這套外掛整合,這個跟上述的進階元件不同,基本上如果要建構電商系統網站,只要網站上要使用到Woocommerce,就必需購買這套外掛!

透過這套外掛,主要是針對商品頁面版型以及商店頁面的製作,同時也提供的一些輔助元件,要建立商品相關的版型就更加容易!

區塊編輯器整合

這個可以說是部落客必備的元件了!透過這個外掛可以建立自己的可重複使用文章區塊,跟WordPress的區塊編輯器完美整合。

當我們建立好區塊版型後,可以在寫文章的時候插入,插入之後還可以進行樣式跟內容的變更,在文章內變更的內容不會影響到版型。例如我們寫文章常常要插入比較複雜的欄位表格進行資料呈現,就可以利用氧氣建立好一個版型區塊,寫文章的時候插入即可!

氧氣特色

氧氣被認為比較難上手,也是有一些原因的!這裡Andy說明氧氣的幾個特色,這些特色其實一開始Andy也不知道,是在接觸氧氣之後才發現的。

禁用主題

第一個氧氣最大的特色,就是禁用佈景主題!Andy跟很多學生跟客戶說過,當你的網站啟用的時候,網站的前端就會直接被清空,如果沒有套用氧氣的樣式就會毫無樣式!

這個特色是氧氣的強項,也同時是弱項,這也是很多人認為難以上手的原因之一,為什麼這樣說呢?

禁用佈景主題,就是氧氣的暴力美學!

因為WordPress的前端架構,是綁住佈景主題的,所以很多的前端都是建立在佈景主題之上,當禁用了佈景主題,很多要建立在佈景主題上的功能、外掛都必須用不同的方式額外解決支援問題!

以Elementor來說,Elementor是建立在原本的佈景主題之上,這是什麼意思呢?意思就是你的網站有原本佈景主題的樣是,但是Elementor又加上屬於Elementor的樣式,簡單說,網站同時使用佈景主題跟Elementor的樣式,當網站載入的時候,同時載入佈景主題跟Elementor的樣式,才能完成網站的載入!

但是氧氣是完全禁用佈景主題的,這意味不管佈景主題有多複雜,樣式表有多龐大,這都跟氧氣無關,因為當氧氣啟用的時候,佈景主題就宣布失效!

當然因應這樣的方便與不便,國外也有開發出外掛,讓我們可以自己設定哪些頁面套用佈景主題,哪些頁面套用氧氣的樣式!

全站管理

氧氣另一個特色就是全站管理的邏輯,氧氣架站的出發點是完全客製化網站,可謂是量身訂做一整套屬於網站的佈景主題,所以有人把氧氣稱為頁面編輯器,但其實氧氣其實應該是佈景主題編輯器!

氧氣啟用後的第一步,都不是建立頁面內容,而是建立網站的佈景主題,那些套用全站的基礎設定,這一點,我們下一篇課程文章會詳細解說!

以CSS為基礎

這個特色聽起來有點漏洞!畢竟有關網站的排版都是CSS為基礎,但是氧氣又更貼近CSS的設定,所有設定介面的文字都是從CSS設定值出發,並沒有經過過多的翻譯,這意味如果本身就有CSS基礎可能就很好上手!

CSS的基礎就是氧氣的核心

那些沒有CSS基礎的就沒辦法玩氧氣嗎?那也未必!其實CSS不難,掌握一些很基礎的CSS設定值以後,就會發現氧氣是非常簡單直覺的工具!也因此,在這系列的課程當中,我會先帶入基礎的CSS概念,並說明跟氧氣介面設定的關係,基本上了解這些基礎CSS設定之後,就能夠非常快速的了解氧氣的強大與樂趣!

精細設計

上面有提到過了氧氣,著重於細節的設計,所以每一個元件提供的設定選項是非常多的!Andy常常以繪圖軟體來比擬氧氣跟其他頁面編輯器,以Elementor來說,就像是Canva一樣輕鬆上手,但是如果要針對細節進行設計,可能就會感覺有點複雜!

Canva難用?那你適合氧氣!

但是氧氣就好比是Illustrator,提供了工具給你,你可以進行非常多細節的微調,但是這一為你可能要花更多的時間去設計一個頁面或是網站,可是換一個角度想,當技術純熟之後,或是在之後了解整體設計流程之後,就會發現其實設計是可以很快速的!

提供元件自行組合

這樣的氧氣概念,Andy常常拿汽車組裝來舉例,當我們要組合成一台車,以Elementor為例,提供是多半是已經組合好的元件,例如整個引擎,整個方向盤,整個汽車座椅,或是整套的儀表板零件,設計師或是使用者只要把這些元件組合起來就好!

你覺得氧氣是提供釣竿還是提供魚呢?

氧氣給的是釣竿!Elementor才是給魚!

但是氧氣提供了什麼呢?氧氣提供的是電子零件跟機械零組件,並提供整套的工具箱,要組合成一台車可能曠日廢時,但是如果是已經會組裝汽車的人,或是喜歡改車的人,就會喜歡只有提供零組件的氧氣,因為可以依照自己的喜好組裝成屬於自己的一台車!

學習曲線長

綜觀以上特色,造就了一個結果,就是進入氧氣的學習曲線是相當長的,因為氧氣是一套工具,不是一套速成軟體,一開始入門氧氣或許可以很快速的建立起網站,也能夠很快速的建立起相關的概念,但是從了解到活用,可能又是一段路,從活用到進階應用,就又是另一段路。

減法思維

Andy從氧氣學到的,就是架站的減法思維跟流程,一般的頁面編輯器跟很多利用WordPress的用戶,往往會利用疊加的概念去處理元件跟版型還有功能,最常遇到的狀況就是,缺少一個元件功能,就買一個外掛套用,或是用一個外掛去整合起來,這樣往往造成整個網站的系統相當肥大。

兩行程式碼可以解決,硬要安裝一個外掛?

但是在氧氣的世界裡,因為提供的只有工具,所以我們可以依照需求打造出剛剛好屬於自己的東西就好,沒有過多不必要的外掛,而站在全站設計的邏輯,也把樣式縮減再縮減,站在全站的角度思考問題,而不是站在頁面甚至元件的角度思考問題,自然而然的就會了解到減法思維中的真諦:LESS IS MORE。

也因此Andy轉換到氧氣之後,透徹了解氧氣的流程跟邏輯之後,就開始推廣減法架站的思考方式,這樣的思考方式不只應用在氧氣架站,也能逐步影響到生活思考以及創業的思考!或許隨著一堂一堂氧氣課程的學習,或是真正開始在網站上導入之後,就能更加清楚減法架站的樂趣跟自由了!

設計師斜槓網頁設計首選課程

點我前往教學網站

Andy Yuan

知識管理系統顧問,天馬行空想法爆棚的男子,擁抱科技也反科技,熱愛跨領域學習與心流古典黑白攝影。文章散見於官網與方格子,分享主題: (1) 學習與知識管理 (2) 網路架站市場觀察 (3) 內容SEO 等。
Acorn三原減法架站

訂閱知識萃取週報

每週一篇專屬內容!主題:雜誌、書籍閱讀心得
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x