Shawn

欢迎来到我的博客!

《WordPress给来访的盆友们添加评论头衔》

 7月前  •   黑科技  •   ,  •   1.18k  •   21

这几天在各个博客四处闲逛的时候,看到很多博客的评论下大家都有自己的头衔,又想到了自己之前的hexo博客(缅怀多说=-=),就想在Wordpress实现下这样的功能,google了一下,发现有篇相关文章《纯代码实现WordPress评论VIP标志的等级功能》,简单改了改代码,就实现啦!

下面简单说下步骤:

1、打开自身主题的函数文件(比一般情况下是functions.php),将以下代码扔到最后一个?>的前面:

PHPfunction get_author_class($comment_author_email, $user_id){
    global $wpdb;
    $author_count = count($wpdb->get_results(
    "SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' "));
    if($author_count>=1 && $author_count<= 10 )//数字可自行修改,代表评论次数。
        echo '<span class="vip1">LV.1</span>';
    else if($author_count>=11 && $author_count<= 20)
        echo '<span class="vip2">LV.2</span>';
    else if($author_count>=21 && $author_count<= 40)
        echo '<span class="vip3">LV.3</span>';
    else if($author_count>=41 && $author_count<= 80)
        echo '<span class="vip4">LV.4</span>';
    else if($author_count>=81 && $author_count<= 160)
        echo '<span class="vip5">LV.5</span>';
    else if($author_count>=161 && $author_count<= 320)
        echo '<span class="vip6">LV.6</span>';
    else if($author_count>=321)
        echo '<span class="vip7">LV.7</span>';
}

PS:author_count的界限可自行修改,它代表着来访者的评论次数。

2、添加css样式

这边罗列了部分css样式,大家可根据自己喜好自行修改

CSS.vip {
	background: #0bf;
    	border-radius: 15px;
    	padding: 5px;
    	color: white;
}

.vip1 {
	background: pink;
    	border-radius: 15px;
    	padding: 5px;
    	color: white;
}

.vip2 {
	background: rgb(255, 102, 97);
    	border-radius: 15px;
    	padding: 5px;
    	color: white;
}

.night-mode .vip, .night-mode .vip1, .night-mode .vip2 {
	background: #999;
    	color: black;
}

3、调用代码

JavaScript<?php 
    if ($comment->user_id == '1') {
        echo '<span class="vip">萌萌哒博主</span>';
    }else{
        echo get_author_class($comment->comment_author_email,$comment->user_id);
    }
?>

将这段调用代码扔到需要显示的地方,需要注意的是comment->user_id代表用户的id,如果博客的管理员不止一个或删掉了最开始时候建站时的管理员账户,可能就需要自行修改里面的id的值了。

因为我们一般都是想要它在评论者昵称后面显示,所以常规上的位置,则是写在functions.php/comments.php(视主题而定)里<?php comment_author_link() ?>的后面。

至此就大功告成啦!效果见评论区。

PS:前排出售本站称号啦~名额有限,先到先得!

上一篇:
下一篇:

 评论


 已有21条评论

  1. txh 潜水 Windows NT | Chrome 59.0.3071.115 3月前

    以前就用再用这个个代码∠( ᐛ 」∠)_

    • Shawn 萌萌哒博主 Mac OS X | Safari 603.1.30 3月前

      txh这句话我似乎好像可能读起来有点费劲? ̄﹃ ̄

  2. 顾念 潜水 Windows 7 | Chrome 45.0.2454.87 5月前

    dalao能给下wp获取浏览器类型和客户端类型吗,网上的都不全……

    • Shawn 萌萌哒博主 Mac OS X | Safari 603.1.30 5月前

      顾念我直接用的插件……WP-UserAgent

  3. 无人小站 潜水 Windows NT | Firefox 53.0 5月前

    :mrgreen: 看起来不错就是好像得了多动症一样动来动去😂

    • Shawn 萌萌哒博主 Mac OS X | Safari 603.1.30 5月前

      • 潜水 Windows NT | Chrome 57.0.2987.137 5月前

        Shawn就是说你的评论框各种抖动特效加太多了🤷

        • Shawn 萌萌哒博主 Mac OS X | Safari 603.1.30 5月前

          ……

        • 我是谁 潜水 Mac OS X | Safari 601.1.46 4周前

          特效确实有的多不说话

  4. monsterlin 潜水 Mac OS X | Chrome 58.0.3029.110 5月前

    哈哈,你的这个输入框交互很帅呀,打起很舒服,比之前打一下,网页闪动的好很多很多

  5. MR WHY 潜水 Mac OS X | Chrome 58.0.3029.96 6月前

    缅怀多说 +1
    PS:喜欢打字时候跳出来的色彩哈哈哈哈哈哈哈忍不住多敲字。

    • Shawn 萌萌哒博主 Mac OS X | Safari 603.1.30 6月前

      MR WHYhttps://pan.baidu.com/s/1i4HbCYp
      去下载下这个js然后再加下这段代码就行啦!

      <script>
      POWERMODE.colorful = true; // make power mode colorful  
      POWERMODE.shake = false; // turn off shake  
      document.body.addEventListener('input', POWERMODE);
      </script>
      
  6. 小莫 潜水 Windows 7 | 搜狗浏览器 2.X 7月前

    谢谢,很强势

  7. 企业管理培训 潜水 Windows 7 | Firefox 52.0 7月前

    博客风格喜欢

  8. 香菇 传说 Windows NT | Maxthon 5.0.2.1000 7月前

    很好很强大

  9. Leonn 渣渣~ Windows NT | Chrome 56.0.2924.87 7月前

    好东西呀~