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

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

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

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

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

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

在新的 sidebar 的 DIV 標(biāo)簽中創(chuàng)建一個(gè)新的無(wú)序列表。

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

第3步：給這個(gè)無(wú)序列表添加原屬

增加一個(gè)列表元素（LI）到無(wú)序列表（UL）的中間并把一個(gè)子標(biāo)題添加到這個(gè)列表中。

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

</li>

注意添加制表符到<li> 和 </li> 標(biāo)簽之前為了代碼縮進(jìn)。

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

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

子標(biāo)題前面的小圓點(diǎn)指明這個(gè)子標(biāo)題是在一個(gè)列表元素中（LI）。如果無(wú)序列表（UL）有兩個(gè)列表元素，那么將有兩個(gè)小點(diǎn)。

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

在列表?xiàng)l目中添加下面的代碼：

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

這里是上面代碼的解釋：

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

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

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

更進(jìn)一步地解釋道：

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

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

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

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

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