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=”http://www.freehao123.com/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头像，不管你发没发评论。效果见下图：

三、Wordpress评论美化-用户Cookie记录

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=”http://www.freehao123.com/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被删除，那么再次发表评论是还是需要输入用户信息的。

五、Wordpress评论美化技巧小结

1、上面Wordpress评论美化技巧的操作其实挺简单的，网上也有不少的教程，关键是学会将这些JS改装适用在自己的Wordpress。

2、另外需要注意的是上面我只讲到了JS，具体的CSS部分大家还是需要自己修改，调成最适合自己的Wordpress评论模板。

文章出自：免费资源部落 http://www.freehao123.com/ 版权所有。本站文章除注明出处外，皆为作者原创文章，可自由引用，但请注明来源。 禁止全文转载。