DUX主题首页添加热门文章排行模块

我一个朋友说很喜欢 XIU 主题上面的首页热门排行模块,问我能不能在 DUX 主题上面实现同样的功能。之前一直忙于工作没有时间,这两天闲下来就看了一下,最终历经曲折算是实现了这一功能,下面就将实现的方法分享给大家希望能够帮助到同样需要这一功能的朋友们,下面是我设置完成后前端的显示效果,基本上是模仿 XIU 主题的,当然如果你有其他的创意也可以自行修改相关代码。
DUX主题首页添加热门文章排行模块-云模板

此次对主题的修改操作主要涉及 index.php、options.php 以及 css 文件夹中的 main.css 三个文件,并且我们需要新建一个名为 qgg_recent_posts_most 的 php 文件填写相关代码丢到主题的 moduls 文件夹下,在主题修改之前还是提醒大家备份一下相关文件以防误操作引起的网站崩溃。

DUX 主题以及大前端的其他一些主题都是使用 Options Framework 框架添加后台设置选项的,所以说如果有想学习并且想以后自行添加后台设置选项的可以先了解一下 Options Framework 。这里我们只需要将下面这段代码添加到主题 options.php 文件的末尾 return $options; 之前即可。

  1. $options[] = array(
  2. 		'name' => __('卡盟吧资源网', 'haoui'),
  3. 		'type' => 'heading');
  4. 
    
  5. 	$options[] = array(
  6. 		'name' => __('首页热门排行', 'haoui'),
  7. 		'id' => 'most_list_s',
  8. 		'std' => true,
  9. 		'desc' => __('开启', 'haoui'),
  10. 		'type' => 'checkbox');
  11. 
    
  12. 	$options[] = array(
  13. 		'name' => __('首页热门排行-模式', 'haoui'),
  14. 		'id' => 'most_list_style',
  15. 		'std' => "comment",
  16. 		'type' => "radio",
  17. 		'options' => array(
  18. 			'comment' => __('按文章评论数', 'haoui'),
  19. 			'view' => __('按文章阅读数', 'haoui'),
  20. 			'zuixin' => __('按最新发布', 'haoui')
  21. 		));
  22. 
    
  23. 	$options[] = array(
  24. 		'name' => __('首页热门排行-标题', 'haoui'),
  25. 		'id' => 'most_list_title',
  26. 		'std' => __('一周热门排行', 'haoui'),
  27. 		'type' => 'text');
  28. 
    
  29. 	$options[] = array(
  30. 		'name' => __('首页热门排行-多少天内', 'haoui'),
  31. 		'id' => 'most_list_date',
  32. 		'std' => 7,
  33. 		'class' => 'mini',
  34. 		'type' => 'text');
  35. 
    
  36. 	$options[] = array(
  37. 		'name' => __('首页热门排行-显示文章数', 'haoui'),
  38. 		'id' => 'most_list_number',
  39. 		'std' => 5,
  40. 		'class' => 'mini',
  41. 		'type' => 'text');

