關於建構 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」等,這些都對開發過程中相當有幫助。


至於開發工具,我使用 Visual Studio Code,那真是沒話說的好用!當編輯寫碼告一段落後,再利用 Git 作 Commit 並同步至 GitHub,兼顧版控與雲端儲存之用。
Visual Studio Code Editor

如何整合上述三大套件,在此就不詳述說明了,參考上述的文件與影片,從過程中 Try-Error 大致就知道作法了。總之我現在自行整合的版本,大致就是調整下 Theme 內的檔案結構,把 inc, css, js, font, 甚而 sass 等目錄全給集中放到 /assets 目錄內,大致就是參考了 WordPress Handbook 手冊內關於 Theme folder and file structure 內的建議方式來整理檔案結構。

然後首要的修改地方就是 functions.php,新增與修改了所需要引用的 Style/Scripts 等所在檔案位置。具體可以參考我現在發佈到 Github 上的「Simplicity Core」這個未來會自行持續維護的 Starter Theme。
Github

目前只有把主要的 php 檔案內容加入了 bootstrap 的 Grid System 的 CSS Class,例如「col-md-8」,初步顯示的主頁如下圖。
Wordpress Starter Theme Design

後續會把有關於 Bootstrap 較常用的動態效果加入,例如 NavBar,也會加入 FontAwesome 豐富的圖示。比較重要的一些 How-to 過程會筆記分享記錄,大概告一小段落可以堪用的時候,就會發佈一個小 alpha 版,然後隨即就會應用在現在我這個部落格版面的變更調整。

文章導覽

   

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *