首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发04-如何在首页调用各个分类下的文章以及图片栏目
2018
05-20

WordpressCMS主题开发04-如何在首页调用各个分类下的文章以及图片栏目

这节课 主要讲解精彩图文的调用以及各个分类目录在前台的调用

精彩图文的制作

在wordpress中调用文章的图片需要用到一个缩略图插件:wp-thumbnails

点击下载:

wp-thumbnails

这个缩略图的插件在我们制作企业站以及cms主题时经常会用到。

现在,先把这个插件安装好,登陆wp的后台,安装完成后,在“设置”下面,就多出一个“WP-Thumbnails”的选项。点击它:

插件原理是每打开一篇文章生成相应的缩略图, 所以安装插件后请回首页点开几篇文章, 插件就会自动生成缩略图.

现在我们想来修改“精彩图文”

在首页,我们先把无用的代码删除掉掉:

<div id="roll-1635807135" style="width:100%;overflow:hidden;white-space:nowrap;" onmouseover="clearInterval(proll1635807135.pevent)" onmouseout="proll1635807135.pevent=setInterval(function(){proll1635807135.roll.call(proll1635807135)},proll1635807135.speed)">
	<table width="100%" align="left" cellpadding="0" cellspacing="0" border="0"><tr>
	<td id="roll-orig-1635807135">
		<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td sytle="height:28px;">
<dl style="width:100%;height:130px;padding-right:10px;">
	<dd style="margin-left:0;"><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套价值上万的网赚教程资料" border="0"/></a></dd>
	<dt><a href="wzjc/115.htm" title="快来免费领取5套价值上万的网赚教程资料" target="_blank"><span style="">快来免费领取5套价值上万的网赚教程资料</span></a></dt>
</dl>
</td>
		</tr></table>
	</td>
	<td id="roll-copy-1635807135"></td>
	</tr></table>
</div>
<script type="text/javascript">
var proll1635807135=new JCore.LeftRoller(1635807135,20,1);
</script>

我们先写上备注:图片调用的地方

        <div class="list_content" id="tw">
	图片调用的地方
	</div>

来到首页,现在是这个样子:

.png - WordpressCMS主题开发04-如何在首页调用各个分类下的文章以及图片栏目

缩略图的调用需要我们做好文章内容页面才可进行调用,所以这部分我们先备注,在后面的课程中再详细介绍。

分类目录的wordpress调用

我们看到,目前首页的分类目录有6个,我们想实现动态的控制分类目录的数量显示,也就是说,这个的数量可以根据你的分类目录的增多而增多的。

那如何实现呢?

首先我们需要把这些重复div容器全部删除,只保留一个:

也就是删除如下代码:

    <div style="width: 327px; height: 293px;" class="list cycle_news">
    <div class="list_bar">// <a href="seo/index.htm" target="_blank">网店赚钱</a></div>
    <div class="list_content"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/513.htm" title="懂懂和陈辉民的第一次亲密接触" target="_blank"><span style="">懂懂和陈辉民的第一次亲密接触</span></a></div><div class="f-right">01-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/478.htm" title="淘宝网店营销把握好4个关键点" target="_blank"><span style="">淘宝网店营销把握好4个关键点</span></a></div><div class="f-right">11-21</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/474.htm" title="淘宝网上创业,网赚首选的项目" target="_blank"><span style="">淘宝网上创业,网赚首选的项目</span></a></div><div class="f-right">11-18</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/445.htm" title="网站内部链接的重要性和作用" target="_blank"><span style="">网站内部链接的重要性和作用</span></a></div><div class="f-right">10-26</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/435.htm" title="5个优化方法,让你做好SEO工作" target="_blank"><span style="">5个优化方法,让你做好SEO工作</span></a></div><div class="f-right">10-21</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/434.htm" title="SEO关键词选择的5个步骤" target="_blank"><span style="">SEO关键词选择的5个步骤</span></a></div><div class="f-right">10-20</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/421.htm" title="如何做到段时间内积累20万外链" target="_blank"><span style="">如何做到段时间内积累20万外链</span></a></div><div class="f-right">10-15</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/420.htm" title="网络赚钱到底是怎么样赚钱的?" target="_blank"><span style="">网络赚钱到底是怎么样赚钱的?</span></a></div><div class="f-right">10-14</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/419.htm" title="快乐网赚教你如何月赚2万" target="_blank"><span style="">快乐网赚教你如何月赚2万</span></a></div><div class="f-right">10-14</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/418.htm" title="什么样的模式才是好的网赚模式" target="_blank"><span style="">什么样的模式才是好的网赚模式</span></a></div><div class="f-right">10-14</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wscy/417.htm" title="教你SEO优化的标准流程,新手入门" target="_blank"><span style="">教你SEO优化的标准流程,新手入门</span></a></div><div class="f-right">10-14</div><div class="clear"></div></div>
