WordPress主題開發教程十一：模板側邊欄(WordPress側邊欄怎麼設置圖片和在線聯繫？)

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：按順序關閉所有標籤。

WordPress側邊欄怎麼設置圖片和在線聯繫？

我們在首頁和正文的右側邊所看到的最新文章、隨機文章等，都是通過WordPress的小工具實現的。不同主題所對應的小工具也有所不同，不過操作是一樣的，今天我們介紹一下怎麼使用這些小工具。

點擊左側的【外觀】→【小工具】，可以看到有很多選項。

使用方法很簡單，直接將左側的某一對應選項滑鼠左鍵拖動到右側側欄裡面，然後放手即可，若需要編輯什麼，那麼還需要點擊保存。若要進行調整，上下拖動即可。這個大家可以慢慢的操作，慢慢的嘗試。下面重點講解怎麼添加圖片和在線諮詢。

一、添加圖片

1、從左側將文本拖拽到右側，填寫標題，內容裡面需要用到一段代碼，圖片調用的代碼為：<img src=\"圖片地址\" alt=\"圖片關鍵詞\">。圖片地址可到多媒體庫中尋找，接著再設置一下圖片關鍵詞。

2、點擊左側的【多媒體】→【媒體庫】點擊你需要的圖片，緊接著將url地址複製下來。

3、將鏈接地址粘貼到雙引號中間的圖片地址，再設置一下alt屬性即可。

二、添加在線諮詢

1、百度搜索QQ在線生成，或是直接打開這條連接：http://shang.qq.com/v3/widget.html

2、打開之後登錄自己的QQ，在組件樣式中選擇一個類型，將下面生成的代碼複製下來。

3、將複製的代碼粘貼到文本框中並點擊保存。

4、最終效果如下所示。