關於建構 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 版,然後隨即就會應用在現在我這個部落格版面的變更調整。
相關文章
- 2025 年網站重新建置-使用 BricksBuilder
- 使用 Docker 建置多個網域的 WordPress 站台開發 (運行) 環境
- [建站日誌] 更改 WordPress 內程式碼高亮 (hightlight) 展現的插件 (plugin) – 使用 Code Syntax Block
- 在 WordPress 文章內顯示如 Facebook 鏈結預覽效果 – 安裝 Visual Link Preview 插件
- [建站日誌] 虛擬主機主網域指向資料夾位置
- [建站日誌] WordPress 網站移轉至糖果主機
- WordPress 自行客製化 Sidebar Widget (隨機瀏覽/最新迴響) Plugin
- WordPress 系統暨版面大更新 (2018/04)-Bootstrap 4 based 框架
歷史上的今天
- [安裝筆記] Windows 10 WSL 2 安裝 Docker Desktop (含更改 Docker Image 路徑) (2021)
- {UML2.0} 分析 WebATM 的主要與次要參與者(Actor) (2005)
- 利用 AutoIt 工具擷取 「元大 Yeswin」控制項的問題記錄 (2008)
- 我的文章被「苗栗新聞網」給盜用了! (2010)
- [Tradestation 8.x] 顯示大盤江波每分鐘委買賣成交統計 (2) (2009)
- [系統日誌] 家裡改換 Hinet 光世代 20M/2M 非固定制寬頻 (2010)
- [QuoteManager] 匯入證交所大盤每分鐘委買賣成交統計資料 (2009)
- [Tradestation 8.x] 顯示大盤江波每分鐘委買賣成交統計 (1) (2009)
共有 0 則迴響