WordPress评论美化技巧:gravatar头像实时预览和用户Cookie记录

  • 时间:
  • 浏览:0
作者:匿名 hihi 来源:免费资源部落 浏览: 2012-1-13 15:06:42 字号:大 中 小

[摘要]本文讲讲Wordpress如保利用JS记住用户Cookie记录,使用户实现不时需输入用户名和邮箱等信息即可发表评论,另外当用户在输入本人的邮箱时,可不后能 实时预览本人的gravatar头像,提高Wordpress评论体验。

  下面就讲讲如保利用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=”http://www.freehao123.com/gravatar/”> 

<div id=”real-avatar”>

<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH])) : ?>

<?php echo get_avatar($comment_author_email, 1000,$default = get_bloginfo(‘template_directory’) .’/images/set-avatar.png’);?>

<?php else;?>

<?php global $user_email;?><?php echo get_avatar($user_email, 1000,$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, 1000,$default = get_bloginfo(‘template_directory’) .’/images/set-avatar.png’);?>

<?php else;?>

<?php global $user_email;?><?php echo get_avatar($user_email, 1000,$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/

sssss
Tags: WordPress   WordPress评论   WordPress下载   gravatar头像实时预览  
责任编辑:cc120