适当隐藏输入框，提高WordPress访客评论时的用户体验

具体效果可见本站的评论。当然，如果你以前没有留过言的话，要先留一个就可以看到效果了！访客留言之后资料输入框会被隐藏起来，如同登录了一般。 访客可以选择修改相关资料再进行评论。 从而给予访客很好的用户体验。

这个效果最开始是在mg12’s blog那看到的，后来mg12的主题都集成了这个小功能！后来在强大的K2主题中也看到了这样的效果，自我感觉非常不错，的确有利于用户体验。于是就想着手在自己的博客上实现这样的功能。最终在mg12’s blog上找到了教程。但自己搞了几遍都还是没有搞出来，现在想想可能自己对JS工作的机理还不是很懂。但在前几天研究了下jqury后，好像找到了点感觉了！于是今天再回过头去看的时候，很容易就明白了。

现在就跟大家分享一下我的方法，至于什么机理、思路什么的我就不讲了，在mg12的教程里都很详细了！

修改方面只需要修改一下comments.php文件就OK了！首先在代表访客信息输入框的代码上面插入如下代码：

  1. <?php if ( $comment_author != "" ) : ?>
  2. <script type="text/javascript">function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
  3. <div class="form_row small">
  4. <!-- 访客昵称 (随便欢迎一下) -->
  5.  
  6. <?php printf(__('Welcome back <strong>%s</strong>.'), $comment_author) ?>
  7. <!-- 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) -->
  8.  
  9. <span id="show_author_info"><a href="javascript:setStyleDisplay('author_info','');setStyleDisplay('show_author_info','none');setStyleDisplay('hide_author_info','');"><?php _e('Change &raquo;'); ?></a></span>
  10. <!-- 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) -->
  11. <span id="hide_author_info"><a href="javascript:setStyleDisplay('author_info','none');setStyleDisplay('show_author_info','');setStyleDisplay('hide_author_info','none');"><?php _e('Close &raquo;'); ?></a></span>
  12. </div>
  13. <?php endif; ?>

然后同样在代表访客信息输入框的代码下面插入如下代码：

  1. <?php if ( $comment_author != "" ) : ?>
  2. <!-- 隐藏取消按钮, 隐藏资料输入框 -->
  3. <script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
  4. <?php endif; ?>

说明的文字可以删掉，只是帮助大家理解！

上段代码中只涉及到一个大家需要注意的参数：author_info。这个参数就是整个你需要隐藏掉的用户信息输入框的ID，不过一般的主题中都不会有这个ID，没关系，你只须将它们用DIV包起来，然后给这个DIV的id=author_info就OK了！

当然各个模版可能代码会有所不同，不过原理是一样的。大家感兴趣的可以去试下，如有什么问题可以留言，大家一起讨论！

Posted in Wordpress Tagged , , , ,
Share with Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关文章本月热门点击排行

  • N/A
Post a comment 2008/10/31 – 23:076,240 Views
Post a comment | Trackback URL | RSS Comments 74 Comments
  1. 2008/12/02 at 10:59 | #51
    ddNotify

    用了你的代码我的没法隐藏，只是出现了一个欢迎的界面。滑动的效果怎么搞呀，发个链接给俺学学呗，另外代码加到“输入内容”的上下以后，你说有个函数得改，具体怎么改呀，最好大师能加我qq，先谢谢了

  2. 2009/01/14 at 10:32 | #52
    王老板Notify

    我来试试！

  3. 2009/01/15 at 19:56 | #53
    rooyuNotify

    test

  4. 2009/03/20 at 23:46 | #54
    vbvbNotify

    不错

  5. 2009/03/21 at 11:25 | #55
    vvNotify

    tttt

  6. 2009/03/21 at 14:11 | #56
    建设Notify

    学习了

  7. 2009/04/20 at 14:21 | #57
    SeanNotify

    very good!我实现了！

  8. 2009/05/02 at 16:28 | #58
    JutoyNotify

    已经弄好了，欢迎大家前往测试哈……
    有个小问题。我的鼠标挺在Change上时状态栏会显示JS地址什么的，而这边不会显示。。

  9. 2009/05/03 at 15:05 | #59
    老杨Notify

    这个真不错，一定要学习一下

  10. 2009/05/03 at 15:36 | #60
    老杨Notify

    已经用上了，很好。不过我没有用jquery那个，觉得载入太大了，影响速度

  11. 2009/05/03 at 19:51 | #61
    xiaorszNotify

    @老杨 嗯，用这个就蛮好的！！

  12. 2009/06/18 at 15:05 | #62
    dakularNotify

    很好的博客

  13. 2009/06/18 at 15:06 | #63
    dakularNotify

    UE不错！

  14. 2009/07/09 at 18:28 | #64
    mechilleNotify

    测试一下

  15. 2009/07/14 at 09:15 | #65
    freezedunNotify

    谢了,学到不少

  16. 2009/07/24 at 16:16 | #66
    handyfengNotify

    支持…………….

  17. 2009/08/24 at 16:21 | #67
    johnNotify

    不错，还支持连接等。我测试一下看能否链接到我的博客。

  18. 2009/08/27 at 21:45 | #68
    GraygiftNotify

    这不是逼的我去试试吗！

  19. 2009/09/05 at 00:54 | #69
    jeffzfnNotify

    试试看

  20. 2009/09/09 at 21:32 | #70
    EurekaNotify

    试试看……

  21. 2009/11/06 at 21:05 | #71
    网络生活Notify

    我还是不会，还请高手过来指点

  22. 2010/01/19 at 14:41 | #72
    阿七Notify

    试验一下

  23. 2010/01/25 at 23:25 | #73
    FirmNotify

    俺用了，但是一直还是不行，不知道为什么我的wordpress记不住用户

  24. 2010/02/02 at 19:44 | #74
    aq6100Notify

    不错不错啊

