近日準備要把我原來從空白佈景所建構的 WordPress 部落格來個大幅度的版面變更。

起碼花了一兩個星期時間來了解關於 WordPress 佈景主題 (Theme)這個領域的相關資訊。老實說,還挺有趣的,我才知道原來有諸多國內外的工作室專門在開發佈景主題並當成產品販售的。尤其若上架到 ThemeForest 這個平台,比較熱門的產品可以賣到多達上萬套以上,而每套價錢大約從 US$30~99 美金的都有,而且大都還是只有提供一年的免費服務更新與諮詢。難怪乎這市場已經可以大到養活許多專事開發 Web 端佈景主題開發的設計公司了。

我現在輔導的客戶單位其中有一家就是花了上百美金購買了一套可以應用在企業網站建構的佈景主題,所以可以就近觀摩。不過我發現到,似乎不太適合我,因為用了某一家的 Theme 後,雖然可以快速的建構網站與內容,但會被「綁架」,因為網站的基礎建設/工具幾乎都依賴這套佈景主題,極難抽換掉。

原來這些佈景主題的對象比較偏向是完全不用 Coding,連 HTML/CSS 等都不用了解 (但其實我發現還是需要有些基礎知識),只要專注利用其工具與所提供的元件,快速的「兜」起來頁面,組成豐富的內容就可。

所以光是所謂的「Page Builder」就相當講究,而且真的很容易短短幾分鐘內就可以組出排版相當豐富的頁面出來。我自己也安裝了一套免費且相當簡潔許多的「SiteOrigin」,真的比從無到有自行排版的方式簡單太多太多了。


不過,總之…,我還是不太想依賴這些豐富的佈景主題套件,因為很容易就被這些工具給制約,要能自行客製化會較為難;再則,產出的 HTML 網頁內容,實在有夠「肥」大,要透過一般文字編輯器直接瀏覽並修改內容可說是不太可能的事。

但是相對,要我從完全是空白的佈景主題無中生有開發出來,這對我也是幾乎不可能的事情,畢竟主要技能與專職並非在此 (雖然其實我還蠻有興趣的)。總之,Web 端的 UI 核心技術有三大類:HTML(5)、CSS、Javascript,然後再以此延伸相關的 Library、Tools、Wrapper Language (如 SASS),基本要俱足且要很快跟得上這些變動相當快速的技術規格,才比較有機會成為專業的 Theme Designer。

好啦,我也只是想修整下部落格版面而已,最多就是打算透過這修整的過程對網頁相關技術有些約略的了解與應用就可。我發現到,「Starter Theme」這種有著基本的結構框架,僅提供基本的 CSS/HTML,以及基本的 PHP 函式庫,然後再由設計者本人自行去擴展 (extend)。哇喔!這正是我想要的方式,不用重新造輪子,但又享有 DIY 組裝與擴展的樂趣。

我所選中的 Starter Theme 是由 Automatic 所製作的「Underscore」,它應該是目前最普及、通用的了。這裡有一篇專文介紹:「Introduction To Underscores: A WordPress Starter Theme With Konstantin Obenland」

不過,我又準備將其整合「Bootstrap」與「Font Awesome」,前者有著豐富的視覺化框架 (framework)且提供了響應式的網格(responsive grid)的布局框架 (layout);而後者則是提供了豐富的圖示與向量字型。

總之,整合了 Underscore (starter theme)、Bootstrap、Font Awesome (事實上,國外早有許多 Designer 已提供整合套件或著文分享實做心得,不過我還是自行手動整合。),仍可以讓 Starter Theme 有著簡約的結構,卻又具有相當豐富的擴展性。

目前我已經將此三者初步整合在一起,執行並沒有問題。同時也調整了 Theme 內的檔案結構,讓其較簡潔,後續的工作則是準備逐漸的修改調整,加入相關 Bootstrap、Font Awesome 所提供的 CSS 與 Javascript 函式庫。這些過程會留待後續的實做筆記分享,並透過 Git 版控置於 Github 方便維護並供參考。