WP主题教程 #6:侧边栏(Sidebar)

是不是已经期待侧边栏的内容了啊?咋一看,你也许觉得侧边栏比较难,但是实际上它并不是很复杂。一旦你熟悉了它的结构,你就能够快速的编写它并且给它添加样式了。

在跳到侧边栏之前,你的index.php文件的内容应该和链接中的文本内容一致。

不要忘记打开Xampp控制台。

第一步:我们先将侧边栏里所有的东西用一个class等于sidebar的框包裹住。将下面这段代码放在container框的下面,</body>的上面:

<div class=”sidebar”>

</div>

第二步:在你的新侧边栏框里加入一个无序列表。

<ul> — 无序列表的开始

</ul> — 无序列表的结束

第三步:在无序列表(ul)里加入一个列表项(li)并且在列表项(li)中放一个子标题。

<li><h2></h2></li>

注意要在<li></li>标签前用tab键来空出间距以便代码的组织。

<li> — 列表项的开始

<h2> — 子标题开始

— 输出字母Categories

</h2> — 子标题结束

</li> — 列表项结束

再次声明,在单词Categories两边可以不加。如果你现在做的主题是自己使用,那么你的子标题是<h2>Categories</h2>没有任何关系。

保存index.php文件然后刷新浏览器页面。你会看到Categories子标题的结构如下所示:

你的子标题前的那个点暗示着这个子标题是放在一个列表项(li)里的。如果你的无序列表(ul)里有两个列表项,就会出现两个点。这就像做笔记一样,在每个项目前加上一个点。

第四步

在列表项里加上下面的代码:

<ul>

</ul>

下面是那些代码的作用:

<ul> — 无序列表的开始

— 调用分类链接列表

</ul> — 无序列表结束

保存文件然后刷新页面,下面是我的分类链接的样子:

你的默认分类是未分类。如果你没有发表属于不同分类的文章,你的分类链接列表只有未分类这一个。

进一步解释

  • sort_colume=name — 将分类链接按字母顺序排列
  • optioncount=1 — 显示每个分类中的文章数
  • hierarchial=0 — 禁止将子分类(sub-categories)按照子列表项(sub-list-items)方式显示,所以我的分类列表中的Sub Category链接也列在列表的第一级了。
  • & — 每当你新加入一个属性,你都需要在它之前输入一个&来将它与之前的属性分开。就像sort_columeoptioncount之间的&一样。

为什么不在两边也加上<li></li>呢:

当你用wp_list_cats()调用分类链接列表时,就会在每个链接上自动加上<li></li>标签。转到你的浏览器,点击查看源代码,在弹出的窗口中转到结尾处看一下分类链接列表的源代码,你会发现每个链接都被一个列表项标签包裹住了。

当你修改侧边栏时,使用无序列表或者列表项时,一定要记住下面的规则:

规则#1:按照顺序关闭你曾打开的标签。

返回WordPress主题系列教程的开始