日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

本篇文章給大家帶來了關于WordPress的相關知識,其中主要給大家聊聊WordPress是怎么制作CMS欄目塊,感興趣的朋友下面一起來看一下吧,歡迎大家收藏學習!

WordPress制作CMS欄目塊

有網友提問:首頁如果每個欄目都單獨成一個列表(類似常規的cms)怎么寫啊?類似下面的效果:

一文詳解WordPress制作CMS欄目塊的方法

其實這個功能還是比較容易實現的,只需用WodPress內置的 WP_Query 類調用指定分類的文章即可,下面用一個具體實例來講解如何制作CMS欄目塊。

1、制作HTML頁面

本文就不講解html頁面的制作了,具體的html、css如何制作一個欄目塊,請自行學習制作。這里假設你的欄目塊是類似以下的html代碼:

<div class="box">
   <!-- 分類名稱及鏈接 -->
   <h3>
      <strong><a href="http://歷史分類鏈接/">歷史</a></strong>
      <em><a href="http://歷史分類鏈接/">更多</a></em>
   </h3>
 
   <!-- 文章列表 -->
   <ul class="iconBoxT14">
      <li><a href="http://文章1鏈接">文章1標題</a></li>
      <li><a href="http://文章2鏈接">文章2標題</a></li>
      <li><a href="http://文章3鏈接">文章3標題</a></li>
      <li><a href="http://文章4鏈接">文章4標題</a></li>
   </ul>
</div>

2、獲取分類鏈接

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

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

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

<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、獲取分類文章列表

我們需要動態獲取該分類下的指定數量的文章,然后動態輸出到html的ul列表中,這里需要用到 WP_Query 類,WP_Query有很多參數,這里只介紹2個簡單的,其他參數請參閱文檔或上網搜索。

我們將html做如下修改,加入WP_Query調用代碼:

<ul class="iconBoxT14">
   <?php
      // 傳遞調用參數
      $the_query = new WP_Query( 
                  array(
                      'category_name' => '歷史',  // 分類名稱
                      'posts_per_page' => 10     // 最多顯示的文章數
                  ) ); 
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
             
            // get_permalink()是獲取文章鏈接
            // get_the_title()是獲取文章標題
            echo '<li><a href="' . get_permalink() .'">' . get_the_title() .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">該分類沒有文章</a></li>';
      }
      // WP_Query結束都要重置一下
      // 以免影響其他代碼
      wp_reset_postdata();
?>
</ul>

4、限制文章標題字數

可能文章標題很長,超出了欄目塊的范圍。我們可以限制一下文章標題的字數,超出的用...代替,將第3點中的get_the_title()替換成以下代碼即可:

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

一個漢字是2個字符,上面的28代表最多顯示14個漢字,超出的用...代替。長度自選。

完整代碼

下面是通過以上修改后的完整代碼,多個分類塊就依此類推:

<div class="box">
   <!-- 分類名稱及鏈接 -->
   <h3>
      <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>
   </h3>
   <!-- 文章列表 -->
   <ul class="iconBoxT14">
   <?php
      // 傳遞調用參數
      $the_query = new WP_Query( 
                  array(
                      'category_name' => '歷史',  // 分類名稱
                      'posts_per_page' => 10      // 最多顯示的文章數
                  ) ); 
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
             
            // get_permalink()是獲取文章鏈接
            // get_the_title()是獲取文章標題
            echo '<li><a href="' . get_permalink() .'">' . mb_strimwidth(get_the_title(), 0, 28, '...') .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">該分類沒有文章</a></li>';
      }
      // WP_Query結束都要重置一下
      // 以免影響其他代碼
      wp_reset_postdata();
   ?>
   </ul>
</div>


分享到:
標簽:WordPress制作欄目塊 CMS欄目塊
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定