，這一篇我們主要講解 WordPress 主題的側邊欄，讓你很快掌握它的結構，並能編碼和樣式化它。

在開始側邊欄之前，這是現在 index.php 文件的樣子。

第 1 步：創建 id 為 「sidebar」 的 DIV

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

<div class=」sidebar」>
</div>

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

在新的 sidebar 的 DIV 標籤中創建一個新的無序列表。

<ul> – 開始無序列表
</ul> – 結束無序列表

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

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

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

</li>

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

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

保存 index.php 文件並刷新瀏覽器。現在應該可以看到 Categories 子標題結構應該這樣：

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

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

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

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

這裏是上面代碼的解釋：

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

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

默認的分類是 Uncategorized 。如果你沒有把日誌發佈到多個分類下面，那麼你的列表鏈接列表應該是隻有一個鏈接 Uncategorized 。

更進一步的解釋：

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

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

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

當處理側邊欄，無序列表和列表元素的時候，我們一定記得規則 #1：按順序關閉所有標籤。