這一篇我們主要講解 WordPress 主題的側(cè)邊欄，讓你很快掌握它的結(jié)構(gòu)，并能編碼和樣式化它。

在開始側(cè)邊欄之前，這是現(xiàn)在 index.php 文件的樣子。

第1步：創(chuàng)建 id 為 “sidebar” 的 DIV

首先讓我們創(chuàng)建一個名字為 sidebar 的 DIV，這樣可以把側(cè)邊欄中的所有東西都放入其中。在 container 的后面和 </body> 標簽的前面輸入以下代碼：

<div class=”sidebar”>
</div>

第2步：給側(cè)邊欄的 DIV 添加無序列表

在新的 sidebar 的 DIV 標簽中創(chuàng)建一個新的無序列表。

<ul> – 開始無序列表
</ul> – 結(jié)束無序列表

第3步：給這個無序列表添加原屬

增加一個列表元素（LI）到無序列表（UL）的中間并把一個子標題添加到這個列表中。

<li><h2><?php _e(’Categories’); ?></h2>

</li>

注意添加制表符到<li> 和 </li> 標簽之前為了代碼縮進。

<li> – 開始列表元素
<h2> – 開始子標題
<?php _e(’Categories’); ?> – 輸出字符 Categories
</h2> – 結(jié)束子標題
</li> – 結(jié)束列表條目

保存 index.php 文件并未刷新瀏覽器。現(xiàn)在應(yīng)該可以看到 Categories 子標題結(jié)構(gòu)應(yīng)該是這樣：

子標題前面的小圓點指明這個子標題是在一個列表元素中（LI）。如果無序列表（UL）有兩個列表元素，那么將有兩個小點。

第4步：添加分類鏈接列表

在列表條目中添加下面的代碼：

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>

這里是上面代碼的解釋：

<ul> – 開始另一個無序列表
<?php wp_list_cats(); ?> – 調(diào)用分類鏈接列表
</ul> – 結(jié)束無序列表

保存并刷新瀏覽器。下面是分類鏈接列表的樣子：

默認的分類是 Uncategorized。如果你沒有把日志發(fā)布到多個分類下面，那么你的列表鏈接列表應(yīng)該是只有一個鏈接 Uncategorized。

更進一步地解釋道：

• sort_column=name – 把分類按字符順序排列
• optioncount=1 – 顯示每個分類含有的日志數(shù)
• hierarchial=0 – 不按照層式結(jié)構(gòu)顯示子分類，這就解釋了為什么子分類鏈接是列在列表中的第一級。
• & – 每次增加另一個參數(shù)的時候，需要在它之前輸入 & 用來和現(xiàn)有的參數(shù)區(qū)分開。如 & 在 sort_column 和 optioncount之間。

為什么不把 <?php wp_list_cats(); ?> 放入<li> 和 </li> 標簽中呢？

當(dāng)我們使用 wp_list_cats() 這個函數(shù)調(diào)用鏈接列表函數(shù)的時候，它會自動附上一組<li> 和 </li>（列表條目）標簽在每個鏈接的左右。查看頁面源代碼；可以看到每個連接的周圍都已經(jīng)有一組列表元素的標簽。

當(dāng)處理側(cè)邊欄，無序列表和列表元素的時候，我們一定要記得規(guī)則 #1：按順序關(guān)閉所有標簽。

未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » WordPress主題開發(fā)教程十一：模板側(cè)邊欄