纯代码实现WordPress评论VIP标志的等级功能

投稿  龙砚庭博客 2016-10-21 阅读 137 次 评论 32 条

最近我爱动感单车网的博主问我,怎么实现评论等级功能。老实说,类似的教程随便一搜就有一堆,但她说根据教程折腾下来还是不成功,所以我想了下,干脆就写一个教程出来,来试试问题出在哪里,哪成想欲思主题在phpstudy的本地站点居然出错了,想来应该是phpstudy的环境有点问题,所以最后也就不了了之。

纯代码实现WordPress评论VIP标志的等级功能

以下教程,经过我整理,虽然没有在欲思主题测试过,但想来是通用的,不成功肯定是调用代码没写好的缘故。

一、打开自身主题的函数文件(比如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.     if($author_count>=1 && $author_count< 10 )//数字可自行修改,代表评论次数。
  7.         echo '<a class="vip1" title="评论达人 LV.1"></a>';
  8.     else if($author_count>=11 && $author_count< 20)
  9.         echo '<a class="vip2" title="评论达人 LV.2"></a>';
  10.     else if($author_count>=21 && $author_count< 40)
  11.         echo '<a class="vip3" title="评论达人 LV.3"></a>';
  12.     else if($author_count>=41 && $author_count< 80)
  13.         echo '<a class="vip4" title="评论达人 LV.4"></a>';
  14.     else if($author_count>=81 && $author_count< 160)
  15.         echo '<a class="vip5" title="评论达人 LV.5"></a>';
  16.     else if($author_count>=161 && $author_count< 320)
  17.         echo '<a class="vip6" title="评论达人 LV.6"></a>';
  18.     else if($author_count>=321)
  19.         echo '<a class="vip7" title="评论达人 LV.7"></a>';
  20. }

PS:自行将上面的数字改为自己所期望的值,它们代表着来访者的评论次数。

二、css样式(一般扔到style.css即可):

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

此处有一个关键的地方,就是:

  1. .vp{background:url(/img/vip.png)

这张图片放在哪里(注意图片实际所在的文件夹名),意味着代码的写法不一样,假设是放在主题根目录下的style.css,则不用改动;如果是写在根目录下css文件夹里面的任意css文件,则要这么写:

  1. .vp{background:url(../img/vip.png)

三、调用代码(最关键的一步):

  1. if ($comment->user_id == '1') {
  2.         echo '<a title="博主认证" class="vip"></a>';
  3.     }else{
  4.         echo get_author_class($comment->comment_author_email,$comment->user_id);
  5.     }

将这段调用代码扔到需要显示的地方,需要注意的是:

  1. if ($comment->user_id == '1') {

它代表用户的id,如果博客的管理员不止一个或删掉了最开始时候建站时的管理员账户,可能就需要自行修改里面的id的值了。

因为我们一般都是想要它在评论者昵称后面显示,所以常规上的位置,则是写在functions.php里面:

  1. <?php comment_author_link() ?>

的后面。

有些主题因为主题作者的习惯,不会把评论样式写在functions.php,可能会写在评论文件comments.php。所以就需要用户自己去摸索熟悉自身在用的主题。

这里我就举两个例子:

1.dux主题,需要到dux/modules/mo_comments_list.php;

2.欲思主题,需要到根目录下的functions.php文件

欲思主题的具体位置大概在:

  1. //信息
  2.  echo '<div class="c-meta">';
  3.  echo '<span class="c-author">'.get_comment_author_link().'</span>';

的后面。

四、需要用到的png素材:

保存图片,扔到主题根目录的img文件夹(也就是主题放常规图片的文件,有些主题是images。)

纯代码实现WordPress评论VIP标志的等级功能

五、反馈(20160917

这个功能我在很多主题上都实际操刀过,妥妥的没问题,下面以欲思主题为例,出现过几个问题:

1.目前欲思主题1.0版本(测试时间20160917),并不兼容php7.0;

2.按照以上的教程来,差不多就可以实现该功能。

  • a.第一步骤跟第三步骤的代码都是扔在functions.php;
  • b.第二步骤的代码扔到style.css;
  • c.修改一下第二步骤:
  1. .vp{background:url(/img/vip.png)

为:

  1. .vp{background:url(img/vip.png)

效果如下:

纯代码实现WordPress评论VIP标志的等级功能 第3张

拓展阅读

本文地址:http://boke112.com/3593.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙砚庭博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 李主席
    李主席 【队长】 @回复

    求在NANA主题上的教程,我试过了,不行,第一步就出现了500的问题。

  2. 博客114导航
    博客114导航 【镇长】 @回复

    这个功能好

  3. 小萝博客
    小萝博客 【市长】 @回复

    这个我主题用不了

  4. 南通大熊SEO
    南通大熊SEO 【村长】 @回复

    网站的美观和自然搜索排名总是有很多纠结的地方!
    网站越美观,用到的css、js、图片越多,可是这些对目前的百度蜘蛛是有压力 的!

  5. 网赚博客
    网赚博客 【农民】 @回复

    很炫的一款功能

  6. 闲鱼
    闲鱼 【村长】 @回复

    [偷笑] 现在基本上都会加不同类型的等级样式了

  7. 阳光博客
    阳光博客 【村长】 @回复

    谢谢分享,多学学还是有好处的

  8. 一个五博客
    一个五博客 【农民】 @回复

    可以给我的加不!

  9. 苍蓝公爵
    苍蓝公爵 【镇长】 @回复

    哦哦!学习了!!!!

  10. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    以前我曾经试过多次,但一直就是不成功,问题出现在第3步,我所使用的调用代码不正确导致。在此,再次衷心感谢《龙砚庭》博主的热心帮助,棒哒哒 [鼓掌]

  11. 老叶养生博客
    老叶养生博客 【镇长】 @回复

    嗯,不错,有用的东东!

  12. 管家婆
    管家婆 【镇长】 @回复

    厉害厉害

  13. 手机视界
    手机视界 【农民】 @回复

    很好的教程,去试试

  14. 爱时尚
    爱时尚 【市长】 @回复

    这个看个人喜好

  15. 龙笑天
    龙笑天 【县长】 @回复

    真细致的步骤~ 有心了~~ [偷笑]

  16. 金榜台博客
    金榜台博客 【县长】 @回复

    来报道一下

  17. 明月登楼
    明月登楼 【总理】 @回复

    不错,值得收藏的代码!赞一个!

  18. 深夜网
    深夜网 【省长】 @回复

    很美观

  19. 唯历史
    唯历史 【总理】 @回复

    就是读者墙吧,根据评论添加文字描述?

  20. Koolight
    Koolight 【省长】 @回复

    龙兄真偏心,我问他问题就没有这么详细的教程!

  21. 李光春
    李光春 【农民】 @回复

    看个人

  22. 一介小民
    一介小民 【市长】 @回复

    没必要

  23. 捌零男人
    捌零男人 【镇长】 @回复

    步骤很清晰,但也有点复杂

    • boke112导航
      boke112导航【站长】 @回复

      @捌零男人 这个一般的主题都已经集成有这个功能了,不过会折腾的其实还是很简单的

      • 我爱动感单车网
        我爱动感单车网 【省长】 @回复

        @boke112导航 知之为知之、不知为不知,对于不懂的人来说折腾起来很有点抓狂,当然了对于你们这些懂的人自然只是小菜一碟而已!

  24. QQ-22564261
    QQ-22564261 【农民】 @回复

    学习带来乐趣,谢谢博主!