</div>
</div>
    </div>

    <div style="width: 327px; height: 293px;" class="list cycle_news">
    <div class="list_bar">// <a href="wz/index.htm" target="_blank">网赚杂谈</a></div>
    <div class="list_content"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/520.htm" title="网络兼职赚钱,思路决定出路" target="_blank"><span style="">网络兼职赚钱,思路决定出路</span></a></div><div class="f-right">03-16</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/507.htm" title="网赚高手成功必读:培养人脉的18个技巧" target="_blank"><span style="">网赚高手成功必读:培养人脉的18个技巧</span></a></div><div class="f-right">12-26</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/505.htm" title="美国主机的评测和对比分析" target="_blank"><span style="">美国主机的评测和对比分析</span></a></div><div class="f-right">12-13</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/503.htm" title="做广告联盟是国内的好,还是国外的好" target="_blank"><span style="">做广告联盟是国内的好,还是国外的好</span></a></div><div class="f-right">12-10</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/502.htm" title="一个网站要如何定位才能赚钱" target="_blank"><span style="">一个网站要如何定位才能赚钱</span></a></div><div class="f-right">12-10</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/501.htm" title="用心做好一个赚钱的站,保持长久的收益" target="_blank"><span style="">用心做好一个赚钱的站,保持长久的收益</span></a></div><div class="f-right">12-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/500.htm" title="搞网络兼职赚钱需要做英文站吗" target="_blank"><span style="">搞网络兼职赚钱需要做英文站吗</span></a></div><div class="f-right">12-08</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/499.htm" title="谈网站的策划和百度指数的关系和影响" target="_blank"><span style="">谈网站的策划和百度指数的关系和影响</span></a></div><div class="f-right">12-08</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/497.htm" title="百度和谷歌联盟的广告优缺点对比分析" target="_blank"><span style="">百度和谷歌联盟的广告优缺点对比分析</span></a></div><div class="f-right">12-07</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/495.htm" title="关于AdSense被网络误解的几个错误解释分析" target="_blank"><span style="">关于AdSense被网络误解的几个错误解释分…</span></a></div><div class="f-right">12-06</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzzt/494.htm" title="网络兼职人发展之路各个阶段分析3" target="_blank"><span style="">网络兼职人发展之路各个阶段分析3</span></a></div><div class="f-right">12-04</div><div class="clear"></div></div>
