WordPress首页顶部实现新评论自动排第一

这个功能挺好玩的,里维斯社之前也做了一个类似《wordpress 侧边栏实现评论自动排第一》功能。后来一直想做在首页顶部做一个新评论自动排第一的功能,当时由于缺乏合适的 CSS 的样式,一直搁置到现在。这个功能可以根据 SQL 查询语句,自动读取数据库中最新评论读者的昵称和网址,并自动显示在该栏目的第一位。虽然是很单一的一个功能,但是对鼓励读者互动特别是站长之间的交流互动还是起到非常大的作用。实现效果:
WordPress首页顶部实现新评论自动排第一-云模板当然,网上有很多这方面的教程,但普遍缺乏合适的 CSS 样式表,可操作性不是很强。今天这个教程也是在前人的基础上做了小幅度的修改而实现的效果,现在简单介绍一下实现的过程。

一、添加功能

复制代码到 functions.php 文件,为 WordPress 添加新评论读者自动排第一的功能。

  1.     //最新评论排第一
  2.     function jiub($af){
  3.         global $wpdb;
  4.         $queryaf="select comment_author, comment_author_url, comment_date from $wpdb->comments where comment_ID in (select max(comment_ID) from $wpdb->comments where comment_approved='1' and comment_author_url !='' and user_id='0'  GROUP BY comment_author_email)  ORDER BY comment_date DESC LIMIT $af";
  5.         $wally = $wpdb->get_results($queryaf);
  6.         foreach ($wally as $commentaf){
  7.             $tmpy= "<li><i class="fa fa-spinner fa-pulse"></i><a target="_blank" href="".$commentaf- rel="noopener noreferrer">comment_author_url."">".$commentaf->comment_author."</a></li>";
  8.             $outputy .= $tmpy;
  9.         }
  10.         $outputy = "<ul>".$outputy."</ul>";
  11.         echo $outputy ;
  12.     }

二、CSS 样式

打开主题目录下的 CMS 文件夹,找到名为“cms-news.php”的 PHP 文件,如果你使用的 begin 主题和我的是同一版本(LTS 版本),代码应该如下所示:

  1.     <!-- 最新文章 -->
  2.     <?php if (zm_get_option('news')) { ?>
  3.     <div class="cms-news sort" name="<?php echo zm_get_option('news_s'); ?>">
  4.         <?php
  5.         if (!zm_get_option('news_model') || (zm_get_option("news_model") == 'news_grid')) {
  6.             // 标准模式
  7.             require get_template_directory() . '/cms/cms-news-grid.php';
  8.         }
  9.         if (zm_get_option('news_model') == 'news_normal') {
  10.             // 图文模式
  11.             require get_template_directory() . '/cms/cms-news-normal.php';
  12.         }
  13.         ?>
  14.     </div>
  15.     <?php } ?>

然后将下面的 CSS 样式代码放置到的上方即可。

  1.     <!--评论自动排第一-->
  2.     <style>
  3.     .jiub {width:100%;margin-bottom:10px;height:auto!important;background:#fff;border:2px solid #dddddd;text-align:left;color:#123456;
  4.     border:1px solid #eaeaea;border-radius:4px;}
  5.     .jiub p{padding-top:10px;padding-bottom:10px;padding-left:3%;font-size:16px;border:1px solid #dddddd;background:#f8f8f8}
  6.     .jiub ul{margin-top:10px;margin-bottom:10px;font-size:13px;padding-bottom:40px;margin-left:3%;}
  7.     .jiub ul li{list-style:none;float:left;margin-left:0px;margin-bottom:10px;width:16%;overflow:hidden;height:24px;text-align:left;}
  8.     .jiub ul li img{width:20px;height:20px;margin-left:2px;margin-right:2px;}
  9.     @media (max-width:820px) {.jiub{display:none}}
  10.     @media (max-width:820px) {
  11.      .jiub ul li{width:25%;font-size:12px;}
  12.      .jiub p{padding-top:4px;font-size:16px;}
  13.      }
  14.       .jiub i{
  15.       color:#000000;
  16.         margin-right:6px;
  17.       }
  18.     </style>
  19.     <div class="jiub">
  20.     <p>新评论的读者将自动排在本栏目第一位</p>
  21.         <?php jiub(18); ?>
  22.       <div style="clear: both;display:block"> </div>
  23.     </div>

其中,修改代码中的 18,可以修改你想要显示的读者数量,建议为 6 的倍数。

其中,代码中 49 行的@media (max-width:820px) {.jiub{display:none}}设置了屏幕宽度小于 820px,则不显示这个栏目。如果你想手机端也显示这个栏目,可以把这一行的代码注释掉。

至此,WordPress 首页顶部评论自动排第一的功能就被放置到最近更新文章的上方。当然,放到其他位置也是可以的,但是建议放在网站首页的视觉中心,才能得到更好的曝光效果,发挥它该有的作用。

补充内容

上面提到的是 begin 主题杂志布局下的代码部署,考虑到很多朋友时使用博客布局的,那么博客布局应该怎么怎么部署才能正常显示呢?

博客布局下的代码部署和杂志布局的方法是一致的,只是第二步中代码放置的文件有所不同。杂志布局是放置到主题目录 CMS 文件夹中的 cms-news.php 中。博客布局时放置到主题目录 template 文件夹的 blog.php 文件中。

首先找到以下代码(大概是 1-13 行),将代码放置到后面即可。

  1.     <?php get_header(); ?>
  2.         <div id="primary" class="content-area">
  3.             <main id="main" class="site-main" role="main">
  4.                 <?php if (zm_get_option('order_by')) {  begin_orderby(); }?>
  5.                 <?php if (zm_get_option('slider')) { ?>
  6.                     <?php
  7.                         if ( !is_paged() ) :
  8.                             get_template_part( 'template/slider' );
  9.                         endif;
  10.                     ?>
  11.                 <?php } ?>

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

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建站客服微信二维码
点击这里购买