我們國內(nèi)的cms喜歡在首頁把主要欄目單獨(dú)做成一個(gè)列表塊,而國外的如wordpress默認(rèn)不是這樣子的,那么喜歡用wordpress的同學(xué),應(yīng)該如何打造像國內(nèi)cms欄目塊呢?本文來告訴你如何實(shí)現(xiàn).

這個(gè)功能只需用WodPress內(nèi)置的 WP_Query 類調(diào)用指定分類的文章即可,實(shí)現(xiàn)起來還是比較容易的,下面用一個(gè)具體實(shí)例來講解如何制作CMS欄目塊.

1、制作HTML頁面

本文就不講解html頁面的制作了,具體的html、css如何制作一個(gè)欄目塊,請(qǐng)自行學(xué)習(xí)制作,這里假設(shè)你的欄目塊是類似以下的html代碼:

1. <div class="box"> 
2.    <!-- 分類名稱及鏈接 --> 
3.    <h3> 
4.       <strong><a href="http://歷史分類鏈接/">歷史</a></strong> 
5.       <em><a href="http://歷史分類鏈接/">更多</a></em> 
6.    </h3> 
7.  
8.    <!-- 文章列表 --> 
9.    <ul class="iconBoxT14"> 
10.       <li><a href="http://文章1鏈接">文章1標(biāo)題</a></li> 
11.       <li><a href="http://文章2鏈接">文章2標(biāo)題</a></li> 
12.       <li><a href="http://文章3鏈接">文章3標(biāo)題</a></li> 
13.       <li><a href="http://文章4鏈接">文章4標(biāo)題</a></li> 
14.    </ul> 
15. </div> 

2、獲取分類鏈接

分類鏈接我們可以用靜態(tài)的網(wǎng)址，也可以用動(dòng)態(tài)的獲取的方式。靜態(tài)方式就是直接將上面的http://歷史分類鏈接/改成你的分類鏈接。動(dòng)態(tài)獲取分類鏈接有很多方式，可以通過分類id來獲取，可以通過分類別名來獲取，也可以通過分類名稱來獲取。這里介紹通過分類名稱來獲取分類鏈接，代碼:

1. <?php 
2.   $catid = get_cat_ID('歷史'); // 歷史是分類名稱 
3.   echo get_category_link($catid); // 輸出分類鏈接 
4. ?> 

用上面的php代碼替換html中的http://歷史分類鏈接/,代碼看起來是這樣:

1. <strong><a href="<?php echo get_category_link(get_cat_ID('歷史')); ?>">歷史</a></strong> 
2. <em><a href="<?php echo get_category_link(get_cat_ID('歷史')); ?>">更多</a></em> 

3、獲取分類文章列表

我們需要?jiǎng)討B(tài)獲取該分類下的指定數(shù)量的文章,然后動(dòng)態(tài)輸出到html的ul列表中,這里需要用到 WP_Query 類,WP_Query有很多參數(shù),這里只介紹2個(gè)簡(jiǎn)單的,其他參數(shù)請(qǐng)參閱文檔或上網(wǎng)搜索.

我們將html做如下修改,加入WP_Query調(diào)用代碼:

1. <ul class="iconBoxT14"> 
2.    <?php 
3.       // 傳遞調(diào)用參數(shù) 
4.       $the_query = new WP_Query( 
5.                   array( 
6.                       'category_name' => '歷史',  // 分類名稱 
7.                       'posts_per_page' => 10     // 最多顯示的文章數(shù) 
8.                   ) ); 
9.  
10.       if ( $the_query->have_posts() ) { 
11.          while ( $the_query->have_posts() ) { 
12.             $the_query->the_post(); 
13.             
14.             // get_permalink()是獲取文章鏈接 
15.             // get_the_title()是獲取文章標(biāo)題 
16.             echo '<li><a href="' . get_permalink() .'">' . get_the_title() .'</a></li>'; 
17.          } 
18.       } 
19.       else { 
20.          echo '<li><a href="#">該分類沒有文章</a></li>'; 
21.       } 
22.  
23.       // WP_Query結(jié)束都要重置一下 
24.       // 以免影響其他代碼//Vevb.com 
25.       wp_reset_postdata(); 
26. ?> 
27. </ul> 

4、限制文章標(biāo)題字?jǐn)?shù)

可能文章標(biāo)題很長(zhǎng),超出了欄目塊的范圍,我們可以限制一下文章標(biāo)題的字?jǐn)?shù),超出的用…代替,將第3點(diǎn)中的get_the_title()替換成以下代碼即可:

mb_strimwidth(get_the_title(), 0, 28, '...')

一個(gè)漢字是2個(gè)字符,上面的28代表最多顯示14個(gè)漢字,超出的用…代替,長(zhǎng)度自選,完整代碼,下面是通過以上修改后的完整代碼,多個(gè)分類塊就依此類推:

1. <div class="box"> 
2.    <!-- 分類名稱及鏈接 --> 
3.    <h3> 
4.       <strong><a href="<?php echo get_category_link(get_cat_ID('歷史')); ?>">歷史</a></strong> 
5.       <em><a href="<?php echo get_category_link(get_cat_ID('歷史')); ?>">更多</a></em> 
6.    </h3> 
7.  
8.    <!-- 文章列表 --> 
9.    <ul class="iconBoxT14"> 
10.    <?php 
11.       // 傳遞調(diào)用參數(shù) 
12.       $the_query = new WP_Query( 
13.                   array( 
14.                       'category_name' => '歷史',  // 分類名稱 
15.                       'posts_per_page' => 10      // 最多顯示的文章數(shù) 
16.                   ) ); 
17.  
18.       if ( $the_query->have_posts() ) { 
19.          while ( $the_query->have_posts() ) { 
20.             $the_query->the_post(); 
21.             
22.             // get_permalink()是獲取文章鏈接 
23.             // get_the_title()是獲取文章標(biāo)題 
24.             echo '<li><a href="' . get_permalink() .'">' . mb_strimwidth(get_the_title(), 0, 28, '...') .'</a></li>'; 
25.          } 
26.       } 
27.       else { 
28.          echo '<li><a href="#">該分類沒有文章</a></li>'; 
29.       } 
30.  
31.       // WP_Query結(jié)束都要重置一下 
32.       // 以免影響其他代碼 
33.       wp_reset_postdata(); 
34.    ?> 
35.    </ul> 
36. </div> 

現(xiàn)在,我們也能用wordpress打造成國內(nèi)網(wǎng)民習(xí)慣的網(wǎng)頁了.