</div>
</div>
    </div>

    <div style="width: 327px; height: 293px;" class="list cycle_news">
    <div class="list_bar">// <a href="tech/index.htm" target="_blank">网赚方法</a></div>
    <div class="list_content"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/519.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank"><span style="">4种不适合做网络兼职赚钱的人分析</span></a></div><div class="f-right">03-16</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/517.htm" title="4种不适合做网络兼职赚钱的人分析" target="_blank"><span style="">4种不适合做网络兼职赚钱的人分析</span></a></div><div class="f-right">02-16</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/516.htm" title="网络兼职赚钱,从青蛙比赛中发现秘密" target="_blank"><span style="">网络兼职赚钱,从青蛙比赛中发现秘密</span></a></div><div class="f-right">02-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/515.htm" title="懂懂谈对于互联网创业的看法30条(7)" target="_blank"><span style="">懂懂谈对于互联网创业的看法30条(7)</span></a></div><div class="f-right">01-24</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/514.htm" title="懂懂谈对于互联网创业的看法30条(6)" target="_blank"><span style="">懂懂谈对于互联网创业的看法30条(6)</span></a></div><div class="f-right">01-21</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/512.htm" title="懂懂谈对于互联网创业的看法30条(5)" target="_blank"><span style="">懂懂谈对于互联网创业的看法30条(5)</span></a></div><div class="f-right">01-02</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/511.htm" title="懂懂谈对于互联网创业的看法30条(4)" target="_blank"><span style="">懂懂谈对于互联网创业的看法30条(4)</span></a></div><div class="f-right">01-02</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/510.htm" title="懂懂谈对于互联网创业的看法30条(3)" target="_blank"><span style="">懂懂谈对于互联网创业的看法30条(3)</span></a></div><div class="f-right">12-28</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/509.htm" title=" 懂懂谈对于互联网创业的看法30条(2)" target="_blank"><span style=""> 懂懂谈对于互联网创业的看法30条(2)</span></a></div><div class="f-right">12-28</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/508.htm" title="懂懂谈对于互联网创业的看法30条(1)" target="_blank"><span style="">懂懂谈对于互联网创业的看法30条(1)</span></a></div><div class="f-right">12-26</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wzjc/506.htm" title="利用谷歌的网址缩略服务群发链接(好用)" target="_blank"><span style="">利用谷歌的网址缩略服务群发链接(好用)</span></a></div><div class="f-right">12-15</div><div class="clear"></div></div>
</div>
</div>
    </div>

    <div style="width: 327px; height: 293px;" class="list cycle_news">
    <div class="list_bar">// <a href="xiangmu/index.htm" target="_blank">免费网赚项目</a></div>
    <div class="list_content"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/285.htm" title="【其他网赚】--沙丁鱼详细赚钱教程" target="_blank"><span style="">【其他网赚】--沙丁鱼详细赚钱教程</span></a></div><div class="f-right">08-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/284.htm" title="【其他网赚】--NewsBar(新闻时报)" target="_blank"><span style="">【其他网赚】--NewsBar(新闻时报)…</span></a></div><div class="f-right">08-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/283.htm" title="免费网赚项目:★其他赚钱导航★" target="_blank"><span style="">免费网赚项目:★其他赚钱导航★</span></a></div><div class="f-right">08-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/277.htm" title="【调查网赚】--ezypoint调查" target="_blank"><span style="">【调查网赚】--ezypoint调查</span></a></div><div class="f-right">08-07</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/276.htm" title="【调查网赚】--题客调查网" target="_blank"><span style="">【调查网赚】--题客调查网</span></a></div><div class="f-right">08-07</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/272.htm" title="【调查网赚】--第一调查网" target="_blank"><span style="">【调查网赚】--第一调查网</span></a></div><div class="f-right">08-06</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/271.htm" title="免费网赚项目:★调查赚钱导航★" target="_blank"><span style="">免费网赚项目:★调查赚钱导航★</span></a></div><div class="f-right">08-06</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/274.htm" title="【调查网赚】--调客网" target="_blank"><span style="">【调查网赚】--调客网</span></a></div><div class="f-right">08-06</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/273.htm" title="【调查网赚】--中国调查网" target="_blank"><span style="">【调查网赚】--中国调查网</span></a></div><div class="f-right">08-06</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/266.htm" title="免费网赚项目:★游戏赚钱导航★" target="_blank"><span style="color:#FF0000;">免费网赚项目:★游戏赚钱导航★</span></a></div><div class="f-right">08-05</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="xm/268.htm" title="【游戏网赚】--豆豆网" target="_blank"><span style="">【游戏网赚】--豆豆网</span></a></div><div class="f-right">08-05</div><div class="clear"></div></div>
