【轉載自我愛水煮魚】

側邊欄是從零開始創建 WordPress 主題系列教程的第六篇，這一篇我們主要講解 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：按順序關閉所有標簽。