關於建構 WordPress Starter Them-整合 Underscore 與 Bootstrap/FontAwesome

其實整合 UnderscoreBootstrapFontAwesome 原理並不困難,簡單的說就是以 Underscore 所創建的 Starter Theme 為基底,具有基本的檔案結構與基本的 PHP 檔案的關聯,然後再逐一調整 PHP 檔案內容 (例如 index.php),加入 Bootstrap 與 FontAwesome 的 CSS排版/Javascript動態效果。

雖說原理不難,但也花了一些時間弄懂這些套件之間的關係,然後再查詢相關整合的文章,底下是我大概找出比較實際的 How-to 文與影片:

o how to create bootstrap underscore wordpress theme step by step guide
o Combining Bootstrap with Underscores
o WordPress Theme Development Tutorial with Bootstrap & Underscores WP Starter Theme

在設計 Starter Theme 的過程,強烈建議下載 WordPress Theme Unit Test Data,甚至最好是創建一個專屬開發測試的 WordPress 網站,只放上與佈景主題設計相關的 Plugin,例如「Theme Check」、「Show Current Template」等,這些都對開發過程中相當有幫助。

閱讀全文 »

聊聊 WordPress 佈景主題與 Starter Theme 的設計

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

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

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

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

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

閱讀全文 »

Kenming’s 三欄式版面 css template

從 b2evolution 轉移到 wordpress 的過程,吃足最大苦頭的不是轉檔 (migrate),而是版面的 CSS 設計。

這一次我對版面的需求一開始就打算使用三欄式的 Layout 了,原因是我打算提供更多樣化的一些額外附屬資訊,同時現在是流行大螢幕尺寸,1024*768 以上的瀏覽畫面,已經佔絕大部分使用者的比例了。 我的版面構思是右邊兩側為 Sidebar 列,一個稍寬、另一個稍窄 (均可調整寬度),左側就是內容 (content) 主頁了。 然後 Sidebars 是設成固定寬度 (fixed-width),而內容區則可以視瀏覽器寬度的大小而變動 (Liquid-layout)。

當然一開始是透過諸多提供 wordpress 佈景主題 (theme)網站來找尋,結果花了一整天的時間,瀏覽了數百個佈景主題,就是找不到我心中所想的,絕大部分的 CSS Layout 均是採用固定式寬度的設計;再則,我似乎有一些 "潔癖",看到 style.css 編輯得很凌亂,就挺不舒服的。 後來決定了,自己重寫 css layout! 我甚至不是 copy 自 default 的 css 當成樣板,而是僅把它當成參考,然後逐漸地邊嘗試、邊摸索,一點一滴試到可以接受為止。

事實上,我發現到,如果 sidebar 與 content 都是可變動的比例式或為固定寬度,那麼 layout 就挺好設計的。 但是像我這樣的需求,反而比想像得還要困難。 更重要的是,我其實不太會 CSS,我是在這一次為了達成我理想中的版面,才去瞭解一些基礎觀念。 版面 CSS 的設計,最基本的就是對所謂的 "Box Model" 要能有清楚的理解才行。起碼你總要知道 margin 與 padding 的差異、float 與 position 的浮動調整,以及還要注意的是 IE 與 Firefox 兩者瀏覽器(及其版本) 的支援程度才行。 這裡我強烈推薦 網站製作學習誌 這個網站, 版主在其一篇:CSS 排版觀念—Box Model ,寫得非常清楚,是一篇相當棒的教學文。

仍然又是透過我的好朋友 Google,查詢到了能達成我理想中版面的 CSS 解法,起碼有三種方式可以達成。 我這裡也不想去比較各種方式的優劣與否,大致上就是作個整理,有興趣的網友們可以去行參考。

反覆嘗試,我是採用了最後這一個,"The 'Blog Style' 3 column Liquid Layout (Pixel-widths)" 。 這個版面的 CSS Layout 設計可以說是相當古怪 ( 簡單的說,它利用一個 200% 的 parent 區塊再折成只有右側 100% 來包含 content 區塊。)、也最複雜,但相對也是最具彈性,無論你用 IE or Firefox or 其它各類瀏覽器,無論你怎麼伸縮,版面真的是不會跑掉 (如側邊欄掉下問題)。

不過,我有做了一些調整。 如果三欄式的兩個 Sidebar 是放在同一側,那麼,我就把它視為是一個 "大" 的 Sidebar (parent),其內在包兩個左右 "小" 的 Sidebar (child)。 如此我是覺得無論這個大的 sidebar 內部怎麼變化,都是它自己的事,所以也可以任意調整內部甚而再加上 "上與下" 的 sidebar 列了。

怎麼實現最好呢? 就是把 html 與 css 都寫在同一個 html 檔內,然後打開 IE 與 Firefox,同時去測試比較寫出來後的效果。 對了,我強烈建議,一定要安裝 Firefox 的 Plugin: Firebug, 真是太好用了! 如此要能追蹤除錯,相當地方便。

我這裡也列出我原先所寫得這一個 css layout template 檔案:
閱讀全文 »

軟體思維顧問

專職軟體輔導與教育訓練的獨立顧問。輔導企業資訊單位如何有效組織系統開發與維護;輔導開發人員達成有效的專業分工。傳授如何把軟體作軟 (Keeping Software Soft)的技能,得以提昇系統的彈性/延展,並進而創造系統的再利用價值。

Personal