</div>
</div>
    </div>

    <div style="width: 327px; height: 293px;" class="list cycle_news">
    <div class="list_bar">// <a href="zy/index.htm" target="_blank">免费资源推荐</a></div>
    <div class="list_content"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/322.htm" title="【免费建站】新竹自助网站系统免费版" target="_blank"><span style="">【免费建站】新竹自助网站系统免费版</span></a></div><div class="f-right">08-24</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/321.htm" title="【免费建站】Jimdo免费在线自助建站平台" target="_blank"><span style="">【免费建站】Jimdo免费在线自助建站平台…</span></a></div><div class="f-right">08-24</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/307.htm" title="【免费空间】1.68元免费空间" target="_blank"><span style="">【免费空间】1.68元免费空间</span></a></div><div class="f-right">08-18</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/287.htm" title="【免费建站】中网在线建站平台" target="_blank"><span style="">【免费建站】中网在线建站平台</span></a></div><div class="f-right">08-10</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/281.htm" title="【免费空间】主机屋免费空间" target="_blank"><span style="">【免费空间】主机屋免费空间</span></a></div><div class="f-right">08-09</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/269.htm" title="【免费空间】8U免费空间" target="_blank"><span style="">【免费空间】8U免费空间</span></a></div><div class="f-right">08-05</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/249.htm" title="【免费域名】Dot.TK免费顶级域名" target="_blank"><span style="">【免费域名】Dot.TK免费顶级域名</span></a></div><div class="f-right">08-02</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/244.htm" title="快乐网赚:提供最全网赚论坛大全" target="_blank"><span style="color:#FF0000;">快乐网赚:提供最全网赚论坛大全</span></a></div><div class="f-right">07-31</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="mfzy/99.htm" title="【免费空间】国外zymic推荐" target="_blank"><span style="">【免费空间】国外zymic推荐</span></a></div><div class="f-right">06-06</div><div class="clear"></div></div>
</div>
</div>
    </div>

来到网站前台,刷新。你看,目前只剩下一个栏目:

You must be logged in to view the hidden contents.

现在,我们就可以对这个分类目录的div进行循环的调用,其他的分类目录和这个目录是一模一样的。只是在调用的时候重复复制了非常多,就形成了多个分类目录div。

同样地,这个分类目录下有很多篇文章,我们并不需要这么多,只需要最后一篇文章就可以了。所以,删除如下代码:

<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/518.htm" title="豆豆对话虚幻私塾陈辉民:seo现状和前景分析" target="_blank"><span style="">豆豆对话虚幻私塾陈辉民:seo现状和前景分…</span></a></div><div class="f-right">02-25</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/460.htm" title="必看淘宝开店新手教程(6)网上开店经验总结篇" target="_blank"><span style="">必看淘宝开店新手教程(6)网上开店经验…</span></a></div><div class="f-right">11-05</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/459.htm" title="必看淘宝开店新手教程(5)没有经验如何开网店" target="_blank"><span style="">必看淘宝开店新手教程(5)没有经验如何…</span></a></div><div class="f-right">11-05</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/458.htm" title="必看淘宝开店新手教程(4)流量篇" target="_blank"><span style="">必看淘宝开店新手教程(4)流量篇</span></a></div><div class="f-right">11-04</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/457.htm" title="必看淘宝开店新手教程(3)信誉篇" target="_blank"><span style="">必看淘宝开店新手教程(3)信誉篇</span></a></div><div class="f-right">11-04</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/456.htm" title="必看淘宝开店新手教程(2)产品篇" target="_blank"><span style="">必看淘宝开店新手教程(2)产品篇</span></a></div><div class="f-right">11-03</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/455.htm" title="必看淘宝开店新手教程(1)准备篇" target="_blank"><span style="">必看淘宝开店新手教程(1)准备篇</span></a></div><div class="f-right">11-03</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/424.htm" title="狂奔的蒋晖与他的营销帝国" target="_blank"><span style="">狂奔的蒋晖与他的营销帝国</span></a></div><div class="f-right">10-15</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/414.htm" title="虚幻私塾创业园:创业者首先都是偏执狂" target="_blank"><span style="">虚幻私塾创业园:创业者首先都是偏执狂</span></a></div><div class="f-right">10-10</div><div class="clear"></div></div>
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/413.htm" title="虚幻私塾创业园:团队成功的基因,成功秘诀一" target="_blank"><span style="">虚幻私塾创业园:团队成功的基因,成功秘诀一</span></a></div><div class="f-right">10-10</div><div class="clear"></div></div>

