wordpress评论美化添加等级信息效果

有很多博客可以看到在评论中有“VIP1”-“VIPn”以及“菜鸟”“大菜鸟”“大神”等等。其实这个没有多大的实际用处,但为了美观还是很不错的也能激起大家评论的动力。
第一步:在主题目录下的“functions.php“文件中添加以下函数,添加到你主题的最后一个“?>”


//评论VIP标志function get_author_class($comment_author_email,$comment_author_url){global $wpdb;$adminEmail = 'nuomens@163.com';$author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' "));if($comment_author_email ==$adminEmail)echo '';$linkurls = $wpdb->get_results("SELECT link_url FROM $wpdb->links WHERE link_url = '$comment_author_url'");foreach ($linkurls as $linkurl) {if ($linkurl->link_url == $comment_author_url )echo '';}if($author_count>=1 && $author_count<10 && $comment_author_email!=$adminEmail)echo '';else if($author_count>=10 && $author_count<20 && $comment_author_email!=$adminEmail)echo '';else if($author_count>=20 && $author_count<50 && $comment_author_email!=$adminEmail)echo '';else if($author_count>=50 && $author_count<100 && $comment_author_email!=$adminEmail)echo '';else if($author_count>=100 &&$author_count<200 && $comment_author_email!=$adminEmail)echo '';else if($author_count>=200 && $author_coun<500 && $comment_author_email!=$adminEmail)echo '';else if($author_count>=500 && $comment_author_email!=$adminEmail)echo '';}

第二步:添加调用代码,有了显示的代码了就需要一个调用的代码,一般在主题的comments.php里,找到



在后面添加以下代码


comment_author_email,$comment->comment_author_url)?>user_id, 1)){echo "";}; ?>

第三步:添加CSS样式,至此已经可以使用了但是显示的效果很不美观严重影响心情,为了美观需要加入如下CSS代码


.vp,.vip,.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7{background: url(images/vip.png) no-repeat;display: inline-block;overflow: hidden;border: none;}.vp{background-position:-494px -3px;width: 16px;height: 16px;margin-bottom: -3px;}.vp:hover{background-position:-491px -19px;width: 19px;height: 18px;margin-top: -3px;margin-left: -3px;margin-bottom: -3px;}.vip{background-position:-515px -2px;width: 16px;height: 16px;margin-bottom: -3px;}.vip:hover{background-position:-515px -22px;width: 16px;height: 16px;margin-bottom: -3px;}.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;}.btn-out,.btn-hover,.btn-down{background: url(images/vip.png) no-repeat;width: 64px;height: 23px;border:none;}.btn-out{background-position:-659px -1px;}.btn-hover{background-position:-724px -1px;}.btn-down{background-position:-789px -1px;}.input{border-radius: 1px 1px 1px 1px;border:1px solid #C5C5C5;background-color:#F6F6F6;}.input:hover,.input:focus{background-color: white;border-color: #464646;}

第四步:下载下面的评论等级图标并上传至主题目录下的images文件内即可。
wordpress评论美化添加等级信息效果插图

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发