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

大前端Dux主題首頁添加文章列表模塊:設置熱門文章

大前端dux是一款比較大眾化的主題深得許多站長的喜愛,不過許多模塊太過單調,沒有xiu主題那么靈活,導致網站pv不多,比較單一。

就比如xiu主題首頁還有個熱門文章列表,這里分享一個代碼的方法,給dux主題首頁自定義添加文章列表,設置類似于熱門文章的模塊。

有關于dux5.0主題:大前段主題DUX5.0破解版免費下載

wordpress首頁添加文章列表

這里的熱門文章主要是根據閱讀量或者評論數從數據庫中直接調取相應文章,

如果希望能改成自定義列表形式的文章,可以網站搜索教程:wordpress首頁添加自定義文章列表模塊:dux主題為例

以下這里針對dux主題來來在首頁添加一列文章列表,仿造了xiu主題那樣,首先我們來看看效果圖:

修改涉及文件:

index.php、options.php以及css文件夾中的main.css;

并且我們需要新建一個名為 qgg_recent_posts_most 的php文件填寫相關代碼丟到主題的modules文件加下,

在主題修改之前請大家備份一下相關文件以防誤操作引起的網站首頁出錯,難以還原。

一、options.php文件修改:

修改作用:在后臺添加控制按鈕,將下面這段代碼添加到主題 options.php 文件的末尾?return $options; 之前即可

/*
無作為設置
URL:http://www.btilnp.live/11093.html
*/
$options[] = array(
'name' => __('無作為功能', 'haoui'),
'type' => 'heading');

$options[] = array(
'name' => __('首頁熱門排行', 'haoui'),
'id' => 'most_list_s',
'std' => true,
'desc' => __('開啟', 'haoui'),
'type' => 'checkbox');

$options[] = array(
'name' => __('首頁熱門排行-模式', 'haoui'),
'id' => 'most_list_style',
'std' => "comment",
'type' => "radio",
'options' => array(
'comment' => __('按文章評論數', 'haoui'),
'view' => __('按文章閱讀數', 'haoui')
));

$options[] = array(
'name' => __('首頁熱門排行-標題', 'haoui'),
'id' => 'most_list_title',
'std' => __('一周熱門排行', 'haoui'),
'type' => 'text');

$options[] = array(
'name' => __('首頁熱門排行-多少天內', 'haoui'),
'id' => 'most_list_date',
'std' => 7,
'class' => 'mini',
'type' => 'text');

$options[] = array(
'name' => __('首頁熱門排行-顯示文章數', 'haoui'),
'id' => 'most_list_number',
'std' => 5,
'class' => 'mini',
'type' => 'text');

添加完上述代碼后我們既可以在主題的后臺設置選項下看到一個名為“無作為功能”的選項卡,該選項卡下包含以下內容:

二、創建qgg_recent_posts_most.php文件

上面的操作只是在主題的后臺添加了一個設置界面,勾選這些按鈕并不能使得前端顯示熱門文章,

下面這段代碼主要是用來獲取熱門文章列表的核心代碼,我們只需要新建一個名為 qgg_recent_posts_most 的php文件,

將文件丟在主題的models文件夾下即可,為什么是models文件夾呢?

這是因為主題在 functions-theme.php 文件夾中添加了一個_moloader 的函數用于調取模板,這里為了方便我們直接使用該函數調取模板即可。