添加完上述代码后我们既可以在主题的后台设置选项下看到一个名为“蝈蝈功能”的选项卡,该选项卡下包含以下内容:
DUX主题首页添加热门文章排行模块-云模板上面的操作只是在主题的后台添加了一个设置界面,勾选这些按钮并不能使得前端显示热门文章,下面这段代码主要是用来获取热门文章列表的核心代码,我们只需要新建一个名为 qgg_recent_posts_most 的 php 文件丢在主题的 models 文件夹下即可,为什么是 models 文件夹呢?这是因为主题在 functions-theme.php 文件夹中添加了一个 _moloader 的函数用于调取模板,这里为了方便我们直接使用该函数调取模板即可。

  1. <?php
  2. function qgg_recent_posts_most() {
  3.     global $wpdb;
  4.     // $days=400;
  5.     $days=_hui('most_list_date');
  6.     $limit=_hui('most_list_number');
  7.     $output = '';
  8. 
    
  9.     if( !_hui('most_list_style') || _hui('most_list_style')=='comment' ){
  10. 
    
  11.         $today = date("Y-m-d H:i:s");
  12.         $daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) );
  13.         $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");
  14.         if(empty($result)) {
  15.             $output = '<li>'.__('暂无最多评论文章!', 'haoui').'</li>';
  16.         } else {
  17.             $i = 1;
  18.             foreach ($result as $C_topten) {
  19.                 $postid = $C_topten->ID;
  20.                 $title = $C_topten->post_title.get_the_subtitle();
  21.                 $commentcount = $C_topten->comment_count;
  22.                 if ($commentcount != 0) {
  23.                     $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.'" rel="noopener noreferrer">'.$title.'</a></li>';
  24.                     $i++;
  25.                 }
  26. 
    
  27.             }
  28.         }
  29. 
    
  30.     }else if( _hui('most_list_style')=='view' ){
  31. 
    
  32.         global $post;
  33.         $limit_date = current_time('timestamp') - ($days*86400);
  34.         $limit_date = date("Y-m-d H:i:s",$limit_date);
  35.         $where = '';
  36.         $mode = 'post';
  37. 
    
  38.         if(!empty($mode) && $mode != 'both') {
  39.             $where = "post_type = '$mode'";
  40.         } else {
  41.             $where = '1=1';
  42.         }
  43. 
    
  44.         $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");
  45. 
    
  46.         if($most_viewed) {
  47.             $i = 1;
  48.             foreach ($most_viewed as $post) {
  49.                 $title = get_the_title().get_the_subtitle();
  50. 				$commentcount = $post->comment_count;
  51.                 $post_views = intval($post->views);
  52.                 $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- rel="noopener noreferrer">ID).'" title="'.$title.'">'.$title.'</a></li>';
  53.                 $i++;
  54.             }
  55.         } else {
  56.             $output = '<li>'.__('暂无最多阅读文章!', 'haoui').'</li>';
  57.         }
  58. 
    
  59.     }else if( _hui('most_list_style')=='zuixin' ){
  60. 
    
  61.         global $post;
  62.         $limit_date = current_time('timestamp') - ($days*86400);
  63.         $limit_date = date("Y-m-d H:i:s",$limit_date);
  64.         $where = '';
  65.         $mode = 'post';
  66. 
    
  67.         if(!empty($mode) && $mode != 'both') {
  68.             $where = "post_type = '$mode'";
  69.         } else {
  70.             $where = '1=1';
  71.         }
  72. 
    
  73.         $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 post_date DESC LIMIT $limit");
  74.         if($most_viewed) {
  75.             $i = 1;
  76.             foreach ($most_viewed as $post) {
  77.                 $title = get_the_title().get_the_subtitle();
  78. 				$commentcount = $post->comment_count;
  79.                 $post_views = intval($post->views);
  80.                 $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- rel="noopener noreferrer">ID).'" title="'.$title.'">'.$title.'</a></li>';
  81.                 $i++;
  82.             }
  83.         } else {
  84.             $output = '<li>'.__('暂无最新发布文章!', 'haoui').'</li>';
  85.         }
  86. 
    
  87.     }
  88. 
    
  89.     echo '<div class="most-comment-posts">
  90.             <div class="title"><h3>'._hui('most_list_title').'</h3></div>
  91.             <div class="mpc-bg"><ul>'.$output.'</ul></div>
  92.         </div>';
  93. }

上面我们自建了一个名为 qgg_recent_posts_most 的模板文件,下面我们需要在主题的首页调用它,添加下面的代码至你想要显示热门文章列表的位置即可。

  1. <!--热门文章排行-->
  2. <?php
  3.     if( _hui('most_list_s') ){
  4.         _moloader('qgg_recent_posts_most');
  5.     }
  6. ?>

代码很简单,通过后台是否开启热门文章选项判断是否加载上面的 qgg_recent_posts_most 模板文件。添加完上述代码基本上我们就可以刷新首页看到前端获取到最热文章列表了,但是由于没有设置样式前端显示还是很原始的样式特别难看,将下面的代码添加到主题的 main.css 文件中即可显示为我前面截图中的效果。

  1. /*首页热门文章样式*/
  2. .mpc-bg {background:#FFF;padding:1px 20px;margin:10px 0px;}
  3. .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;}
  4. .most-comment-posts ul{margin: 0 0 20px;padding: 20px 0 0;list-style: none;overflow: hidden;}
  5. .most-comment-posts li{white-space: nowrap; overflow: hidden; clear: both;text-overflow: ellipsis;}
  6. .most-comment-posts li > a span{color: #FF5E52;}
  7. .most-comment-posts p{float: right;font-size: 12px;}
  8. .most-comment-posts .label{margin-right: 8px;padding: 2px 7px;top: -1px;}
  9. .label-1{background-color: #ff7878;}
  10. .label-2{background-color: #f9c909;}
  11. .label-3{background-color: #24f00c;}
  12. .text-muted{color:#999}

可能由于本地缓存及 CDN 的影响我们无法立即查看到显示效果,一般刷新本地缓存及 CDN 缓存就好。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/94880

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买