WordpressCMS主题开发06-分类页面的文章调用和sidebar制作

这节课，我们来学习cms制作的第6课程，制作分类页面category.php以及分类页面的sidebar。

我们先来查看静态页面list.html，如果我们要做这个页面，其实已经做好了header以及footer。

所以，这节课，需要做的是把一个分类下的文章列表给调用出来，以及做一个对应的sidebar。

创建category.php

来到主题文件夹，拷贝list.html，重命名它为category.php。打开它，

header和footer在这里都需要替换，可以参考index.php对应的位置：

header替换:

<?php get_header();?>
 <!--搜索栏End--><!--主体下Begin-->

现在，来到网站前台，点击菜单栏上的“未分类”分类目录，这时，网页出现了乱码，原因很简单，因为编码不对，转为utf-8编码即可。

You must be ​​logged in​​ to view the hidden contents.

footer替换:

同样的方法，参考index.php中footer所在的位置

把footer下多余的代码给删除掉，最后就剩这些：

</div>
    <!--主体下End--><!--友情链接Begin--><!--友情链接End--><!--页脚Begin-->
    <?php get_footer();?>
<!--页脚End-->
  </body>
</html>

来到网站前台：

​​wordpress footer.php 底部内容 - WordpressCMS主题开发06-分类页面的文章调用和sidebar制作​​

没有问题。

调用文章列表

同样的，我们只需要一篇文章，来作为调用代码的参考：

<pre class="pure-highlightjs" style="margin: 0px; padding: 0px; font-weight: 400; font-family: inherit; background-color: transparent; border: none; color: rgb(69, 69, 69); font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">​​<div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/478.htm" title="淘宝网店营销把握好4个关键点"><span style="">淘宝网店营销把握好4个关键点</span></a></div><div class="f-right">2010-11-21 13:49:29</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/474.htm" title="淘宝网上创业，网赚首选的项目"><span style="">淘宝网上创业，网赚首选的项目</span></a></div><div class="f-right">2010-11-18 09:45:50</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/445.htm" title="网站内部链接的重要性和作用"><span style="">网站内部链接的重要性和作用</span></a></div><div class="f-right">2010-10-26 09:09:33</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/435.htm" title="5个优化方法，让你做好SEO工作"><span style="">5个优化方法，让你做好SEO工作</span></a></div><div class="f-right">2010-10-21 08:55:27</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/434.htm" title="SEO关键词选择的5个步骤"><span style="">SEO关键词选择的5个步骤</span></a></div><div class="f-right">2010-10-20 08:49:30</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/421.htm" title="如何做到段时间内积累20万外链"><span style="">如何做到段时间内积累20万外链</span></a></div><div class="f-right">2010-10-15 12:04:46</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/420.htm" title="网络赚钱到底是怎么样赚钱的？"><span style="">网络赚钱到底是怎么样赚钱的？</span></a></div><div class="f-right">2010-10-14 20:26:55</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/419.htm" title="快乐网赚教你如何月赚2万"><span style="">快乐网赚教你如何月赚2万</span></a></div><div class="f-right">2010-10-14 20:25:29</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/418.htm" title="什么样的模式才是好的网赚模式"><span style="">什么样的模式才是好的网赚模式</span></a></div><div class="f-right">2010-10-14 20:23:22</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/417.htm" title="教你SEO优化的标准流程，新手入门"><span style="">教你SEO优化的标准流程，新手入门</span></a></div><div class="f-right">2010-10-14 20:21:49</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/403.htm" title="国内SEO的现状分析以及产生的原因"><span style="">国内SEO的现状分析以及产生的原因</span></a></div><div class="f-right">2010-10-05 09:06:21</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/400.htm" title="淘宝上开店赚钱吗 "><span style="">淘宝上开店赚钱吗 </span></a></div><div class="f-right">2010-10-03 08:52:48</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/399.htm" title="虚幻私塾创业园：SEO基础知识你知多少？"><span style="">虚幻私塾创业园：SEO基础知识你知多少？</span></a></div><div class="f-right">2010-10-03 08:43:04</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/372.htm" title="最近做SEO的一些困惑和感想"><span style="">最近做SEO的一些困惑和感想</span></a></div><div class="f-right">2010-09-14 15:02:56</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/356.htm" title="做SEO的3个经常被忽略的问题"><span style="">做SEO的3个经常被忽略的问题</span></a></div><div class="f-right">2010-09-07 15:22:25</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/354.htm" title="浅谈SEO和SEM的关系和作用"><span style="">浅谈SEO和SEM的关系和作用</span></a></div><div class="f-right">2010-09-06 10:02:10</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/352.htm" title="优质的外链才能成为皇"><span style="">优质的外链才能成为皇</span></a></div><div class="f-right">2010-09-05 11:10:23</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/345.htm" title="新手学习SEO3个月的经验分享"><span style="">新手学习SEO3个月的经验分享</span></a></div><div class="f-right">2010-09-02 00:00:00</div><div class="clear"></div></div> <div class="c1-bline" style="padding:6px 0px;"><div class="f-left"><img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/> <a href="../wscy/340.htm" title="快乐网赚8月份SEO工作总结"><span style="">快乐网赚8月份SEO工作总结</span></a></div><div class="f-right">2010-08-31 11:13:34</div><div class="clear"></div></div>​​</pre>