Comment pages 1 2
6 Trackbacks
  1. By 近期对Caxblog博客的修改 | Just A Blog on 2008/11/10 at 22:53

    [...] 这个并不是什么新鲜的功能了，感兴趣的朋友可以看看“适当隐藏输入框，提高WordPress访客评论时的用户体验”。在加入这个功能后，我反而对这个隐藏和显示评论输入框的代码感兴趣，这几句代码的切换的速度比用jQuery特效速度快。这个刚好是可以用在改进评论栏和显示相关文章上（评论和相关文章的收起请看“利用jQuery特效收起评论栏目”）。 [...]

  2. By 适当隐藏老用户输入框之 jQuery 实现方法 | Xiaorsz's Blog on 2008/11/11 at 16:51

    [...] 上一次跟大家分享了怎么让老用户留言时的输入框隐藏，提高WordPress访客评论时的用户体验。其实实现这样的效果有很多的方法，这只是其中的一种，就是用最基本的JS来实现的，而且需要在comment.php中插入JS代码，当然你也可以把代码独立出来。 [...]

  3. By 提高 WordPress 访客评论时的用户体验 | JohnZon 世界 on 2008/11/11 at 19:42

    [...] 实现这种效果很简单，只需在comments.php里面添加几行代码就行了。具体的实现方法请到笑傲人生这里看，我就不多说了。 [...]

  4. By 也说用jQuery改进WP评论表单 at Becomin' Charles on 2008/11/14 at 22:59

    [...] 第一次看到这个功能是在stephen的博客，然后从他的博客，我链接到了xiaorsz写的文章，然后看到了mg12的文章，再然后是xiaorsz使用jQuery的改进版本。 [...]

  5. By jQuery 优化评论方法总结 on 2009/01/02 at 16:24

    [...] MG12，后来 Xiaorsz 同学复写了一遍。我建议他改用 jQuery 实现，然后自己写了隐藏 Wordpress [...]

  6. By wordpress主题设计与访客体验（上） | 微物之神 on 2009/04/12 at 00:22

    [...] 文章内页（single.php）的导航稍有不同，在单片文章的顶部和底部添加“上一篇文章名”和“下一篇文章名”的导航。 侧边栏。今天无意间温习了一下前几天长河教给我的知识，实现了侧边栏的双行显示，这样的显示缩短了侧边栏友情链接显示的长度，节省了侧边栏的面积，扩大了访客获取信息的可能性。在wordpress内置的函数中可以这样实现友情链接的输出“”。 写到这里我顺便赘言几句我对博客友情链接的看法，现在写博客的人很多，很多人因为友情链接过多而不得不写个声明出来，或者做了友情链接还必须约法三章之类，我觉得没必要搞得那么麻烦。为什么？既然你做了链接，这种链接肯定具有交流上的意义，不管是叫链接还是友情链接或者其他什么的。长河现在用了一个可以随机显示blogroll的插件叫“Hot Friends”，这个插件的原理是根据访客的评论数量自动加入blogroll，从而获得首页展示。想法很好，但是我想我侧边栏的友情链接还不至于长到长过文章内容的地步，所以我现在对blogroll的态度是所有的链接都在首页显示，我的原则是简单之上，很多看起来很cool的功能，实现之后你会觉得很别扭的。能让用户一眼就看明白的事实是最好不过的。 留言本及留言本的访客体验 这部分没什么好写的，wordpress本身没有留言本，给wordpress添加留言本的方法也有很多，大致分两种方法实现，一种是插件实现，这个不多叙述了，搜索引擎上可以搜到很多留言本相关插件，插件是好的，但是用得多了也会影响博客的速度和使用的，所以这种方法不推荐。另一种方法是在主题中做一个留言本的模板，然后新建页面（page）选择留言本的模板。具体可以参考一下这篇文章：《简单5步，制作wordpress留言板》 我在自己的博客的留言本的体验上做了以下两方面的修改，第一是利用jqury适当地隐藏输入框，提高WordPress访客评论时的用户体验，具体可以浏览下面这两篇文章：《提高wordpress访客评论时的用户体验》和《适当隐藏输入框，提高WordPress访客评论时的用户体验》。第二个是我把留言本的样式做了个调整，将留言框的主题部分放在了最上面。这个和上面的第一个配合起来使用，把次要的信息放在下面会更好一点。 [...]

Post a Comment

（必填）

（必填，有回复时方便邮件通知）

（可不填，填了方便回访）

Sharing technology, recording life