wordpress 主题一步步制作教程!第11课侧边栏（图解）

文章目录[隐藏]

是否你已经很期待学习侧边栏（Sidebar）了呢？可能第一眼，感觉侧边栏很难，其实它根本不难，一旦你掌握了它的结构，就能很快编码和样式化它。

在开始侧边栏之前，这是现在 index.php 文件的样子。

不要忘记打开 Xampp……

第1步

让我们创建一个名字为 sidebar 的 DIV 标签用来围住侧边栏中的所有东西。在 container 的后面和 </body> 标签的前面输入以下代码：

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

在新的 sidebar 的 DIV 标签中创建一个新的无序列表。

<ul> - 开始无序列表
</ul> - 结束无序列表

增加一个列表元素（LI）到无序列表（UL）的中间并把一个子标题添加到这个列表中。

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

</li>

注意添加制表符到<li> 和 </li> 标签之前为了组织代码。

<li> - 开始列表元素
<h2> - 开始子标题
<?php _e(’Categories’); ?> - 输出字符 Categories
</h2> - 结束子标题
</li> - 结束列表条目

再次重复一次，如果你只是为自己创建主题，你不需要将 Categories 放入<?php e(’ ‘); ?>。使用<h2>Categories</h2> 作为你的子标题也完全没有问题。

保存 index.php 文件并刷新你的浏览器。你应该看到 Categories 子标题结构应该这样：

子标题前面的小圆点指明这个子标题是在一个列表元素中（LI）。如果你的无序列表（UL）有两个列表元素，那么将有两个小点。

在列表条目中添加下面代码

这里是上面代码的解释：

<ul> - 开始另一个无序列表
<?php wp_list_cats(); ?> - 调用分类链接列表
</ul> - 结束无序列表

保存并刷新浏览器。下面是我的分类链接列表的样子：

你默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面，那么你的列表链接列表应该是只有一个链接 Uncategorized。

更进一步的解释：

sort_column=name - 把分类按字符顺序排列
optioncount=1 - 显示在每个分类下面的日志数
hierarchial=0 - 不把子分类放到子列表元素中，这就解释了为什么我的 子分类 链接是列在列表中第一级。
& - 每次你增加另一个参数的时候，你需在它之前要输入 & 用来把和现有的参数区分开。如 & 在 sort_column 和 optioncount之间。