再到首页刷新：

​​wordpress category页面精简 - WordpressCMS主题开发06-分类页面的文章调用和sidebar制作​​

我们把剩余的这行代码规整下：

<div class="c1-bline" style="padding:6px 0px;">
    <div class="f-left">
        <img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/>
            <a href="../wscy/513.htm" title="懂懂和陈辉民的第一次亲密接触"><span style="">懂懂和陈辉民的第一次亲密接触</span></a>
    </div>
    <div class="f-right">2011-01-09 00:10:48</div>
    <div class="clear"></div>
</div>

现在，我们只需要在这个div的上面和下面添加循环就可以。

在这里，我直接复制分类列表调用的代码：

<?php if ($posts_perpage) { ?>
<?php $postsperpage = $posts_perpage; ?>
<?php } else { ?>
<?php $postsperpage = 10; ?>
<?php } ?>
<?php
$categoryID=$cat;
$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>
<?php while (have_posts()) : the_post(); ?>
<ul>
<li><span><?php the_date_xml(); ?></span><span></span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
</ul>
<?php endwhile; ?>

然后，我们把文章的调用，放到对文章的循环调用代码中，并且更改固定的代码为wordpress的动态代码：

<?php if ($posts_perpage) { ?>
<?php $postsperpage = $posts_perpage; ?>
<?php } else { ?>
<?php $postsperpage = 10; ?>
<?php } ?>
<?php
$categoryID=$cat;
$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>
<?php while (have_posts()) : the_post(); ?>

<div class="c1-bline" style="padding:6px 0px;">
    <div class="f-left">
        <img src="../front_res/com_tag/head-mark4.gif" align="middle" class="img-vm" border="0"/>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> //替换a标签
    </div>
    <div class="f-right"><?php the_time('Y-m-d h:m:s') ?></div> //替换时间的获取方式
    <div class="clear"></div>
</div>
//删除之前的多余代码
<?php endwhile; ?>

不要忘记图片的路径也需要修改正确：

<img src="<?php bloginfo('template_directory'); ?>/img/head-mark4.gif" align="middle" class="img-vm" border="0"/>

来到列表页看下效果：

​​wordpress分类目录修改效果 - WordpressCMS主题开发06-分类页面的文章调用和sidebar制作​​

这里看到“网店赚钱”，我们需要把它改为分类目录的名称：

<div class="list_bar">// <?php wp_title('');?></div>

