WordpressCMS主題開發04-如何在首頁呼叫各個分類下的文章以及圖片欄目

這節課 主要講解精彩圖文的呼叫以及各個分類目錄在前臺的呼叫

精彩圖文的製作

在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個分類目錄了。