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

PetitQ WordPress教程 2019-7-27 1.53K 0 0

这个功能挺好玩的，里维斯社之前也做了一个类似《WordPress 侧边栏实现评论自动排第一》功能。后来一直想做在首页顶部做一个新评论自动排第一的功能，当时由于缺乏合适的 CSS 的样式，一直搁置到现在。这个功能可以根据 SQL 查询语句，自动读取数据库中最新评论读者的昵称和网址，并自动显示在该栏目的第一位。虽然是很单一的一个功能，但是对鼓励读者互动特别是站长之间的交流互动还是起到非常大的作用。实现效果：

当然，网上有很多这方面的教程，但普遍缺乏合适的 CSS 样式表，可操作性不是很强。今天这个教程也是在前人的基础上做了小幅度的修改而实现的效果，现在简单介绍一下实现的过程。

一、添加功能

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

也想出现在这里？联系我们吧

```
    //最新评论排第一
```
```
    function jiub($af){
```
```
        global $wpdb;
```

        $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";

        $wally = $wpdb->get_results($queryaf);

```
        foreach ($wally as $commentaf){
```

            $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>";

```
            $outputy .= $tmpy;
```
```
        }
```

        $outputy = "<ul>".$outputy."</ul>";

```
        echo $outputy ;
```
```
    }
```

二、CSS 样式

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

```
    
```

    <?php if (zm_get_option('news')) { ?>

    <div class="cms-news sort" name="<?php echo zm_get_option('news_s'); ?>">

```
        <?php
```

        if (!zm_get_option('news_model') || (zm_get_option("news_model") == 'news_grid')) {

```
            // 标准模式
```

            require get_template_directory() . '/cms/cms-news-grid.php';

```
        }
```

        if (zm_get_option('news_model') == 'news_normal') {

```
            // 图文模式
```

            require get_template_directory() . '/cms/cms-news-normal.php';

```
        }
```
```
        ?>
```
```
    </div>
```
```
    <?php } ?>
```

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

```
    
```
```
    <style>
```

    .jiub {width:100%;margin-bottom:10px;height:auto!important;background:#fff;border:2px solid #dddddd;text-align:left;color:#123456;

    border:1px solid #eaeaea;border-radius:4px;}

    .jiub p{padding-top:10px;padding-bottom:10px;padding-left:3%;font-size:16px;border:1px solid #dddddd;background:#f8f8f8}

    .jiub ul{margin-top:10px;margin-bottom:10px;font-size:13px;padding-bottom:40px;margin-left:3%;}

    .jiub ul li{list-style:none;float:left;margin-left:0px;margin-bottom:10px;width:16%;overflow:hidden;height:24px;text-align:left;}

    .jiub ul li img{width:20px;height:20px;margin-left:2px;margin-right:2px;}

    @media (max-width:820px) {.jiub{display:none}}

```
    @media (max-width:820px) {
```

     .jiub ul li{width:25%;font-size:12px;}

     .jiub p{padding-top:4px;font-size:16px;}

```
     }
```
```
      .jiub i{
```
```
      color:#000000;
```
```
        margin-right:6px;
```
```
      }
```
```
    </style>
```
```
    <div class="jiub">
```

    <p>新评论的读者将自动排在本栏目第一位</p>

```
        <?php jiub(18); ?>
```

      <div style="clear: both;display:block"> </div>

```
    </div>
```

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

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

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

补充内容

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

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

首先找到以下代码（大概是 1-13 行），将代码放置到后面即可。

```
    <?php get_header(); ?>
```

        <div id="primary" class="content-area">

            <main id="main" class="site-main" role="main">

                <?php if (zm_get_option('order_by')) {  begin_orderby(); }?>

                <?php if (zm_get_option('slider')) { ?>

```
                    <?php
```

                        if ( !is_paged() ) :

                            get_template_part( 'template/slider' );

```
                        endif;
```
```
                    ?>
```
```
                <?php } ?>
```

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

已有 384 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

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

一、添加功能

二、CSS 样式

补充内容

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

相关文章

指定 WordPress 页面按需加载 JavaScript

如何自定义WordPress登录页面？

HTML5代码实现网站侧边抽屉式分享浮动导航

发表回复取消回复

热销模板

WordPress教程

一、添加功能

二、CSS 样式

补充内容

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复