WordPress仿知更鸟评论等级样式

10,958次阅读
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 '
1
'; else if($author_count>=20 && $author_count<40) echo '
2
'; else if($author_count>=40 && $author_count<60) echo '
3
'; else if($author_count>=60 && $author_count<80) echo '
4
'; else if($author_count>=80&& $author_count<100) echo '
5
'; else if($author_count>=100&& $author_count<120) echo '
6
'; else if($author_count>=120) echo '
7
'; }

然后找到如下代码:

在这段代码的后面加上:

if ($comment->user_id == '1') {echo '
博主
'; }

另类解决方案

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

function get_author_class($comment_author_email, $user_id){
	global $wpdb;
	 if ($comment->user_id == '1') {echo '
博主
'; } 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 '
1
'; else if($author_count>=20 && $author_count<40) echo '
2
'; else if($author_count>=40 && $author_count<60) echo '
3
'; else if($author_count>=60 && $author_count<80) echo '
4
'; else if($author_count>=80&& $author_count<100) echo '
5
'; else if($author_count>=100&& $author_count<120) echo '
6
'; else if($author_count>=120) echo '
7
'; } }

添加 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发表,共计2012字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(59条评论)
验证码
载入中...
Yun 评论达人 LV.1
2018-05-04 18:29:43 回复

可以

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

:roll: 厉害了

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

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

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

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

AndroidAndroidChromeChrome40.0.2214.89