WordPress评论美化技巧-gravatar头像实时预览和用户Cookie记录
WordPress作为一个博客社区,读者的评论应该说是对博客的生存和博主继续写博是十分重要的。没有评论的Wordpress,似乎有点“孤芳自赏”的寂寞。
一篇文章的好坏决定了评论的数量,但是如果你的Wordpress的评论框看起来非常地糟糕,给人一种不舒服的感觉,文章即使再精彩,也会赶走那些想要留言者。
免费资源部落曾经为大家介绍了非常多的Wordpress评论美化技巧,如果你正在抱怨自己的Wordpress评论“寥寥无几”,那么不妨一试:
-
1、WordPress连接微博:个人博客开放化策略微博QQ百度账号登录(用户直接用自己的QQ或者微博账号即可登录评论Wordpress)
-
2、WordPress鼓励评论技巧:高亮作者Admin和添加评论者认证(让读者知道他们的评论受到了重视,是一个鼓励评论的好方式)
-
3、WordPress整合问答程序Question2Answer:安装使用测评(看了文章免不了疑问,用问答程序建立一个类似百度知道的体系)
一直以来Freehao123.com的评论用户体验虽然在不断改进,但是依然存在不少的问题。比如经常有人向我抱怨说,每次留言需要必须输入用户名和邮箱,十分麻烦。
这次免费Wordpress教程我们就来讲讲如何利用JS记住用户Cookie记录,使用用户实现不需要输入用户名和邮箱等信息即可发表评论,另外当用户在输入自己的邮箱时,可以实时预览自己的gravatar头像,提高Wordpress评论体验。
WordPress评论美化技巧-gravatar头像实时预览和用户Cookie记录
一、gravatar头像实时预览和用户Cookie记录准备条件
1、你只需要在你的Wordpress中引用一段JS即可(此JS来源网络),这里是gravatar头像实时预览JS下载地址。
2、还有一个用户Cookie记录是用到的JS文件,这里是用户Cookie记录JS下载地址。
二、Wordpress评论美化—gravatar头像实时预览
1、要实现当留言者在输入自己的邮箱时即可预览到自己的gravatar头像,前提是你的Wordpress评论框中要有一个显示gravatar头像的地方。
2、如果你的Wordpress评论部分没有gravatar头像显示,请将下列代码放到合理的位置。
- <div id="set-avatar"><a target="_blank" href="/gravatar/">
- <div id="real-avatar">
- <?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH])) : ?>
- <?php echo get_avatar($comment_author_email, 80,$default = get_bloginfo('template_directory') .'/images/set-avatar.png');?>
- <?php else;?>
- <?php global $user_email;?><?php echo get_avatar($user_email, 80,$default = get_bloginfo('template_directory') .'/images/set-avatar.png'); ?>
- <?php endif;?>
- </div></a></div>
3、上面代码的意思是如果是已经留过言的朋友,会自动显示填写的邮箱的gravatar头像,假如邮箱没有对应的gravatar头像,会显示默认头像set-avatar.png。没有留过言的人直接显示默认头像set-avatar.png。
4、在你的Wordpress模板中引用刚才下载的一段JS文件,具体的引用方式可以自己决定。直接复制下列代码即可。注意更改路径。
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/realgravatar.js"></script>
5、这个时候就已经成功实现了当留言者发表评论时,如果是第一次,则直接显示默认头像,在输入评论邮箱后,会即刻显示gravatar头像,不管你发没发评论。效果见下图:
1、Wordpress评论美化-用户Cookie记录主要是为了方便评论者,也就是当用户第二次发表评论时,可以自动调用上一次填写的邮箱和用户名,实现免输入即可发表评论。
2、先根据浏览器的Cookie来判断是不是已经评论过的,如果是已经发表评论的,则显示欢迎XX回来的字样,代码如下:
- <?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) : ?>
<div id="commentwelcome">
<?php printf(__(' <strong>%1s</strong>, 欢迎回来!'), $comment_author); ?>
</div>
<?php endif; ?>
3、效果如下图:
4、接下来要解决的问题就是,当用户觉得需要更换信息时,可以让他们自由编辑Cookie信息,另外如果是公用电脑,可能不同的人需要使用不同的Cookie来发表评论。
5、所以接下来,我们要为Wordpress评论添加一个编辑信息的功能,让用户可以自由更换Cookie信息,也就是用户名和邮箱。
6、请在Wordpress的评论模板中添加下列代码,意思是判断是否已经存在Cookie,如果存在,则显示编辑信息链接,如下:
- <?php if ( $comment_author != "" ) : ?>
<div id="welcome">
<div id="welcome1">
<?php printf(__('不是 <strong>%s</strong> ? '), $comment_author) ?>
</div>
</div>
<?php endif; ?>
7、现在请在你的Wordpress中引用上面下载的用户Cookie记录JS,直接复制下列代码即可,注意更改路径。
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lovecookie.js"></script>
8、由于JS中定义的DIV的author_info,所以你需要用<div id="author_info"></div>来包括你的评论代码,类似于这样的:
- <div id="set-avatar"><a target="_blank" href="/gravatar/">
<div id="real-avatar">
<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH])) : ?>
<?php echo get_avatar($comment_author_email, 80,$default = get_bloginfo('template_directory') .'/images/set-avatar.png');?>
<?php else;?>
<?php global $user_email;?><?php echo get_avatar($user_email, 80,$default = get_bloginfo('template_directory') .'/images/set-avatar.png'); ?>
<?php endif;?>
</div></a></div>
9、然后把<div id="author_info"></div>所有内容放在第2步的<?php endif; ?>中,这样当点击编辑信息时,就会显示信息输入框,用户可以自己再次输入信息即可。如下图:
10、点击编辑后,就会显示信息输入框,如下图(图片缩略图,点击还原放大):
四、gravatar头像实时预览和用户Cookie记录效果测试
1、大家可以直接在本文下方的评论留言即可体验到gravatar头像实时预览和Cookie记录效果,输入邮箱后会看到头像,发表过评论后第二次评论时信息实现“免输入”。
2、gravatar头像实时显示可能会在网速不好的情况下不起作用,另外如果浏览器的Cookie被删除,那么再次发表评论是还是需要输入用户信息的。
1、上面Wordpress评论美化技巧的操作其实挺简单的,网上也有不少的教程,关键是学会将这些JS改装适用在自己的Wordpress。
2、另外需要注意的是上面我只讲到了JS,具体的CSS部分大家还是需要自己修改,调成最适合自己的Wordpress评论模板。
文章出自:免费资源部落 / 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。 禁止全文转载。
您或许对下面这些文章有兴趣: 本月吐槽辛苦排行榜
-
博主的头像也很给力。不懂JS,先收藏学习了。
[回复] -
这个功能好,看到别的WP都没有这样的。回去我也好好研究看。
[回复] -
有这个功能总比较没有这个功能要强一些。
[回复] -
我的Wordpress已经基本上成型了。不想折腾了。不过还是学习了一下。
[回复] -
gravatar头像多了也会影响网页打开速度的。
[回复] -
效果不错,我刚刚试了一下,感觉非常好。
[回复] -
没有想到,还有这样的功能。Wordpress果然是要折腾的。
[回复] -
终于显示出来了
[回复] -
学习 顺便 测试一下
[回复] -
不错, 有趣. 学习了!
不过博主的空间 移动宽带 打开速度的不快.[回复] -
回去测试一下,以后多来学习学习wordpress。新手啊
[回复] -
一直关注博主,向博主学习
[回复] -
尝试一下.
[回复] -
“三、Wordpress评论美化-用户Cookie记录 ”第二条的代码应该放在哪儿啊?我放在comments.php输入框上面不可以啊?请教怎么修改。wordpress版本3.4
[回复] -
这个功能不错啊,得回去研究一下
[回复] -
哈哈哈 我来咯
[回复] -
不错,很有帮助啊
[回复] -
我开启了头像缓存功能,为了避免没有头像的缓存图片串图后台开启了没有头像显示空白头像,然后我把程序文件的空白头像换成自定义默认头像了。这样以来没头像的显示的全是自定义头像了,但是预览头像时没有头像的显示的还是官方的G标志,怎么改成有头像的预览自己的头像,没申请头像的预览程序空白头像?
[回复]qi 回复:
@韩麦斯, 你是不是在Wordpress后台的评论那里设置为显示默认的Gravat头像?
[回复]韩麦斯 回复:
@qi, 没有默认选项啊。。。。第一个神秘人,第二个空白,第三G标准。。。。。。最后一个自定义
[回复]qi 回复:
@韩麦斯, 你是不是说评论生成后显示的不是默认的图片?貌似是代码的问题,我的也是,但是侧边栏的就显示我自定义的图片。
[回复]韩麦斯 回复:
@qi, 没头像的新游客刚打开文章的话,看评论栏表情是自定义的,输入邮箱后预览的就变了。评论完成后显示的是自定义的头像。我就是不满足预览的时候显示的不是自定义的默认。看来也只好这样了~不能100%完美啊,预览的时候估计是没生成缓存呢,即便生成了缓存为自定义的那还得刷新才能看到,可是预览头像并不能即时刷新,估计是这样?
[回复] -
楼主好,还是关于wordpress备份的问题,数据库里面的是blog里面文章 评论的数据,然后 空间里面的wordpress安装文件,就是wordpress一些设置数据。然后备份就是需要备份这两样是吧?
还有,不如这个网站弄个专门的提问区吧,不然我每次都要找个文章 ,然后到最后来评论了,而且评论跟文章也没关。。。。
[回复] -
也想做了这样的评论框样式,赞!
[回复] -
本来用的多说 后来又改回这种自带的了 不过那个鼠标放到超链接后移效果是怎么弄得
[回复] -
gsdfgsdgsdg+我、汗
[回复] -
用户Cookie记录JS下载地址 这个下载页面,DBANK给的链接是115的,BOX的访问不了(估计被*了)。
@qi 修改下DBANK的链接[回复] -
修改了评论.php 以后 文章直接打不开了,分析错误:语法错误,意外的”;“,要求“:
[回复] -
先把realgravatar.js和lovecookie.js复制到主题目录的js里面 ,,
然后把以上代码全部复制到single.php 然后 用htp上传以后 文章就打不开了。[回复] -
博主的文章一直不错.作为一个免费的资源部落.博主已经很用心了…支持支持..还有很多说无聊神马的.不用理他们..呵呵
[回复] -
额…博主这个评论框很强大..但是为什么评论发布的响应时间这么长呢..难道是我网速太慢了..
[回复] -
不知道博主有没有什么好点的评论样式美化插件推荐吗。
[回复] -
用WordPress必备啊,看看我的www.veryarm.com,一直在优化
[回复] -
果然不错啊
[回复]