网学网为广大网友收集整理了，WordPress评论美化技巧：gravatar头像实时预览和用户Cookie记录，希望对大家有所帮助！
下面就讲讲如何利用JS记住用户Cookie记录，使用户实现不需要输入用户名和邮箱等信息即可发表评论，另外当用户在输入自己的邮箱时，可以实时预览自己的gravatar头像，提高Wordpress评论体验。
一、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=”/uploadfile/201407/4/51125136232.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头像，不管你发没发评论。效果见下图：
三、Wordpress评论美化-用户Cookie记录
1、Wordpress评论美化-用户Cookie记录主要是为了方便评论者，也就是当用户第二次发表评论时，可以自动调用上一次填写的邮箱和用户名，实现免输入即可发表评论。
2、先根据浏览器的Cookie来判断是不是已经评论过的，如果是已经发表评论的，则显示欢迎XX回来的字样，代码如下：
<?php if(isset(WordPress评论美化技巧：gravatar头像实时预览和用户Cookie记录_网学 WordPress评论美化技巧：gravatar头像实时预览和用户Cookie记录
content上一篇资讯： CMSeasy 易通企业网站下载频道设置方法 下一篇资讯： ThinkPHP 3.0 功能特性和更新说明 相关资讯
网学推荐
免费论文
原创论文
文章排行榜
· 理解防火墙 屏蔽外界攻击 · 安装防火墙的十二个注意事项 · 企业中使用无线局域网如何进行安全 · 安装防火墙注意事项 · Cisco(思科)路由器上如何防止DDoS · 设定路由访存表防止黑客对防火墙发 · IP网络安全管理系统探讨 · 全面了解交换机漏洞 保护网络核心 · 层层设防保护VoIP安全 抵御隔墙之 · 简述常见黑客入侵方法以及工具防范 · 入侵检测(IDS)存在的问题及发展趋势 · 浅析防火墙与路由器的安全配置 · 实例讲解Oracle监听口令及监听器安 · 部署网络防火墙策略的十六条守则 · 部署网络防火墙策略 · 企业可轻松避免的十大安全地雷 · 计算机不能进安全模式的解决办法 · 无法格式化的U盘修复方法 COOKIE[''comment_author_email_''.COOKIEHASH]) && isset(版权所有 QQ:3710167 邮箱：3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号
WordPress评论美化技巧：gravatar头像实时预览和用户Cookie记录_网学 WordPress评论美化技巧：gravatar头像实时预览和用户Cookie记录
content上一篇资讯： CMSeasy 易通企业网站下载频道设置方法 下一篇资讯： ThinkPHP 3.0 功能特性和更新说明 相关资讯
网学推荐
免费论文
原创论文
文章排行榜
· 理解防火墙 屏蔽外界攻击 · 安装防火墙的十二个注意事项 · 企业中使用无线局域网如何进行安全 · 安装防火墙注意事项 · Cisco(思科)路由器上如何防止DDoS · 设定路由访存表防止黑客对防火墙发 · IP网络安全管理系统探讨 · 全面了解交换机漏洞 保护网络核心 · 层层设防保护VoIP安全 抵御隔墙之 · 简述常见黑客入侵方法以及工具防范 · 入侵检测(IDS)存在的问题及发展趋势 · 浅析防火墙与路由器的安全配置 · 实例讲解Oracle监听口令及监听器安 · 部署网络防火墙策略的十六条守则 · 部署网络防火墙策略 · 企业可轻松避免的十大安全地雷 · 计算机不能进安全模式的解决办法 · 无法格式化的U盘修复方法 COOKIE[''comment_author_''.COOKIEHASH])) : ?>版权所有 QQ:3710167 邮箱：3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号
<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=”/uploadfile/201407/4/51125136232.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被删除，那么再次发表评论是还是需要输入用户信息的。
五、Wordpress评论美化技巧小结
1、上面Wordpress评论美化技巧的操作其实挺简单的，网上也有不少的教程，关键是学会将这些JS改装适用在自己的Wordpress。
2、另外需要注意的是上面我只讲到了JS，具体的CSS部分大家还是需要自己修改，调成最适合自己的Wordpress评论模板。
Wordpress下载：
本文转自： http://www.freehao123.com/
