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

其實整合 Underscore 與 Bootstrap、FontAwesome 原理並不困難，簡單的說就是以 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，兼顧版控與雲端儲存之用。

如何整合上述三大套件，在此就不詳述說明了，參考上述的文件與影片，從過程中 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。

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

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