来到网站前台,刷新。你看,目前只剩下一篇文章:

.png - WordpressCMS主题开发04-如何在首页调用各个分类下的文章以及图片栏目

那现在我们就要对剩下的这部分代码来进行循环的重复调用

    <div style="width: 327px; height: 293px;" class="list cycle_news">
    <div class="list_bar">// <a href="99seo/index.htm" target="_blank">久久专题</a></div>
    <div class="list_content"><div class="c1-body">
<div class="" style="padding:3px 0px;"><div class="f-left">&middot; <a href="wszq/412.htm" title="虚幻私塾创业园" target="_blank"><span style="">虚幻私塾创业园:奋斗路上勿忘支持我们的家人</span></a></div><div class="f-right">10-09</div><div class="clear"></div></div>
</div>
</div>
    </div>

现在,我们先把“循环调用分类目录下的文章”的模板标签代码作为参考,放置到上面代码的下面:

<?php $display_categories = array(1,3,4,130,6,7,8,5);
foreach ($display_categories as $category) { ?>
<div class="P_category">
<?php query_posts("showposts=8&cat=$category")?>
<h2 class="P_c_one"><a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a></h2>
<ul class="p_news">
<?php while (have_posts()) : the_post(); ?>
<li>· <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40, '…'); ?>
</a> </li>
<?php endwhile; ?>
</ul>
</div>
<?php } wp_reset_query();?>

然后保存,来到网站的前台,是这个样子:

.png - WordpressCMS主题开发04-如何在首页调用各个分类下的文章以及图片栏目

我们看到未分类下面有2篇文章,但是格式不对。

所以我们需要为代码添加css样式的调用:

<?php $display_categories = array(1,3,4,130,6,7,8,5);
foreach ($display_categories as $category) { ?>  //对分类目录进行循环
<div style=”width: 327px; height: 293px;” class=”list cycle_news”>
<?php query_posts(“showposts=8&cat=$category”)?> //调用分类目录开始的代码
<div class=”list_bar”>// <a href=”<?php echo get_category_link($category);?>”><?php single_cat_title(); ?></a></div> //标题的调用方式
<div class=”list_content”><div class=”c1-body”>
<?php while (have_posts()) : the_post(); ?> //文章标题的循环
<div class=”” style=”padding:3px 0px;”><div class=”f-left”>&middot; <a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”><?php echo mb_strimwidth(get_the_title(), 0, 40, ‘…’); ?> //文章的标题
</a></div><div class=”f-right”><?php the_time(‘m-d’) ?></div><div class=”clear”></div></div> //文章的日期
<?php endwhile; ?> //文章标题循环的结束
</div>
</div>
</div>
<?php } wp_reset_query();?>

添加完成后,删除参考的“调用分类目录下的文章”的代码,因为这段代码仅仅适用于参考的。

来到网站前台,你看出现了8个分类:

You must be logged in to view the hidden contents.

为什么会出现8个分类,因为我们对8个id进行循环:

<?php $display_categories = array(1,3,4,130,6,7,8,5);

我们可以来到wordpress后台-分类目录:

wordpress分类目录ID - WordpressCMS主题开发04-如何在首页调用各个分类下的文章以及图片栏目

我们只有3个分类,并且只有“未分类”分类目录下有2篇文章,对吧

在这里,我把多余的分类去除掉:

	<?php $display_categories = array(1,3,4);

再次刷新,首页就只会显示3个分类目录了。

最后编辑:
作者:MrBang
WordPress迷

留下一个回复