WordPress仿知更鸟评论等级样式

10,514次阅读次阅读
59条评论

前言

博主一直都对知更鸟主题“情有独钟”,但是身为学生党的我买不起那么昂贵的主题,所以我就自己DIY。

最近在访问知更鸟的站点时,无意中发现他的评论等级样式还挺好看的,用的是fontawesome字体,然后加上等级数字,然后再根据不同的等级显示不同的颜色,昨晚我就利用休息的时间,然后把本站的评论等级样式替换了,附上截图一张: WordPress仿知更鸟评论等级样式

添加函数文件

在主题的functions.php中添加如下代码:

/*
WordPress仿知更鸟评论等级样式
来源:https://licoy.cn/1647.html
*/
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< 20)
		echo '<div class="vip1" title="评论达人 LV.1"><i class="fa fa-vimeo-square"></i><span class="lv">1</span></div>';
	else if($author_count>=20 && $author_count< 40)
		echo '<div class="vip2" title="评论达人 LV.2"><i class="fa fa-vimeo-square"></i><span class="lv">2</span></div>';
	else if($author_count>=40 && $author_count< 60)
		echo '<div class="vip3" title="评论达人 LV.3"><i class="fa fa-vimeo-square"></i><span class="lv">3</span></div>';
	else if($author_count>=60 && $author_count< 80)
		echo '<div class="vip4" title="评论达人 LV.4"><i class="fa fa-vimeo-square"></i><span class="lv">4</span></div>';
	else if($author_count>=80&& $author_count<100)
		echo '<div class="vip5" title="评论达人 LV.5"><i class="fa fa-vimeo-square"></i><span class="lv">5</span></div>';
	else if($author_count>=100&& $author_count< 120)
		echo '<div class="vip6" title="评论达人 LV.6"><i class="fa fa-vimeo-square"></i><span class="lv">6</span></div>';
	else if($author_count>=120)
		echo '<div class="vip7" title="评论达人 LV.7"><i class="fa fa-vimeo-square"></i><span class="lv">7</span></div>';
}

然后找到如下代码:

<?php comment_author_link() ?>

在这段代码的后面加上:

if ($comment->user_id == '1') {
        echo '<div class="vip" title="博主认证"><i class="fa fa-vimeo-square"></i>博主</div>';
	}

另类解决方案

[v_tips]如果上面的方法不适合你的,你可以直接在主题的functions.php函数文件里面添加如下代码:[/v_tips]

function get_author_class($comment_author_email, $user_id){
	global $wpdb;
	 if ($comment->user_id == '1') {
        echo '<div class="vip" title="博主认证"><i class="fa fa-vimeo-square"></i>博主</div>';
	}
        else{
	$comment_author_email=$comment->comment_author_email;
	$user_id=comment->user_id;
	$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< 20)
		echo '<div class="vip1" title="评论达人 LV.1"><i class="fa fa-vimeo-square"></i><span class="lv">1</span></div>';
	else if($author_count>=20 && $author_count< 40)
		echo '<div class="vip2" title="评论达人 LV.2"><i class="fa fa-vimeo-square"></i><span class="lv">2</span></div>';
	else if($author_count>=40 && $author_count< 60)
		echo '<div class="vip3" title="评论达人 LV.3"><i class="fa fa-vimeo-square"></i><span class="lv">3</span></div>';
	else if($author_count>=60 && $author_count< 80)
		echo '<div class="vip4" title="评论达人 LV.4"><i class="fa fa-vimeo-square"></i><span class="lv">4</span></div>';
	else if($author_count>=80&& $author_count<100)
		echo '<div class="vip5" title="评论达人 LV.5"><i class="fa fa-vimeo-square"></i><span class="lv">5</span></div>';
	else if($author_count>=100&& $author_count< 120)
		echo '<div class="vip6" title="评论达人 LV.6"><i class="fa fa-vimeo-square"></i><span class="lv">6</span></div>';
	else if($author_count>=120)
		echo '<div class="vip7" title="评论达人 LV.7"><i class="fa fa-vimeo-square"></i><span class="lv">7</span></div>';
	}
}

添加CSS样式

然后在主题的style.css中添加如下代码:

.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7,.vip{font-weight:bold;display:inline-block;margin-right:5px;font-size:13px;opacity:.9}[class*=vip]:hover{opacity:.7}.vip1{color:#348be8}.vip2{color:#0896a1}.vip3{color:#fc15b2}.vip4{color:#7ba0b6}.vip5{color:#ff6e00}.vip6{color:#6ec400}.vip7{color:#e40000}.vip{color:#d76e00}/*颜色可以根据自己喜爱更改*/

后记

如果主题附带的有背景定位的等级样式,需要将原来的函数代码以及CSS样式注释或者删除(当然也可以在这个上面进行修改)之后再进行操作,否则页面将会和预想的会不一样的。若在途中遇见什么问题,可以在下方评论或者联系博主,我会在看见的第一时间给你解答。

21
憧憬Licoy
版权声明:本站原创文章,由憧憬Licoy2016-04-27发表,共计4519字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(59条评论)
Loading...
Yun 评论达人LV.1
2018-05-04 18:29:43 回复

可以

QQ98789 评论达人LV.1
2018-03-23 18:10:51 回复

:roll: 厉害了

我不是演员丶 评论达人LV.1
2018-02-10 17:28:31 回复

楼主,为啥我只有在提交评论的时候才会出现,一刷新页面就没有了,我用的ajax提交评论的,有关系吗,有解决方法吗,求教,谢谢!

怪咖小青年 评论达人LV.1
2018-01-17 11:24:17 回复

我很好奇你的签到还有这个评论等级这些怎么搞的