wordpress网站评论框显示评论用户等级图标以及站长认证图标的方法

摘要

wordpress访客留下评论后,可以显示不同评论者的等级图标,和dz论坛那样的效果,还能显示站长认证图标,感觉很好看,分享给大家。其中的等级文字和阈值可以自己进行修改!

在知言的自留地等一些博客看到他们的评论框显示了不同等级评论者的专属小图标。感觉很炫,就学了一下,加入到自己网站,分享一下这个小代码给大家,喜欢的朋友可以自己另外再次修改美化用到自己网站。本教程主要是利用的css风格调用一张图片的方法。

效果预览

ip位置

ip位置

实现方法

1.下载下面的等级图标源文件png

vip

vip


2.在主题目录的style.css文件中增加以下代码:

  1. /*评论者VIP显示功能的样式*/  
  2. .vp,.vip,.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7{background: url(img/vip.png) no-repeat;display: inline-block;overflow: hidden;border: none;}  
  3. .vp{background-position:-515px -2px;width: 16px;height: 16px;margin-bottom: -3px;}  
  4. .vp:hover{background-position:-515px -22px;width: 16px;height: 16px;margin-bottom: -3px;}  
  5. .vip{background-position:-494px -3px;width: 16px;height: 14px;margin-bottom: -2px;}  
  6. .vip:hover{background-position:-494px -22px;width: 16px;height: 14px;margin-bottom: -2px;}  
  7. .vip1{background-position:-1px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  8. .vip1:hover{background-position:-1px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  
  9. .vip2{background-position:-63px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  10. .vip2:hover{background-position:-63px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  
  11. .vip3{background-position:-144px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  12. .vip3:hover{background-position:-144px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  
  13. .vip4{background-position:-227px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  14. .vip4:hover{background-position:-227px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  
  15. .vip5{background-position:-331px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  16. .vip5:hover{background-position:-331px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  
  17. .vip6{background-position:-441px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  18. .vip6:hover{background-position:-441px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  
  19. .vip7{background-position:-611px -2px;width: 46px;height: 14px;margin-bottom: -1px;}  
  20. .vip7:hover{background-position:-611px -22px;width: 46px;height: 14px;margin-bottom: -1px;}  

3.在主题的functions.php中加入以下代码:

  1. //获取访客VIP样式  
  2. function get_author_class($comment_author_email,$user_id){  
  3. global $wpdb;  
  4. $author_count = count($wpdb->get_results(  
  5. "SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' "));  
  6. /*如果不需要管理员显示VIP标签,就把下面一行的”//“去掉*/  
  7. $adminEmail = get_option('admin_email');if($comment_author_email ==$adminEmail) return;  
  8. if($author_count>=1 && $author_count<5)  
  9. echo '<a class="vip1" title="小小屌丝 LV.1"></a>';  
  10. else if($author_count>=5 && $author_count<10)   
  11. echo '<a class="vip2" title="文艺青年 LV.2"></a>';  
  12. else if($author_count>=10 && $author_count<20)  
  13. echo '<a class="vip3" title="带头大哥 LV.3"></a>';   
  14. else if($author_count>=20 && $author_count<30)   
  15. echo '<a class="vip4" title="男女之神 LV.4"></a>';   
  16. else if($author_count>=30 &&$author_count<50)   
  17. echo '<a class="vip5" title="钻石用户 LV.5"></a>';   
  18. else if($author_count>=50 && $author_count<100)   
  19. echo '<a class="vip6" title="金牌元老 LV.6"></a>';   
  20. else if($author_count>=100)   
  21. echo '<a class="vip7" title="已经超神 LV.7"></a>';   
  22. }  

4.在需要显示的地方加入以下调用显示代码:

  1. <?php get_author_class($comment->comment_author_email,$comment->user_id)?>  
  2.             <?php if(user_can($comment->user_id, 1)){echo "<a title='站长认证' class='vip'></a>";}; ?>:  

【说明】本调用显示代码具体添加位置请参考:wordpress显示评论者真实ip地理位置信息

有什么对我说的?

发表评论

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