<?php 
/* 熱門文章排行榜(支持按閱讀數及評論數排行)
* http://www.btilnp.live/11093.html
*/
function qgg_recent_posts_most() { 
global $wpdb;
// $days=400;
$days=_hui('most_list_date');
$limit=_hui('most_list_number');
$output = '';

if( !_hui('most_list_style') || _hui('most_list_style')=='comment' ){

$today = date("Y-m-d H:i:s");
$daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) ); 
$result = $wpdb->get_results("SELECT comment_count, ID, post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '$daysago' AND '$today' AND post_status='publish' AND post_type='post' ORDER BY comment_count DESC LIMIT 0 , $limit");
if(empty($result)) {
$output = '<li>'.__('暫無最多評論文章!', 'haoui').'</li>';
} else {
$i = 1;
foreach ($result as $C_topten) {
$postid = $C_topten->ID;
$title = $C_topten->post_title.get_the_subtitle();
$commentcount = $C_topten->comment_count;
if ($commentcount != 0) {
$output .= '<li><p class="text-muted"><span class="post-comments">&nbsp;'.__('評論', 'haoui').' ('.$commentcount.')</span></p><span class="label label-'.$i.'">'.$i.'</span><a target="_blank" href="'.get_permalink($postid).'" title="'.$title.'">'.$title.'</a></li>';
$i++;
}

}
}

}else if( _hui('most_list_style')=='view' ){

global $post;
$limit_date = current_time('timestamp') - ($days*86400);
$limit_date = date("Y-m-d H:i:s",$limit_date);
$where = '';
$mode = 'post';

if(!empty($mode) && $mode != 'both') {
$where = "post_type = '$mode'";
} else {
$where = '1=1';
}

$most_viewed = $wpdb->get_results("SELECT DISTINCT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '".current_time('mysql')."' AND post_date > '".$limit_date."' AND $where AND post_status = 'publish' AND meta_key = 'views' AND post_password = '' ORDER BY views DESC LIMIT $limit");

if($most_viewed) {
$i = 1;
foreach ($most_viewed as $post) {
$title = get_the_title().get_the_subtitle();
$commentcount = $post->comment_count;
$post_views = intval($post->views);
$output .= '<li><p class="text-muted"><span class="post-comments">&nbsp;'.__('閱讀', 'haoui').' ('.$post_views.')</span></p><span class="label label-'.$i.'">'.$i.'</span><a target="_blank" href="'.get_permalink($post->ID).'" title="'.$title.'">'.$title.'</a></li>';
$i++;
}
} else {
$output = '<li>'.__('暫無最多閱讀文章!', 'haoui').'</li>';
}

}

echo '<div class="most-comment-posts">
<div class="title"><h3>'._hui('most_list_title').'</h3></div>
<div class="mpc-bg"><ul>'.$output.'</ul></div>
</div>';
}

三、index.php文件修改

上面我們自建了一個名為 qgg_recent_posts_most 的模板文件,下面我們需要在主題的首頁調用它,添加下面的代碼至你想要顯示熱門文章列表的位置即可。

<!--熱門文章排行--> 
<?php 
if( _hui('most_list_s') ){
_moloader('qgg_recent_posts_most');
}
?>

代碼很簡單,通過后臺是否開啟熱門文章選項判斷是否加載上面的 qgg_recent_posts_most 模板文件。

四、添加樣式至main.css

添加完上述代碼基本上我們就可以刷新首頁看到前端獲取到最熱文章列表了,這里也給出樣式美化代碼,

表示最討厭那種發教程發到這里就說美化代碼大家自己設置之類的蠢話了。

將下面的代碼添加到主題的main.css文件中即可顯示為我前面截圖中的效果,添加調用css的里面都行。

/*首頁熱門文章樣式*/
.mpc-bg {background:#FFF;padding:1px 20px;margin:10px 0px;}
.label {position:relative;display:inline-block;padding:5px 7px;font-size:12px;line-height:14px;color:#ffffff;vertical-align:baseline;white-space:nowrap;background-color:#63b4f0;}
.most-comment-posts ul{margin: 0 0 20px;padding: 20px 0 0;list-style: none;overflow: hidden;}
.most-comment-posts li{white-space: nowrap; overflow: hidden; clear: both;text-overflow: ellipsis;}
.most-comment-posts li > a span{color: #FF5E52;}
.most-comment-posts p{float: right;font-size: 12px;}
.most-comment-posts .label{margin-right: 8px;padding: 2px 7px;top: -1px;}
.label-1{background-color: #ff7878;}
.label-2{background-color: #f9c909;}
.label-3{background-color: #24f00c;}
.text-muted{color:#999}

當然有時候看了cdn有緩存可能沒效果,請自己刷新一下即可。

歷史上的今天:
贊(14) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:www.btilnp.live無作為 » 大前端Dux主題首頁添加文章列表模塊:設置熱門文章

留下評論 搶沙發

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

登錄/注冊廣告合作

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

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三