今天难得闲下空来,摸摸电脑,准备来优化下网站;浏览文章时不经意间看见知更鸟主题自带的评论等级图标有点平庸,于是想更改下评论等级图标;于是网上收集相关资料部署代码,虽说都有操作步骤讲解,奈何不适合Begin主题,functions.php文件添加了代码上传后,发现出现错误代码,经过1个多小时的折腾终于搞定,下面就分享下具体操作步骤.
效果演示方法/步骤一、注释/删除Begin主题目录下/inc/inc.php文件里的自带评论等级代码,这里我的使用的是Begin主题lts版本,把第1285行-1312行注释/删除代码,【快捷搜索:if (zm_get_option('vip')) {】; 二、注释/删除主题目录下/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}
复制代码
五、添加获取样式代码,复制以下代码添加到functions.php里;
- //获取访客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>';
复制代码
六、把以下图片保存到WordPress目录下的img文件夹里;
七、最后把以上文件分别上传到主题目录下对应的文件夹里即可 |