有朋自远方来,不亦乐乎。
纯代码实现评论等级
原创 龙砚庭  发布于 2年前 ( 2016-09-14 ) 阅读: 676 次 抢沙发 A+

最近我爱动感单车网的博主问我,怎么实现等级功能。老实说,类似的教程随便一搜就能一堆。但她说根据教程来还是不成功。

所以我想了下,干脆就写写了。原本打算本地搭建一个站点来试试问题出在哪里,哪成想欲思主题在phpstuy的本地站点居然出了错,想来是phpstuy的环境有点问题。所以也就不了了之。

以下教程,经过我整理,虽然没有在欲思主题测试过,但想来是通用的,不成功肯定是调用代码没写好的缘故。

打开自身主题的函数文件(比如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>';
}

自行将上面的数字改为自己所期望的值,它们代表着来访者的评论次数。

css样式(一般扔到style.css即可)

.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}

此处有一个关键的地方,就是:

vp{background:url(/img/vip.png)

这张图片放在哪里(注意图片实际所在的文件夹名),意味着代码的写法不一样,假设是放在主题根目录下的style.css,则不用改动;如果是写在根目录下css文件夹里面的任意css文件,则要这么写:

vp{background:url(../img/vip.png)

调用代码(最关键的一步)

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

将这段调用代码扔到需要显示的地方,需要注意的是:

if ($comment->user_id == '1') {

它代表用户的id,如果博客的管理员不止一个或删掉了最开始时候建站时的管理员账户,可能就需要自行修改里面的id了。

因为我们一般都是想要它在评论者昵称后面显示。所以常规上的位置,则是写在functions.php里面:

<?php comment_author_link() ?> 

的后面。

有些主题因为主题作者的习惯,不会把评论样式写在functions.php,可能会写在评论文件comments.php。所以就需要用户自己去摸索熟悉自身在用的主题。

这里我就举两个例子:

1.dux主题,需要到dux/modules/mo_comments_list.php;

2.欲思主题,需要到根目录下的functions.php文件

欲思主题的具体位置大概在:

	//信息
 echo '<div class="c-meta">';
 echo '<span class="c-author">'.get_comment_author_link().'</span>'; 

的后面。

需要用到的png素材

保存图片,扔到主题根目录的img文件夹(也就是主题放常规图片的文件,有些主题是images。)

配图

等级素材

教程到此结束。

五、反馈(20160917)

这个功能我在很多主题上都实际操刀过,妥妥的没问题。

下面以欲思主题为例,出现过几个问题:

1.目前欲思主题1.0版本(测试时间20160917),并不兼容php7.0;

2.按照以上的教程来,差不多就可以实现该功能。

a.第一步骤跟第三步骤的代码都是扔在functions.php;

b.第二步骤的代码扔到style.css;

c.修改一下第二步骤:

.vp{background:url(/img/vip.png)

为:

.vp{background:url(img/vip.png)

效果如下:

END…

Principle Team
龙砚庭官方QQ群,做真正意义上的社群!
7人已关注

该文章还没有任何评论,你来说两句吧.

发表评论

莫慌,小狮子正在努力加载评论...