home / web建站

增强wordpress来访者的评论体验

这个方法在万戈的《记录并隐藏 Wordpress 评论者信息》和木木的《利用jQuery提高访客评论的用户体验》两篇文章里都有详尽的使用说明,我这里只是解决了一个bug,更新一下。

原理
使用jQuery,在来访者留言之后,通过判断浏览器里访客 Cookies,让访客第二次回访时,隐藏来访者昵称、邮箱、网址输入框,并显示来访者头像+欢迎##归来!字样,如同管理员登陆时的状态一样, 访客还可以选择修改相关资料再进行评论. 给予访客很好的用户体验。

方法:
首先,编辑comments.php,在

<input id="author" name="author" size="22" type="text" value="&lt;?php echo $comment_author; ?&gt;" tabindex="1" />

评论者姓名输入框代码上方添加:

然后再把三个评论者姓名、电邮、网址的代码输入框用<div id=”author_info”></div>

包起来,到此,comments.php 修改结束;
然后,新建一个名为 infohide 的 js 文件,把以下代码放进去:

$(document).ready(function() { //开始
if($('input#author[value]').length&gt;0){ //判断用户框是否有值
$("#author_info").css('display','none'); //将id为author_info的对象的display属性设为none,即隐藏
var change='<span id="show_author_info" style="cursor: pointer; color: #2970a6;">change »</span>'; //定义change,style是定义CSS样式,让他有超链接的效果,color要根据你自己的来改,当然你也可以在CSS中定义#show_author_info来实现,这样是为了不用再去修改style.css而已!
var close='<span id="hide_author_info" style="cursor: pointer; color: #2970a6;">close »</span>'; //定义close
$('#welcome').append(change); //在ID为welcome的对象里添加刚刚定义的change
$('#welcome').append(close); // 添加close
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').click(function() { //鼠标点击change时发生的事件
$('#author_info').slideDown('slow'); //用户输入框向下滑出
$('#show_author_info').css('display','none'); //隐藏change
$('#hide_author_info').css('display','inline'); //显示close
$('#hide_author_info').click(function() { // 鼠标点击close时发生的事件
$('#author_info').slideUp('slow'); //用户输入框向上滑
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').css('display','inline'); })})}}) //显示change

保存文件至主题目录下。

最后,在head.php 中加载 JQuery 和以上 infohide.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="&lt;?php bloginfo('template_url'); ?" type="text/javascript"><!--mce:1--></script>

至此,用 JQuery 隐藏回访者资料输入框的功能就实现了!

bug解决:

但我加上这个功能后发现在firefox浏览器里有bug:正常的情况,没有来访者的Cookies时,资料输入框应该是显示的;而在firefox里资料输入框却隐藏了,来访者想评论,却输入不了个人信息,评论也就提交不了!

而且这个bug在有的主题下不会出现,我现在的主题就有问题。
经过几番折腾,发现infohide.js里面判断输入框里是否有值

if($('input#author[value]').length&gt;0){

有问题,应该是代码不规范所致,修改代码如下:

if($('#author').val()!=""){

经测试完美解决不支持firefox浏览器的问题,如果你的主题也是出现firefox的bug,那么可以替换这段代码解决,嘿嘿…
收工!!!

22 条评论

  1. 万戈 说:

    留个言,记录一下试试

  2. 奶牛 说:

    欢迎奶牛归来,这个挺不错的,嘿嘿 ;-)

  3. 奶牛 说:

    [ 小牆判斷這是Spam! ]
    呃,奶牛被当Spam了~~~

  4. 迎接 说:

    很强大

  5. 迎接 说:

    被判断为垃圾评论了?比较无奈.第一次看到这个功能的方法

    • cooved 说:

      致歉!小墙代码插错行了,导致见评论就墙,真后悔没测试啊,杯具!现在已经可以评论了,欢迎常来坐坐,嘿嘿

  6. 奶牛 说:

    奶牛前几天在网上闲逛的时候发现了一个博客的留言的地方设置的挺贴心的,就是在“你的网站”后面又添加了一个“设置头像”的链接到了gravatar的设置头像的页面,感觉这样子也可以给用户很好的体验 ,嘿嘿;-)

  7. 海天 说:

    呵呵 我的已经加过了~

  8. 老曦 说:

    哦,我还以为是我的cach插件导致出错,原来是代码不规则的原因啊,我晕~~~~非常感谢~~~

  9. 雅岚 说:

    :?: 妖女岚再来痛苦地看下。。。

  10. 我来试试 说:

    我来试试

  11. 奚少 说:

    从老万那里顺藤摸瓜就过来了,呵呵。真的找到解决问题的办法了,赞一个!

  12. kuaner 说:

    想看看什么效果

  13. Demon 说:

    马克一下。明天来折腾一下。

  14. 哈哈,,这个就是你现在的效果。。。会有保存登入状态

  15. Howdy! Would you mind if I share your blog with my zynga group? There’s a lot of folks that I think would really appreciate your content. Please let me know. Many thanks

  16. It is no doubt that the Canda Goose Trillium Parka jackets have led the fashion trend this winter. In such style manufactured Canada Goose Parka jackets are featured with long length which can deliver ladies in womanly outlook. And it would be very distinguished and dashing for wearing the Canda Goose Trillium Parka as apparels for some parties. What’s more, from the Canada Goose Online shop there are a lot of different colors for your choices. You will realize the Canada Goose Parka jackets needed in cold days. Like many other stylists, they also add the Woolrich Arctic Parka jackets to the closest which are now with free shipping in the Woolrich Outlet store. Manufactured with chic style and qualified materials made Woolrich Jassen can deliver customers on them eye catching. And you will be completely warm and wind resistant on the Woolrich Parka jackets this winter.

  17. lvbags 说:

    The new century 13.23 + 0.433.36 %, lv bags, lv bags outlet, louis vuitton online store, louis vuitton purses and lv purses family. Obviously, to the family name of luxury lv wallets than its name itself more influential. Just as the financial times in a Louis Vuitton wallets said, when the modern industry is constantly by the financial Louis Vuitton Sunglasses with to the traditional mode of lv sunglasses operation and the impact of the conflict, the family to breed become louis vuitton belts history heritage and lv belts of the best link between the louis vuitton shirts Bridges. With brand founder getting old, luxury family enterprises are facing new and old alternate stage. Whether children or nephew’s niece, luxury family enterprise of a new generation of palm is sprung up, lv shirts and the more and more involved in the family business center. No matter whether a new generation could eventually replace founder or elders position, they will undoubtedly the family business in the next few years development plays an important role.
    Whether fashion louis vuitton monogram bags designer or jewelry designer, louis vuitton purses artists have turned to the most louis vuitton monogram wen wan female temperament representative fabric. louis vuitton canvas bags, Ralph Lauren, replica louis vuitton bags, and many other big will bud silk as 2011 louis vuitton bags outlet main material. Whether classic replica louis vuitton hanbags or modern deductive, of bud silk louis vuitton luggages surge. Transparent and louis vuitton monogram canvas bags, be like dew not dew, soliciting idea of louis vuitton damier canvas bags silk characteristics for louis vuitton monogram multicolore bags designers also provides full creative louis vuittton epi leather bags. From independent stylist brand Louis Vuitton Denim bags series is one another louis vuitton summer bags elegant representative.
    louis vuitton online store
    Louis Vuitton Monogram Canvas Boetie GM
    Louis Vuitton Monogram Canvas Artsy MM
    Candy colors ysl shoes and not everyone likes, louboutin shoes, tonal makeup look is not for everyone, but made up of the latest poster (eve Christian Louboutin Big Lips 120mm Booties Black YSL (Christian Louboutin Black Leather Ankle Shoes) 2012 Christian Louboutin Booties Loubout 150 Flannel Black colour makeup “Candy Face” series colour after, sure it is will let all people all have a love of Christian Louboutin Boots Velvet Black! Bright blue, Christian Louboutin Bottomed Rivet Lace Ankle Shoes, light green, is like candy jar full of Christian Louboutin Guerriere 120mm Suede Booty Black in childhood, whether love to eat not love to eat, Christian Louboutin Jasmine Mid-Calf Motorcycle Boots Black are really want to really want to have. Eve yves st Laurent YSL (Christian Louboutin Step n Roll 140mm Boots) 2012 chun xia colour makeup bring us is the kind of sweet and eager feeling. Eve Christian Louboutin Sheepskin Black Ankle Shoes (Yve Saint Laurent) 2012 Christian Louboutin Vicky Botta 120mm Boots Red colour makeup design spirit is indeed from the Candy box, and named “Christian Louboutin Prorata 90mm Pumps“. Series contains eye shadow dish, liquid cheek is red, nail polish, single product. Advocate hit by two of four color eye shadow eye shadow and two Christian Louboutin Duvette 120mm Pumps Nude pearl silk of eye shadow. And a bright eye Christian Louboutin Helmour 100mm Glitter Multicolor Pump, each color very bright beautiful and lovely, if at the same time it will be quite use Christian Louboutin Samira Strass 100mm Evening Blue have thespian feeling makeup effect!

  18. Woolrich 说:

    Pulizia della esperienza della Woolrich,Compra vestiti giù i consumatori sapere che mantiene luogo che l’abbigliamento in basso ha molte deve prestare attenzione, probabilmente è stata acquistata la qualità Woolrich particolarmente buona, ma a causa di un errore pulito, l’ha distrutta.Poi la comprensione a tutti cinghia pulisce giù esperienza di abbigliamento:Dopo il Woolrich Doudoune giù lava gli indumenti, non si può strizzare, deve spremere il contenuto di umidità, di nuovo il negozio o addirittura si blocca fino asciuga l’aria, vieta l’insolazione,
    woolrich
    inoltre, non brucia in ferro, in modo da evitare scottature l’abbigliamento. Dopo l’asciugatura all’aria, può frusta delicatamente, rende l’abbigliamento verso il basso per ripristinare vagamente azienda. Giù abbigliamento essendo adatto sia ventilazione, sotto la secca aria secca dell’ambiente, evita la luce del sole intensa esposizione al sole dritto, i raggi ultravioletti possono danneggiare lo strato superficiale di nylon. Dopo l’asciugatura all’aria, continua a oscillare verso il basso e l’abbigliamento a frustare la piuma per assemblare delicatamente posto, si distende completamente la piuma, dopo aver ripristinato lo stato originale, carica il nuovo armadio.
    :cry:

  19. Hogan 说:

    hogan
    Con l’accettazione della Ballerina, attivamente attivamente giocare Ballerina arrivare per ottenere l’hobby del hogan sito ufficiale
    collegio studenti universitari per creare particolari che si trovano in una posizione di relax sulla loro scuola hogan scarpe
    confidenziali perseguire.Da Hogan Lady ballerine, ogni scarpa utilizzare distintivo progressi sera moderna scarpe hogan
    all’interno e le loro scarpe nel suo complesso tutta la grande offerta supplementare flessibile, per creare hogan outlet
    particolari che gli adolescenti non possono lesioni da competenze effettivo esercizio complicato. riguardante hogan interactive
    l’intento di clienti accattivante, i progettisti Hogan cervello nel suo complesso grande offerta totale aggiuntivi in outlet hogan
    adattamenti di scarpe per creare particolare che appare come stile e moda, che si concentrano coscienza, hogan 2011
    nonostante circa il fatto che in strada.
    sito ufficiale hogan