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>

來到網站前臺：

沒有問題。

呼叫文章列表

同樣的，我們只需要一篇文章，來作為呼叫程式碼的參考：

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

再到首頁重新整理：

我們把剩餘的這行程式碼規整下：

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

來到列表頁看下效果：

這裡看到“網店賺錢”，我們需要把它改為分類目錄的名稱：

<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新增功能。

我們可以把“最新留言”和“熱門文章”的程式碼拷過來