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

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

WordPress制作CMS欄目塊

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

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

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

1、制作html頁面

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

<div> ???<!-- 分類名稱及鏈接 --> ???<h3> ??????<strong><a>歷史</a></strong> ??????<em><a>更多</a></em> ???</h3>  ???<!-- 文章列表 --> ???<ul> ??????<li><a>文章1標題</a></li> ??????<li><a>文章2標題</a></li> ??????<li><a>文章3標題</a></li> ??????<li><a>文章4標題</a></li> ???</ul> </div>

2、獲取分類鏈接

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

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

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

<strong><a>"&gt;歷史</a></strong> <em><a>"&gt;更多</a></em>

3、獲取分類文章列表

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

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


    ????‘歷史’,??//?分類名稱 ??????????????????????‘posts_per_page’?=>?10?????//?最多顯示的文章數 ??????????????????)?);? ??????if?(?$the_query->have_posts()?)?{ ?????????while?(?$the_query->have_posts()?)?{ ????????????$the_query->the_post(); ???????????? ????????????//?get_permalink()是獲取文章鏈接 ????????????//?get_the_title()是獲取文章標題 ????????????echo?‘

  • ‘?.?get_the_title()?.’
  • ‘; ?????????} ??????} ??????else?{ ?????????echo?‘

  • 該分類沒有文章
  • ‘; ??????} ??????//?WP_Query結束都要重置一下 ??????//?以免影響其他代碼 ??????wp_reset_postdata(); ?>

4、限制文章標題字數

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

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

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

完整代碼

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

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

推薦學習:《WordPress教程

? 版權聲明
THE END
喜歡就支持一下吧
點贊5 分享