無作為
不僅僅是一種態度!

wordpress首頁添加自定義文章列表模塊_dux主題為例

許多的wordpress的模板挺好看的,例如dux這種,不過就是少個文章列表,這里分享一下如何給wordpress添加自定義文章列表功能。

再此之前有發過“大前端Dux主題首頁添加文章列表模塊:設置熱門文章”這么一篇文章,就算不是dux主題其他的wordpress主題也都適用。

不過目前只能是根據閱讀量或者評論數從數據庫中直接調取相應文章,不夠靈活,所以今天來分享如何自定義添加wordpress首頁文章列表的代碼教程。

wordpress首頁添加自定義文章列表模塊

這里分享的代碼教程不僅僅只適用于dux主題,樣式隨意美化了一下,跟多的大家可以自己修改,并且添加了后臺設置,更加方便用戶修改。

設置功能分別是:設置標題、標簽及自定義文章。

添加后臺選項代碼

將以下代碼添加到主題的 options.php 文件中去,添加完成后刷新 DUX 主題設置頁面應該就會出現一個“無作為功能”的選項卡,點擊該選項卡即可看到上面所示的后臺選項。

$options[] = array(
'name' => __('無作為功能', 'haoui'),
'type' => 'heading' );

$options[] = array(
'name' => __('自定義文章列表', 'haoui'),
'id' => 'qgg_diy_postlist_open',
'std' => true,
'desc' => __('開啟', 'haoui'),
'type' => 'checkbox');

$options[] = array(
'name' => '自定義文章列表標題',
'desc' => '',
'id' => 'qgg_diy_postlist_title',
'std' => '特別推薦文章列表',
'type' => 'text');

$options[] = array(
'name' => '自定義文章列表標簽',
'desc' => '',
'id' => 'qgg_diy_postlist_lable',
'std' => '特別推薦',
'type' => 'text');

$options[] = array(
'name' => '自定義文章列表',
'desc' => '每行一條,回車換行即可。不明白?<a rel="nofollow" href="http://www.btilnp.live/link?url=aHR0cDovL3d3dy53dXp1b3dlaS5uZXQ=">點擊這里</a> 進行留言。',
'id' => 'qgg_diy_postlist',
'std' => '<a rel="nofollow" href="http://www.btilnp.live/link?url=aHR0cDovL3d3dy53dXp1b3dlaS5uZXQ=">無作為分享:wuzuowei.net</a>',
'type' => 'textarea');

新增 qgg_diy_post_list.php 文件

為了方便管理,這里將顯示的主要代碼封裝在了一個 PHP 文件中,你可以將以下代碼復制保存為一個名為 qgg_diy_post_list.php 的文件中。

<!-- 自定義文章列表模塊  -->
<section>
<?php
echo '<div class=title><h3>'._hui('qgg_diy_postlist_title').'</h3></div>'
?>
<div class="qgg_diy_postlist">
<div style="list-style: none;">
<?php $sitemsg = explode(PHP_EOL,_hui('qgg_diy_postlist'));
foreach ($sitemsg as $value) {
echo '<li><span class="qgg_diy_postlist_lable">'._hui('qgg_diy_postlist_lable').'</span>&nbsp&nbsp'.stripslashes($value).'</li>';
} 
?>
</div>
</div>
</section>

文件丟到主題下的?modules?文件夾中即可。

前端顯示代碼

在主題的 index.php 文件中添加如下代碼,具體位置自行選擇。

<!--自定義文章列表--> 
<?php 
if( _hui('qgg_diy_postlist_open') ){
_moloader('qgg_diy_post_list');
}
?>

css樣式美化

這里的美化演示無作為隨便弄了一下,有總比沒有強,顏色大家自己調整即可。

/*自定義文章列表樣式*/
.qgg_diy_postlist_lable{
line-height: 1;
padding: 7px;
font-size: 14px;
background-color: #FF5E52;
color: #fff;
border-radius: 6px;
display: inline-block;
position: relative;
margin-left: 5px;
}
.qgg_diy_postlist{
background:#FFF;
padding:10px 20px;
margin:10px 0px;
border-radius:4px;
}
.qgg_diy_postlist li{
margin:5px 3px;
white-space: nowrap; 
overflow: hidden; 
clear: both;
text-overflow: ellipsis;
}

到這里文章列表就增加完畢了。

增強功能:新增右側自定義提示信息

總感覺文章列表右側空蕩蕩的,于是決定給右側加些自定義的內容,其實也只是修改了下樣式代碼,修改完成后如下所示:

修改方法:就是在原有css樣式代碼的基礎上添加下面這段代碼:

.qgg_diy_postlist li p{
line-height: 1.8;
font-size: 12px;
color:#AAA;
float: right;
}

修改完成后后臺文章列表以如下形式添加(每行一個):

<p>右側提示內容</p><a href="http://www.btilnp.live/">無作為分享</a>

更多美化修改或者意見,還原評論留言。


歷史上的今天:
贊(21) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:www.btilnp.live無作為 » wordpress首頁添加自定義文章列表模塊_dux主題為例

留下評論 2

  1. #1

    這個css樣式放dux主題的css那個文件夾

    進你心底6個月前 (10-02)回復

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三