WordPress 使用 Bootstrap 製作主題

Bootstrap 介紹

【 Bootstrap 入門教程推薦:http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.html 】
Bootstrap 是 Twitter 推出的一個開源的用於前端開發的工具包。它由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發，是一個 CSS/HTML 框架。 Bootstrap 提供了優雅的 HTML 和 CSS 規範，它即是由動態 CSS 語言 Less 寫成。
如果你不瞭解前端，但是是一個 PHP 程序員那你就可以使用 Bootstrap 來建立自己的 WordPress 主題，而且 bootstrap 是一款響應式的 css 框架，可以適應各種設備。

bootstrap 官網：http://twitter.github.io/bootstrap/
bootstrap 中文網：http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.html

使用 bootstrap 製作 WordPress 主題

bootstrap 官網本身帶有一些實例頁面，所以我們可以拷貝這些頁面下來：http://twitter.github.io/bootstrap/examples.html, 接下來我們就制定製作如下 5 個頁面：

可定製的首頁設計
關於我們
聯繫我們
帶評論的章節
一個組件化的側邊欄

開始製作

準備工作：

準備好上述步驟後，打開你的 WordPress 下的 wp-content/themes:

在 p-content/themes 目錄中創建一個叫「wpbootstrap」的新文件夾，在文件夾裏面粘貼 bootstrap 文件夾。

在 wpbootstrap 文件夾裏面創建一個新文件 index.php

首頁代碼如下 (由於代碼太長沒法顯示請點擊查看)：
點擊查看代碼：bootstraop-demo-source-code
現在我們有了一個靜態的 HTML 頁面，我們將要繼續去創建一個主 CSS 頁面。 WordPress 需要一個顯示在 style.css 頁面頂部的特殊格式的註釋，它使用這個註釋來獲得關於你這個主題的所有信息。
在你的 index.php 頁面所在文件夾中創建一個新文件並命名為 style.css，WordPress 需要一個帶有特定名稱的 CSS 文件 style.css，所以我們不將其命名為其它任何名稱否則我們的主題將不能工作。
創建完了 style.css 文件，在文件頭部添加註釋：

/*
Theme Name: WP Bootstrap
Theme URI: http://teamtreehouse.com/WordPress-bootstrap-theme-tutorial
Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/WordPress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.
Author: Zac Gordon
Author URI: http://teamtreehouse.com/
Version: 1.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html
*/

在我們安裝和開始構建我們新主題前，我們最後需要做的是上傳一張將會在 WordPress 管理區顯示我們主題的圖片。這張圖片需要為 300*225 像素並且要命名為「screenshot.png」，你可以用下面這張圖片或做張你自己的。