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

 223 2019-10-29 22:32:43 艾奇站长网

TAG:WordPress主题知更鸟等级图标

WordPress的评论区个人总是感觉不太美观,找了各种办法美化博客评论区,还找了很多相关教程,好多不支持知更鸟Begin主题,好不容易找到一个支持的,还各种语法错误,最近总算解决了,需要的看下方的教程:


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


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

// 评论等级
if (zm_get_option('vip')) {
    //获取访客VIP样式
    function 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 '<a class="vip1" title="评论达人 LV.1"></a>';
    else if($author_count>=11 && $author_count< 20)
        echo '<a class="vip2" title="评论达人 LV.2"></a>';
    else if($author_count>=21 && $author_count< 40)
        echo '<a class="vip3" title="评论达人 LV.3"></a>';
    else if($author_count>=41 && $author_count< 80)
        echo '<a class="vip4" title="评论达人 LV.4"></a>';
    else if($author_count>=81 && $author_count< 160)
        echo '<a class="vip5" title="评论达人 LV.5"></a>';
    else if($author_count>=161 && $author_count< 320)
        echo '<a class="vip6" title="评论达人 LV.6"></a>';
    else if($author_count>=321)
        echo '<a class="vip7" title="评论达人 LV.7"></a>';
}

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

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

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

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

/* VIP等级图标 */
.vip,.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7,.vp{background:url(img/vip.png) no-repeat;display:inline-block;overflow:hidden;border:none}
.vp{background-position:-515px -2px;width:16px;height:16px;margin-bottom:-3px}
.vp:hover{background-position:-515px -22px;width:16px;height:16px;margin-bottom:-3px}
.vip{background-position:-494px -3px;width:16px;height:14px;margin-bottom:-2px}
.vip:hover{background-position:-494px -22px;width:16px;height:14px;margin-bottom:-2px}
.vip1{background-position:-1px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip1:hover{background-position:-1px -22px;width:46px;height:14px;margin-bottom:-1px}
.vip2{background-position:-63px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip2:hover{background-position:-63px -22px;width:46px;height:14px;margin-bottom:-1px}
.vip3{background-position:-144px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip3:hover{background-position:-144px -22px;width:46px;height:14px;margin-bottom:-1px}
.vip4{background-position:-227px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip4:hover{background-position:-227px -22px;width:46px;height:14px;margin-bottom:-1px}
.vip5{background-position:-331px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip5:hover{background-position:-331px -22px;width:46px;height:14px;margin-bottom:-1px}
.vip6{background-position:-441px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip6:hover{background-position:-441px -22px;width:46px;height:14px;margin-bottom:-1px}
.vip7{background-position:-611px -2px;width:46px;height:14px;margin-bottom:-1px}
.vip7:hover{background-position:-611px -22px;width:46px;height:14px;margin-bottom:-1px}

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


WordPress主题教程,知更鸟主题评论留言等级美化教程,部署美化留言者等级图标(图2)


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


猜你喜欢
TP5.0框架实现无限级评论回复功能的方法分析

TP5.0框架实现无限级评论回复功能的方法分析

教程资讯 268 2019-10-14

这篇文章主要介绍了TP5.0框架实现无限级评论回复功能的方法,结合实例形式分析了thinkPHP5.0框架下无限级评论回...

TAG:thinkphp无限级评论

宝塔面板根据访问协议头屏蔽字节跳动爬虫

宝塔面板根据访问协议头屏蔽字节跳动爬虫

教程资讯 257 2019-10-27

最近,字节跳动搜索引擎的爬虫疯狂爬取全网资源,导致一些小网站服务器不堪重负,严重的直接使网站宕机。我们有很多方法可屏蔽掉...

TAG:字节跳动爬虫协议头宝塔面板

WordPress 指定分类显示指定文本

WordPress 指定分类显示指定文本

教程资讯 264 2019-10-02

获取分类ID 并进行判断和输出获取当前分类ID,进行if 判断当前分类ID 是否为指定分类ID 。根据这篇文章,设计了这...

TAG:WordPress指定文本

PHP遍历读取文件夹中图片并分页显示

PHP遍历读取文件夹中图片并分页显示

教程资讯 124 2019-10-19

本文实例讲述了php遍历、读取文件夹中图片并分页显示图片的方法。分享给大家供大家参考,具体如下:引子:我的网站图片目录i...

TAG:遍历分页