这个是虚坏叔叔的主站。牢记域名: [xuhss.com](拼音首字母)。首页可以搜索或: 虚幻账号

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

cms主题开发 虚幻 796℃ 0评论

这节课,我们来学习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编码即可。

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

footer替换:

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

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

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

来到网站前台:

wordpress footer.php 底部内容 - 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/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>

再到首页刷新:

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>

保存下,看看网站前台的效果:

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

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

面包屑导航:就是当前文章所对应的路径。我们现在处于首页-分类目录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添加功能。

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

 

 

转载请注明:虚坏叔叔 » WordpressCMS主题开发06-分类页面的文章调用和sidebar制作

喜欢 (0)

您必须 登录 才能发表评论!