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

精彩图文的制作

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

点击下载：

wp-thumbnails

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

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

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

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

在首页，我们先把无用的代码删除掉掉：

<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 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></pre>

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

        <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) { ?> //对分类目录进行循环

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”>· <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个分类目录了。