保存下，看看网站前台的效果：

You must be ​​logged in​​ to view the hidden contents.

再上面我们看到：面包屑导航的名称也是不对的：

面包屑导航：就是当前文章所对应的路径。我们现在处于首页-分类目录1下面，

那么面包屑导航的制作我们会在后面的课程中介绍，所以这部分我们先不改。

下面我们来给这个分类添加更高的文章。我们需要更多的文章才能测试出效果。

这里添加5篇文章，让它属于所有的分类。

添加完成后，来到网站前台，这些添加的文章就显示在这里了。

侧边栏的添加

接下来，我们来添加侧边栏，这里并不需要和首页一模一样，所以我们可以新建一个文件category_sidebar.php，然后，把在category.php中有关侧边栏的代码拷贝到category_sidebar.php里面：

<div class="page_other_msg right" style="width: 259px; height: 28px"><div class="left_row">
<div class="list">
<div class="list_bar">// 用户登录</div>
<div class="list_content">
<div id="div"></div>
</div>
</div>
</div>
<div class="left_row">
<div class="list">
<div class="list_bar">// 精彩图文</div>

<ul class="left_pic">
  <li><a href="../wzjc/115.htm" title="快来免费领取5套价值上万的网赚教程资料" target="_blank"><img src="../res_base/jeecms_com_www/upload/article/image/2010_2/6_22/2cc8gaqq93om.jpg" alt="快来免费领取5套价值上万的网赚教程资料" /></a><a href="../wzjc/115.htm" target="_blank">快来免费领取5套价值上万的网赚教程资料</a></li>
</ul>

</div>
</div>
<div class="left_row">
<div class="list">
<div class="list_bar">// 热门排行</div>
<div class="list_content">
<div class="orderlist">
<a href="../wzjc/519.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank">4种不适合做网络兼职赚钱的人分析</a> <br />
<a href="../wzzt/520.htm" title="网络兼职赚钱，思路决定出路" target="_blank">网络兼职赚钱，思路决定出路</a> <br />
<a href="../wszq/518.htm" title="豆豆对话虚幻私塾陈辉民：seo现状和前景分析" target="_blank">豆豆对话虚幻私塾陈辉民：seo现状和…</a> <br />
<a href="../wzjc/517.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank">4种不适合做网络兼职赚钱的人分析</a> <br />
<a href="../wzjc/516.htm" title="网络兼职赚钱，从青蛙比赛中发现秘密" target="_blank">网络兼职赚钱，从青蛙比赛中发现秘密</a> <br />
<a href="../wzjc/515.htm" title="懂懂谈对于互联网创业的看法30条（7）" target="_blank">懂懂谈对于互联网创业的看法30条（…</a> <br />
<a href="../wzjc/514.htm" title="懂懂谈对于互联网创业的看法30条（6）" target="_blank">懂懂谈对于互联网创业的看法30条（…</a> <br />
<a href="../wscy/513.htm" title="懂懂和陈辉民的第一次亲密接触" target="_blank">懂懂和陈辉民的第一次亲密接触</a> <br />
<a href="../wzjc/512.htm" title="懂懂谈对于互联网创业的看法30条（5）" target="_blank">懂懂谈对于互联网创业的看法30条（…</a> <br />
<a href="../wzjc/511.htm" title="懂懂谈对于互联网创业的看法30条（4）" target="_blank">懂懂谈对于互联网创业的看法30条（…</a> <br />
</div>

</div>
</div>
</div></div>

接下来，就需要在category.php中调用category_sidebar.php

这里需要一句调用的模板标签代码：

<?php include( TEMPLATEPATH . '/category_sidebar.php' ); ?>

来到分类页面，刷新效果，界面没有任何变化，说明这波操作是成功的

接下来，我们可以参考sidebar.php中的代码，为category_sidebar.php添加功能。

我们可以把“最新留言”和“热门文章”的代码拷过来