WordPress主题教程,知更鸟主题评论留言等级美化教程,部署美化留言者等级图标-黑猫博客

2019年10月24日22:38:14 1 50

一直觉得评论区不太美观,找尽各种办法美化博客评论区,博客评论留言等级美化难住我好几天了,今天总算解决了,去找了好几个教程,好多不支持知更鸟Begin主题,好不容易找到一个支持的,还各种语法错误,折腾半天总算是折腾好了,需要的看下方的教程。

WordPress主题教程,知更鸟主题评论留言等级美化教程,部署美化留言者等级图标-黑猫博客

步骤方法:


一、注释/删除Begin主题目录下/inc/inc.php文件里的自带评论等级代码,这里我的使用的是Begin主题lts版本,【快捷搜索:if (zm_get_option('vip')) {】;把之前的评论等级获取样式改成下面的

  1. // 评论等级
  2. if (zm_get_option('vip')) {
  3.     //获取访客VIP样式
  4. function get_author_class($comment_author_email, $user_id){
  5. global $wpdb;
  6. $author_count = count($wpdb->get_results(
  7. "SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' "));
  8. if($author_count>=1 && $author_count< 10 )//数字可自行修改,代表评论次数。
  9.     echo '<a class="vip1" title="评论达人 LV.1"></a>';
  10. else if($author_count>=11 && $author_count< 20)
  11.     echo '<a class="vip2" title="评论达人 LV.2"></a>';
  12. else if($author_count>=21 && $author_count< 40)
  13.     echo '<a class="vip3" title="评论达人 LV.3"></a>';
  14. else if($author_count>=41 && $author_count< 80)
  15.     echo '<a class="vip4" title="评论达人 LV.4"></a>';
  16. else if($author_count>=81 && $author_count< 160)
  17.     echo '<a class="vip5" title="评论达人 LV.5"></a>';
  18. else if($author_count>=161 && $author_count< 320)
  19.     echo '<a class="vip6" title="评论达人 LV.6"></a>';
  20. else if($author_count>=321)
  21.     echo '<a class="vip7" title="评论达人 LV.7"></a>';
  22. }

二、注释/删除主题目录下/inc/comment-template.php文件里的引用评论等级代码,把第44行代码注释/删除操作,【快捷搜索:<?php if (zm_get_option('vip'))】

三、把以下代码添加到comment-template.php里<span class="comment-meta commentmetadata">前;

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

四、添加样式,复制以下代码添加到style.css里,注意background:url(img/vip.png)目录;

  1.  /* VIP等级图标 */
  2. .vip,.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7,.vp{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}

 

五、把以下图片保存到WordPress目录下的img文件夹里;

WordPress主题教程,知更鸟主题评论留言等级美化教程,部署美化留言者等级图标-黑猫博客

六、切记一定是WordPress的根目录,没有根目录没有img文件夹就创建一个,图片格式保存为vip.png都保存好后清理网站缓存刷新看看就可以了。

七、重点来了:如果可以使用,让你的博客又变美了,那么记得收藏黑猫博客,顺便下方给个打赏

感谢来访黑猫博客,希望此篇文章对您有所帮助,赞助本站写出更多对你有帮助的文章:点击打赏
广告也精彩

发表评论

您必须登录才能发表评论!

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

    • jwy jwy

      你这方法有误,用不了