WordPress如何制作CMS欄目塊

這篇文章主要介紹“WordPress如何制作CMS欄目塊”，在日常操作中，相信很多人在WordPress如何制作CMS欄目塊問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”WordPress如何制作CMS欄目塊”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1、制作HTML頁(yè)面

這里假設(shè)你的欄目塊是類(lèi)似以下的html代碼：

<div class="box">
   <!-- 分類(lèi)名稱(chēng)及鏈接 -->
   <h4>
      <strong><a href="http://歷史分類(lèi)鏈接/">歷史</a></strong>
      <em><a href="http://歷史分類(lèi)鏈接/">更多</a></em>
   </h4>

   <!-- 文章列表 -->
   <ul class="iconBoxT14">
      <li><a href="http://文章1鏈接">文章1標(biāo)題</a></li>
      <li><a href="http://文章2鏈接">文章2標(biāo)題</a></li>
      <li><a href="http://文章3鏈接">文章3標(biāo)題</a></li>
      <li><a href="http://文章4鏈接">文章4標(biāo)題</a></li>
   </ul>
</div>

2、獲取分類(lèi)鏈接

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

<?php
  $catid = get_cat_ID('歷史'); // 歷史是分類(lèi)名稱(chēng)
  echo get_category_link($catid); // 輸出分類(lèi)鏈接
?>

用上面的php代碼替換html中的http://歷史分類(lèi)鏈接/，代碼看起來(lái)是這樣：

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

3、獲取分類(lèi)文章列表

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

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

<ul class="iconBoxT14">
   <?php
      // 傳遞調(diào)用參數(shù)
      $the_query = new WP_Query( 
                  array(
                      'category_name' => '歷史',  // 分類(lèi)名稱(chēng)
                      'posts_per_page' => 10     // 最多顯示的文章數(shù)
                  ) ); 
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
            
            // get_permalink()是獲取文章鏈接
            // get_the_title()是獲取文章標(biāo)題
            echo '<li><a href="' . get_permalink() .'">' . get_the_title() .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">該分類(lèi)沒(méi)有文章</a></li>';
      }
      // WP_Query結(jié)束都要重置一下
      // 以免影響其他代碼
      wp_reset_postdata();
?>
</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)度自選。

完整代碼

下面是通過(guò)以上修改后的完整代碼，多個(gè)分類(lèi)塊就依此類(lèi)推：

<div class="box">
   <!-- 分類(lèi)名稱(chēng)及鏈接 -->
   <h4>
      <strong><a href="<?php echo get_category_link(get_cat_ID('歷史')); ?>">歷史</a></strong>
      <em><a href="<?php echo get_category_link(get_cat_ID('歷史')); ?>">更多</a></em>
   </h4>
   <!-- 文章列表 -->
   <ul class="iconBoxT14">
   <?php
      // 傳遞調(diào)用參數(shù)
      $the_query = new WP_Query( 
                  array(
                      'category_name' => '歷史',  // 分類(lèi)名稱(chēng)
                      'posts_per_page' => 10      // 最多顯示的文章數(shù)
                  ) ); 
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
            
            // get_permalink()是獲取文章鏈接
            // get_the_title()是獲取文章標(biāo)題
            echo '<li><a href="' . get_permalink() .'">' . mb_strimwidth(get_the_title(), 0, 28, '...') .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">該分類(lèi)沒(méi)有文章</a></li>';
      }
      // WP_Query結(jié)束都要重置一下
      // 以免影響其他代碼
      wp_reset_postdata();
   ?>
   </ul>
</div>

到此，關(guān)于“WordPress如何制作CMS欄目塊”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！