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

2019年7月6日07:58:59 2

这个功能挺好玩的,里维斯社之前也做了一个类似《WordPress侧边栏实现评论自动排第一》功能。后来一直想做在首页顶部做一个新评论自动排第一的功能,当时由于缺乏合适的CSS的样式,一直搁置到现在。

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

这个功能可以根据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->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>

 

  • 其中,修改<?php jiub(18); ?>代码中的18,可以修改你想要显示的读者数量,建议为6的倍数。
  • 其中,代码中49行的@media (max-width:820px) {.jiub{display:none}}设置了屏幕宽度小于820px,则不显示这个栏目。如果你想手机端也显示这个栏目,可以把这一行的代码注释掉。

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

 

2019/06/18 补充内容

上面提到的是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 } ?>

©里维斯社,本站推荐使用的主机:阿里云腾讯云

晨会游戏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar 奶爸de笔记 5

      你千万别上线这个功能,不然我怕我忍不住会每篇都评论。