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、最终效果如下所示。