在前面的文章 Bootstrap & Jetstrap-快速構(gòu)建你的網(wǎng)站 中，我們已經(jīng)介紹了什么是 Bootstrap ，以及Bootstrap的簡單教程及相應(yīng)的可視化工具，在本教程中，我們將學(xué)習(xí)如何用 Bootstrap 制作我們自己的響應(yīng)式的 wordpress 主題 。Bootstrap是一個響應(yīng)式的框架，用來創(chuàng)建web網(wǎng)站和應(yīng)用，用它創(chuàng)建一個響應(yīng)式的 wordpress 主題將是一個偉大的起點。
我們將要構(gòu)建的主題是基于一個基本營銷網(wǎng)站的例子，你可以在 Bootstrap 示例頁面 找到。對于本示例，我們將為其頁面及功能創(chuàng)建出一系統(tǒng)模板：
在我們開始前還有一點事情需要你去做：
* 如果你想在一個線上的網(wǎng)站上創(chuàng)建一個主題并且不想在你開發(fā)的過程中讓人們看到新主題，你正好需這個 插件 。
一旦你準(zhǔn)備好這些事情，打開你帶有WordPress所有文件的目錄并導(dǎo)航至wp-content > themes。
在你導(dǎo)航至那個文件夾后，創(chuàng)建一個叫“wpbootstrap”的新文件夾，在文件夾里面粘貼 bootstrap 文件夾。
在那個文件夾里面創(chuàng)建一個新文件叫index.php。
現(xiàn)在我們將要把基本營銷網(wǎng)站的源碼拷貝并粘貼到index.php里面。下面是你所要用到的源碼。我們僅鏈接了代碼的一個文本版本，因為它太長了不能嵌入在這里。
現(xiàn)在我們有了一個靜態(tài)的 html 頁面，我們將要繼續(xù)去創(chuàng)建一個主 css 頁面。WordPress需要一個顯示在style.css頁面頂部的特殊格式的注釋，它使用這個注釋來獲得關(guān)于你這個主題的所有信息。
在你的index.php頁面所在文件夾中創(chuàng)建一個新文件并命名為style.css，WordPress需要一個帶有特定名稱的CSS文件style.css，所以我們不將其命名為其它任何名稱否則我們的主題將不能工作。
創(chuàng)建完了style.css文件，在文件頭部添加注釋：
/*Theme Name: WP BootstrapTheme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorialDescription: A demo theme built to accompany the Treehouse blog post <a >How to Build a WordPress Theme with Bootstrap</a>.Author: Zac GordonAuthor URI: http://teamtreehouse.com/Version: 1.0Tags: responsive, white, bootstrapLicense: 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*/
在我們安裝和開始構(gòu)建我們新主題前，我們最后需要做的是上傳一張將會在WordPress管理區(qū)顯示我們主題的圖片。這張圖片需要為300*225像素并且要命名為“screenshot.png”，你可以用下面這張圖片或做張你自己的。
你的文件夾結(jié)構(gòu)現(xiàn)在看起來和下面的一樣：
我們現(xiàn)在準(zhǔn)備進入到控制面板安裝我們的新主題。登錄到控制面板并且到外觀>主題?？蓱?yīng)該可以看到“WP Bootstrap”做為主題中的一個被列出來。
點擊WP Bootstrap主題下面的激活設(shè)置它為網(wǎng)站的當(dāng)前主題。
注意: 如果你正在使用一個線上的網(wǎng)站并且不想讓人們看到這個主題正在開發(fā)中，確保安裝并激活 Theme Test Drive plugin 。
當(dāng)它被激活后，訪問你的網(wǎng)站你可以看到像下面一樣的東西。
它很干凈，因為在當(dāng)前站點沒有一個CSS工作，所以下一步我們開始將靜態(tài)文件轉(zhuǎn)換到正在工作的WordPress主題中。
多數(shù)WordPress主題包含以下文件：
你通?？吹降囊冗@些文件多，但我們將要用到這些文件，從這開始并且構(gòu)建，直接為header.php，footer.php，和sidebar.php創(chuàng)建一個空文件。
我們即將要做的是把通常要在每個頁面頂部被包含的所有 html 剪切并且粘貼到header.php文件中。同時我們同樣把通常顯示在每個頁面底部的所有 html 剪切并且粘貼到footer.php文件中。
現(xiàn)在讓我們看下這些文件中的每一個是什么樣子。這些文件再次鏈接到文本文件，因為所有的源代碼太多了而不能在這列出。你可以從這些文件中拷貝代碼并且粘貼到你自己的.php文件中。
sidebar.php文件仍然是空的。
現(xiàn)在我們將使用我們第一個WordPress標(biāo)簽來引入header和footer到index.php頁面。
我們要使用的這兩個標(biāo)簽是get_header()和get_footer()。它們定義在WordPress函數(shù)中，功能是為了找到header.php和footer.php文件并且在頁面的頭部和尾部包含它們。WordPress可以這樣做是因為我們命名我們的文件為header.php和footer.php。如果我們命名這些文件為my-header.php和my-footer.php將不能工作。
現(xiàn)在我們的index.php文件變?yōu)椋?/p>
<?php get_header(); ?> <!-- Main hero unit for a primary marketing message or call to action --> <div> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a>Learn more »</a></p> </div> <!-- Example row of columns --> <div> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#">View details »</a></p> </div> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#">View details »</a></p> </div> <div> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a href="#">View details »</a></p> </div> </div><?php get_footer(); ?>
你可能會想知道我們?yōu)槭裁茨菢幼?？原因是后續(xù)我們將要創(chuàng)建多個要引入我們header和footer代碼的頁面，如果我們只讓所有的這些頁面保留header和footer的HTML并且想要在header 或 footer中改變些東西， 我們將不得不更新所有頁面的HTML內(nèi)容。使用“嵌入” 或 “包含” 方法允許我們在一個地方就可修改header和footer代碼并且自動會在所有頁面生效，這和外鏈CSS文件而不是在每個頁面的頂部包含CSS有點類似。
現(xiàn)在我們這些已經(jīng)做完，我們將去修復(fù)所有CSS和 javascript 文件的壞鏈接。
讓我們從頭部開始。
在頭文件中找到CSS文件的鏈接并修改它們
<!-- Le styles --><link href="../assets/css/bootstrap.css" rel="stylesheet"><style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; }</style><link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> 變成
<!-- Le styles --><link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> 然后在你的style.css文件中，添加如下代碼：
@import url('bootstrap/css/bootstrap.css'); @import url('bootstrap/css/bootstrap-responsive.css'); body { padding-top: 60px; padding-bottom: 40px; } 我們在此完成的部分中使用了一個特殊的WordPress標(biāo)簽，不管在我們網(wǎng)站的哪個頁面它都能自動把 bootstrap 的CSS鏈到我們的主題，你會看到這個代碼bloginfo()函數(shù)將以不同的方式在本教程中使用。然后我們使用 @import 標(biāo)簽從我們的主style.css文件中引入Bootstrap的CSS文件?，F(xiàn)在你的網(wǎng)站變成這樣：
好看點了！在我們轉(zhuǎn)移到制作footer之前，我們還有不只一個標(biāo)簽要添加到header中。 wp_head() 是一個重要的函數(shù)，它允許插件開發(fā)者向你的站點動態(tài)地添加CSS和 javascript ，如果我們不在模板中引入這個，一個插件將不能工作。同時我們也將要在header中去掉一些無關(guān)緊要標(biāo)簽。你的header.php變成了這樣。
<head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Le styles --> <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> </head> <body> <div> <div> <div> <a data-toggle="collapse" data-target=".nav-collapse"> <span></span> <span></span> <span></span> </a> <a href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a> <div> <ul> <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div> 現(xiàn)在，讓我們?nèi)デ謇韋ooter。我們下載的示例文件鏈接了很多的我們網(wǎng)站不需要的 javascript 文件。所以，我們開始刪除它們。更新你的footer，變成這樣：
<hr> <footer> <p>? Company 2012</p> </footer> </div> <!-- /container --> <!-- Le javascript ================================================== --> <script src="../assets/js/jquery.js"></script> <script src="../assets/js/bootstrap.js"></script> </body></html>
接下來我們添加 wp_footer() 標(biāo)簽，它和wp_head()擁有同樣的功能。我們閉合body標(biāo)簽前把這些放好。我們也要改變我們加載JavaScript文件的方法，將它們移至header.php文件，所以更新你的footer.php變成這樣：
<hr> <footer> <p>? Company 2012</p> </footer> </div> <!-- /container --> <?php wp_footer(); ?> </body></html>
現(xiàn)在我們可以回來通過WordPress推薦的加載JavaScript的方式添加JavaScript，這個方法包括使用 wp_enqueue_script() 函數(shù)。
首先，我們在wp_head()前面使用這個函數(shù)來加載 jquery ，接下來在你的header.php文件中放置下面代碼：
<?php wp_enqueue_script("jquery"); ?><?php wp_head(); ?> 下面我們將用wp_head()方法加載JavaScript，請記住，wp_head()方法是插件和主題中經(jīng)常用來向header.php文件中添加CSS和JavaScript的。
為此我們將不得創(chuàng)建一個新文件叫做functions.php并且從這里加載我們的JavaScript，這可能看起來像用很多多余的步驟去加載一個JavaScript 文件，但由于你的主題會變得越來越復(fù)雜，這將有助于一切保持清潔和有組織。
在和header.php同樣的文件夾中創(chuàng)建并且打開這個functions.php文件，粘貼下面的代碼：
<?php function wpbootstrap_scripts_with_jquery(){ // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' );}add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );?> 要測試是否奏效，導(dǎo)航至你的網(wǎng)站，調(diào)整其為平板電腦或手機的尺寸并且點擊下拉菜單，它應(yīng)該能下拉并且像這樣：
如果下拉沒有生效，這意味著鏈接JavaScript文件過程中出現(xiàn)錯誤。確保你已經(jīng)正確地將bootstrap > js文件夾上傳并且你的代碼是正確的。
現(xiàn)在我們已經(jīng)完成了基本的靜態(tài)模板設(shè)置，讓我們通過在WordPress中創(chuàng)建一個首頁把它變?yōu)閯討B(tài)的并且顯示在我們網(wǎng)站中，而不是我們現(xiàn)在的硬編碼的HTML。
要做這個，需要到WordPres控制面板并且點擊頁面>添加新頁面。標(biāo)題為“首頁”然后點擊內(nèi)容編輯器上面的HTML標(biāo)簽。現(xiàn)在我們將index.php文件中剩余的標(biāo)記語言剪切并且粘貼到這個頁面并且點擊“發(fā)布”。你的首頁應(yīng)該像這樣：
所有你的index.php文件都應(yīng)該包含header和footer：
<?php get_header(); ?><?php get_footer(); ?>
要想讓首頁引入我們在WordPress控制面板中添加的內(nèi)容，我們需要回到動態(tài)模板中，使用很可能是WordPress中最有名的函數(shù)叫做，循環(huán)。
WordPress循環(huán)，顧名思義，它循環(huán)一個頁面或文章的標(biāo)題和內(nèi)容，同樣還有很多其他信息如發(fā)布日期，作者，甚至該文章或頁面關(guān)聯(lián)的評論等。
基本的循環(huán)如下所示：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 下面是你的帶有循環(huán)的index.php文件的樣子：
<?php get_header(); ?><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?><?php get_footer(); ?> 我們將要做的是在WordPress代碼中添加該頁面的標(biāo)題和內(nèi)容，標(biāo)題的代碼為 the_title() 內(nèi)容的代碼為 the_content() 。你可能注意到它們和header和footer的標(biāo)簽非常相似，下面是更新后的代碼：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?><?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 我們在用瀏覽器測試前，必需在WordPress中更新設(shè)置，若要使首頁顯示為主頁而不是最近的博文。到控制面板設(shè)置 > 閱讀并且在“首頁顯示”下點擊“一個靜態(tài)頁”單選按鈕，接下來從“主頁”下拉菜單中選擇“首頁”。
點擊保存修改然后重新加載首頁，我們可以看到我們在控制面板中添加的首頁內(nèi)容。
WordPress允許我們使用一個特殊的叫做front-page.php的文件做為網(wǎng)站的首頁。接下來另存index.php文件為front-page.php并且從模板中去掉 get_title() ，因為我們不想讓“首頁”這兩個字以h1形式在頁面頂部顯示出來。
你的front-page.php文件應(yīng)該是這樣：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_content(); ?><?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 你可以讓index.php頁面保持原樣。
要展示這一切都正常工作，讓我們嘗試在控制面板中編輯首頁內(nèi)容，并且在網(wǎng)站的主頁查看是否發(fā)生改變。返回并且編輯首頁內(nèi)容并且去掉顯示在三個h2標(biāo)題下面的按鈕，修改代碼如下所示：
現(xiàn)在，重新訪問網(wǎng)站主頁，變成了這樣：
我們的首頁看起來還不錯啊，讓我們繼續(xù)添加網(wǎng)站的其他頁面。
在控制面板繼續(xù)添加一個關(guān)于，新聞，和聯(lián)系頁面，我們現(xiàn)在先使用假內(nèi)容，但你可以后續(xù)再回來添加你自己的內(nèi)容。再繼續(xù)添加兩或三個博文。
下面我們需要做的事情是替換網(wǎng)站中的靜態(tài)導(dǎo)航菜單為一個顯示剛才在控制面板中添加的頁面的導(dǎo)航。找到樣式名為“nav”的無序列表ul并且刪除其列表項， 同樣刪除登錄表單，因為我們將直接通過控制面板登錄網(wǎng)站。
在樣式為“navbar”的div內(nèi)部的標(biāo)記語言應(yīng)該是這樣：
<div> <div> <div> <a data-toggle="collapse" data-target=".nav-collapse"> <span></span> <span></span> <span></span> </a> <a href="#">Project name</a> <div> <ul> </ul> </div><!--/.nav-collapse --> </div> </div></div>
現(xiàn)在我們要用到WordPress代碼 wp_list_pages() 來列舉頁面，我們不去深入了解這個標(biāo)簽的選項，但它做了什么呢，它創(chuàng)建一個列表項并且鏈接到每一個頁面。添加下面的代碼到ul中。
<ul> <?php wp_list_pages(array('title_li' => '')); ?></ul> 如果你現(xiàn)在去看你的網(wǎng)站你會看到WordPress頁面已經(jīng)出現(xiàn)在主導(dǎo)航上。
這有兩個事情我們必要要修復(fù)一下。首先我們要正確排列頁面順序，第二我們要刪除示例頁面。我們將假定你可以刪除（或移至垃圾箱）示例頁面，改變頁面順序要到控制面板并點擊頁面項。
然后滑到關(guān)于頁面并且點擊快速編輯，改變順序域值為1，點擊更新，改變新聞頁面的順序為2并且聯(lián)系我們頁面為3，首頁應(yīng)該保持順序為0。
當(dāng)你再訪問你的網(wǎng)站的時候，導(dǎo)航應(yīng)該以正確的順序顯示。
我們現(xiàn)在已經(jīng)完成導(dǎo)航工作。然而，因為WordPress導(dǎo)航標(biāo)記和Bootstrap標(biāo)記略微不同，特別是他們?yōu)楫?dāng)前或活動頁面使用條目的樣式上，所以不得不略微修改下bootstrap.css文件。
在你的主題文件夾下，進入bootstrap > css并且打開bootstrap.css文件，在4595行你可以看到Bootstrap .active 類的一些樣式。
.navbar-inverse .nav .active > a,.navbar-inverse .nav .active > a:hover,.navbar-inverse .nav .active > a:focus,.navbar-inverse .nav .current_page_item a,.navbar-inverse .nav .current_page_item a:hover,.navbar-inverse .nav .current_page_item a:focus,.navbar-inverse .nav .current_page_parent a,.navbar-inverse .nav .current_page_parent a:hover,.navbar-inverse .nav .current_page_parent a:focus { 注意： 當(dāng)你制作了更多的WordPress主題后，你應(yīng)該考慮使用WordPress自帶的自定義菜單功能。你可以在 這 和 這 來閱讀了解它們。
在下一章節(jié)，我們將創(chuàng)建頁面和文章的模板。
開始先將index.php文件另存為page.php，它將為我們頁面模板服務(wù)。首先我們應(yīng)將“Sorry, no posts matched your criteria.”改為“Sorry, this page does not exist.”。
接下來，我們將添加一些Bootstrap標(biāo)記來創(chuàng)建一個兩列布局。修改你的page.php模板并引入Bootstrap“row”樣式和一個“span8”和“span4” 樣式，我們將為內(nèi)容使用span8，邊欄內(nèi)容為span4。
<?php get_header(); ?><div> <div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; else: ?> <p><?php _e('Sorry, this page does not exist.'); ?></p> <?php endif; ?> </div> <div> </div></div><?php get_footer(); ?> 我們將要在其他一些模板中使用側(cè)邊欄，我們要利用Wordpress的 get_sidebar() 標(biāo)簽的優(yōu)勢，它和 get_header() 和 get_footer() 標(biāo)簽工作原理一樣。
我們需要創(chuàng)建一個叫slidebar.php的新文件并且粘入下面代碼。
<h2>Sidebar</h2>
我們一會再回來修改這些代碼，但現(xiàn)在應(yīng)該先做是，回到page.php頁面并且在“span4”的div中添加 get_sidebar() 代碼，像這樣：
<?php get_header(); ?><div> <div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; else: ?> <p><?php _e('Sorry, this page does not exist.'); ?></p> <?php endif; ?> </div> <div> <?php get_sidebar(); ?> </div></div><?php get_footer(); ?> 如果現(xiàn)在看一下我們的頁面你會看到我們有了標(biāo)題，主要內(nèi)容，還有側(cè)邊欄。
我們的頁面模板看起來相當(dāng)不錯，讓我們繼續(xù)制作新聞頁面。
新聞頁面將有點困難因為它需要列出我們的文章，而不僅僅是頁面內(nèi)容。有一些方法可以解決，但這里我們要用一個非常簡單的方法處理。
另存page.php模板為home.php，在WordPress里，home.php模板是用來列出我們的文章的，在我們的示例中，我們將它為新聞頁面使用。
我們下面要做的第一件事是硬編碼一個h1標(biāo)簽到顯示新聞的主要內(nèi)容區(qū)域，這個標(biāo)簽應(yīng)該放在循環(huán)的上面。
在這個home.php模板，該循環(huán)將循環(huán)所有博客文章，所以，我們使用h2來代替h1為文章的標(biāo)題，因為h1將被用于頁面的標(biāo)題。
我們添加一個新標(biāo)簽 the_permalink() ，我們可以用其作從主新聞頁面鏈接到獨立新聞文章的鏈接錨點，這個標(biāo)記應(yīng)該在 the_title() 外層，如下所示：
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
在轉(zhuǎn)移到另一個前讓我們對該模板小改一下，首先讓我們改變無結(jié)果顯示文本為“Sorry, there are no posts.”，接下來，我們刪除顯示的文章內(nèi)容，僅列出鏈接到頁面的標(biāo)題，讓閱讀者在點擊標(biāo)題后閱讀內(nèi)容。
在內(nèi)容處我們使用一個叫 the_time() 的標(biāo)簽添加文章發(fā)布時間，如果你以前使用過PHP你可能認(rèn)識這個標(biāo)簽，這個標(biāo)簽?zāi)苡脕砻阑@示你想要定制的任何格式的日期，我們以下面格式顯示日期：
Monday, October 1st, 2012
我們用 the_time() 方法定制成這樣：
the_time('l, F jS, Y') 最后我們將要在日期下面添加一個hr標(biāo)簽來分開每篇文章，最后home.php模板變成這樣子：
<?php get_header(); ?><div> <div> <h1>News</h1> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><em><?php the_time('l, F jS, Y'); ?></em></p> <hr> <?php endwhile; else: ?> <p><?php _e('Sorry, there are no posts.'); ?></p> <?php endif; ?> </div> <div> <?php get_sidebar(); ?> </div></div><?php get_footer(); ?> 現(xiàn)在，為了使新聞頁面顯示得更合適，我們要到控制面板回到我們設(shè)置首頁做為主頁顯示的地方，導(dǎo)航至設(shè)置 > 閱讀，從緊挨著“文章頁”標(biāo)簽的下拉菜單中選擇新聞頁面并且點擊“保存更改”。
一旦這個完成后你返回新聞頁面將會看到列出來的文章。
現(xiàn)在留給我們剩下要做的一個是顯示單獨文章的模板，該模板非常類似我們的page.php模板，所以我們將page.php另存為single.php，在WordPress中single.php用來顯示單獨的文章。
我們要做的第一個改動是在標(biāo)題下面包含日期，我們使用前面同樣的代碼。
<p><em><?php the_time(‘l, F jS, Y’); ?></em></p>
我們對該模板要做的最大改變是添加文章的評論功能。然而要想讓評論工作的背后要需要很多復(fù)雜的代碼，實際上向模板添加評論功能是相當(dāng)簡單的，這要感謝 comments_template() 標(biāo)簽。
當(dāng)我們在內(nèi)容標(biāo)簽下面添加這個標(biāo)簽后我們的文章評論功能就可用了。我們同樣在評論上面添加一個hr標(biāo)簽幫忙與內(nèi)容分開，我們最終的single.php模板應(yīng)該是這樣：
<?php get_header(); ?><div> <div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <p><em><?php the_time('l, F jS, Y'); ?></em></p> <?php the_content(); ?> <hr> <?php comments_template(); ?> <?php endwhile; else: ?> <p><?php _e('Sorry, this page does not exist.'); ?></p> <?php endif; ?> </div> <div> <?php get_sidebar(); ?> </div></div><?php get_footer(); ?> 我們現(xiàn)在已經(jīng)完成了所有基本模板，在最后的章節(jié)，我們再去清理一些散亂的結(jié)尾，至此，我們基本完成了響應(yīng)式Bootstrap WordPress主題。
我們需要注意的第一個細(xì)節(jié)是標(biāo)題標(biāo)簽，標(biāo)題標(biāo)簽是一個網(wǎng)站的重要部分，搜索引擎優(yōu)化對尤為關(guān)心，理想地我們把頁面或文章的標(biāo)題名稱同樣做為網(wǎng)站的名稱。
我們可以用 wp_title() 標(biāo)簽完成，我們再稍微按如下方法對此標(biāo)簽做下定制。
wp_title('|',1,'right'); 這給我們想要的頁面或文章的標(biāo)題，但我們同樣仍想得到網(wǎng)站的名稱，我們可以通過使用 bloginfo() 方法來得到，我們之前使用過但這次是這樣的 bloginfo('name') ，如果我們一起使用這兩個標(biāo)簽代碼將為：
<title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title> 把這個添加到header.php文件的當(dāng)前標(biāo)題標(biāo)簽處，你可以看到標(biāo)題標(biāo)簽如我們所愿顯示在頁面的頂部。
接下來我們再把網(wǎng)站標(biāo)題放在左上角以與我們網(wǎng)站名稱相配，并且使其鏈接到首頁，這是我們這樣做的原因。我們找到這個：
<a href="#">Project name</a>
并且把它轉(zhuǎn)變成：
<a href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a> 你能看到我們在標(biāo)題標(biāo)簽中使用是 bloginfo('name') ，而 site_url() 標(biāo)簽是新的，但見名知意，它創(chuàng)建了一個到網(wǎng)站首頁的鏈接。
現(xiàn)在我們已經(jīng)創(chuàng)建了首頁鏈接，我們再從頁面列表中把“Home”鏈接去掉，我們可以通過在 wp_list_pages() 函數(shù)中添加一個額外的選項，這個選項是“exclude”，使用它我們不得不查找首頁的id，為此我們要導(dǎo)航至控制面板的頁面處并且查看該頁面的URL。
在這個示例中首頁的ID為4，它可能和你的網(wǎng)站不同，像這樣更新 wp_list_pages() 函數(shù)把4替換為你網(wǎng)站首頁的ID)：
wp_list_pages(array('title_li' => '', 'exclude' => 4)) 注意: 如果你在以后的主題中使用這個，你需要將這個ID更新為新主頁的ID。
我們將要采取的最后一個重要步驟是組件化主題，這要做的是允許我們在側(cè)邊欄使用WordPress組件。
為此我們需要向我們的functions.php文件中再添加一些代碼。
打開functions.php文件添加如下代碼：
<?php function wpbootstrap_scripts_with_jquery(){ // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' );}add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', ));?> 完成后，我們再回到sidebar.php，用這方法個允許我們通過在控制面板更新側(cè)邊欄的代碼來替換掉靜態(tài)內(nèi)容。
更新完sidebar.php后像這樣子：
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?> 如果你跟隨本教程有些困難，你可以在這下載已完成的主題： wpbootstrap.zip 。
至此，我們有了一個簡單的主題，你可以開始用你的內(nèi)容和樣式來定制了，你可以添加任何你定制的CSS到style.css文件。
你應(yīng)該也感覺舒服，我們已經(jīng)創(chuàng)建了這個簡單的屬于你自己的模板，如果你有興趣，可以查看你可能會在你網(wǎng)站中用到的所有可能的 WordPress主題標(biāo)簽 。
如果這是你第一個WordPress主題，那么這是一個良好的開端，因為我們會繼續(xù)學(xué)習(xí)關(guān)于構(gòu)建WordPress主題，我們將學(xué)習(xí)如何從控制面板去制作越來越多的動態(tài)的可定制的東西。
E文地址： http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
