提高 WordPress 访客评论时的用户体验

WordPress 上提高访客评论时的用户体验

难度: ★☆

简介:
前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验.
今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧.

需求:
细心的朋友可能已经注意到了: 当在某个 WordPress 发表评论后再次访问该 Blog, 资料就不需要再次填写, 因为它们都已经在资料输入框里面. 但没评论过的或者清除了 Cookie 之后, 资料输入框将空空如也.
1. 当访客的资料已经存在的情况下, 访客很少关注资料本身, 那些资料输入框就会变成 "碍眼的东西", 我们要想办法将它们隐藏起来. 同时, 我们需要将这位访客的名字显示出来, 否则他/她根本不知道自己的身份.
2. 访客有可能邮箱更换了, 或者就想换个酷点的名字, 此时的他/她肯定想更改一下那些资料. 所以要求有一些措施, 让访客可以重新看到资料输入框.
3. 对于那些从未提供资料的访客, 资料输入框必须让他们看到.

分析:
由需求可以看到, 我们要处理的是两种状态的访客: 有资料的, 无资料的.
对于有资料的, 具有显示资料输入框 (显示昵称) 和 隐藏资料输入框 (显示昵称) 两种状态.
而无资料的访客只有显示资料输入框 (没有昵称) 一种状态.
好, 我们就为有资料的访客配备两个按钮 (更改和取消), 一个用来显示资料输入框, 一个用来隐藏它.

思路:
1. 页面怎么写? 编码前, 我们还应该理一下头绪. 用伪代码吧.

1
2
3
4
5
6
7
8
9
10
if (有资料的访客) {
    放置访客昵称
    放置更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框)
    放置取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框)
}
放置资料输入框
if (有资料的访客) {
    隐藏取消按钮
    隐藏资料输入框
}

2. 怎么获知访客是否评论过? 前面已经谈到, 已评论访客的资料会在显示出来, 也就是说, 代码中已经实现了获取资料的方法. 那我们找找吧...

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

就是它! $comment_author 是访客的昵称, 当它为空的时候就说明访客资料为空.
3. 有些控件又显示又隐藏的, 怎么弄呢? 我们不需要为此转跳页面, 用 JavaScript 吧. 我们可以写一个方法, 用来设定某些控件的显示与否, 只是一个很简单的方法:

1
2
3
4
5
6
7
8
/**
 * 设定控件的显示风格
 * @param id        控件的 ID
 * @param status    控件的显示状态 (显示时为 '', 隐藏时为 'none')
 */
function setStyleDisplay(id, status) {
	document.getElementById(id).style.display = status;
}

编码:
接着干嘛? 大概可以写代码了. 看我的...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- 有资料的访客 -->
<?php if ( $comment_author != "" ) : ?>
	<!--
		转换显示状态用的 JavaScript
		Q1: 为什么这段代码放在这里呢?
		A1: 因为只有当访客有资料时, 它才被用上, 这样可以减少无资料访客下载页面时的开销.
		Q2: 为什么不用外部文件将 JavaScript 放起来? 也许那样维护起来更方便.
		A2: 因为它只在这个地方用到了. 而且加载文件的数量也会影响页面下载速度, 为了这么点字节的代码, 不值得新开一个文件.
	-->
	<script type="text/javascript">function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
	<div class="form_row small">
		<!-- 访客昵称 (随便欢迎一下) -->
		<?php printf(__('Welcome back <strong>%s</strong>.'), $comment_author) ?>
 
		<!-- 更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框) -->
		<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>
 
		<!-- 取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框) -->
		<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>
	</div>
<?php endif; ?>
 
<!-- 资料输入框 -->
<div id="author_info">
	<div class="form_row">
		<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" />
		<label for="author" class="small"><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></label>
	</div>
	<div class="form_row">
		<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" />
		<label for="email" class="small"><?php _e('E-Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?></label>
	</div>
	<div class="form_row">
		<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" />
		<label for="url" class="small"><?php _e('Website'); ?></label>
	</div>
 
</div>
 
<!-- 有资料的访客 -->
<?php if ( $comment_author != "" ) : ?>
	<!-- 隐藏取消按钮, 隐藏资料输入框 -->
	<script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
<?php endif; ?>

后记:
其实这个方法有个小缺陷: 这是因为靠 JavaScript 将一些控件隐藏起来而引起. 也就是说, 控件必须在那段简短的 JavaScript 加载完成之后才能被隐藏起来, 而控件的定义却是在那段 JavaScript 之前. 如果你的文章够短, 眼睛够快, 或许你会看到资料输入框转眼即逝的一幕.
是不是很简单? 你现在应该已经知道怎么处理了, 只需要修改一下 comments.php 这个文件.
想看看效果? 在此评论一次, 你就可以看到效果了...

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 提高 WordPress 访客评论时的用户体验
  1. xiaorsz | #51
    Oct 31st, 2008 at 20:56

    终于搞出来了,其实挺简单的,觉得!!
    不过ID确实蛮重要的!
    大家可以去试下哈!

  2. Yacca | #52
    Nov 2nd, 2008 at 23:37

    @mg12 anyway...我用上了这段改善用户体验的js 嘿嘿...

  3. freeher | #53
    Nov 3rd, 2008 at 02:27

    @mg12
    你什么时候能把WP-RecentComments的CSS重写一下啊。 不单是默认主题,还有其它主题也出现错位。我自己改过,总是不到位。哭。我用MAXTHON2

    另外,你的代码栏能否美化一下? 最少滚动条能看起来不那么丑。
    要是能做成light-box那样一点就全屏最好。因为横的滚起来看的不爽。

    毕竟还是有很多穷人没钱用宽屏。

    这是就我的用户体验。。。。

  4. mg12 | #54
    Nov 3rd, 2008 at 10:01

    @freeher
    就算我重写 CSS 也是没用的, 每个主题都不一样, 除非你不要显示头像.
    我的代码框没有横滚, 如果你说的是 IE 显示的垂直滚动条, 那我没办法.
    1024x768 或以上显示就不会有页面横滚, 800x600 也可以专注于内容, 640x480 目前统计中还没发现这样的用户.

  5. freeher | #55
    Nov 4th, 2008 at 13:23

    @mg12

    垂直的正常的。

    我是说 1024x768 存在水平滚动条

    我用的是 IE7 MAXTHON2 XPSP3 EN

    http://www.neoease.com/wordpress-at-reply/#more-781

    比如上面这页
    chrome下亦是如此,FF太丑,没试过。 
    再重申,是水平滚动条,不是垂直的。 

  6. JAY | #56
    Nov 4th, 2008 at 17:59

    @freeher
    IE7, FF3, Safari, Chrome在1024*768测试均表现一致,没有出现横向滚动条。

  7. freeher | #57
    Nov 4th, 2008 at 19:13

    @JAY
    Meiyou Tianli a. wo shuode shi damakuang,chunzai gundongtiao,bushi shuo zhengge yemian. wo xianzai yong de shi ubuntu 8.10 live CD,feidei yao wo jietu ???

  8. mg12 | #58
    Nov 4th, 2008 at 19:36

    freeher :

    @JAY
    Meiyou Tianli a. wo shuode shi damakuang,chunzai gundongtiao,bushi shuo zhengge yemian. wo xianzai yong de shi ubuntu 8.10 live CD,feidei yao wo jietu ???

    翻译如下:
    没有天理啊. 我说的是代码框存在滚动条, 不是说整个页面. 我现在用的是 ubuntu 8.10 live CD, 非得要我截图???

    回复如下:
    1. 抱歉, 是我误解了, 原来你说的是 WP-Syntax 提供的代码显示框. 但很遗憾, 我习惯写代码 No Wrap.
    2. 所有 Linux 发行版都可以截图的, 请猛击 PrintScreen 按钮.
    3. 在我对于美的认识中, Firefox 很美.

  9. freeher | #59
    Nov 5th, 2008 at 12:36

    firefox 3 for windows 的皮肤实在太丑了,那个前进后退按钮,真像一陀。 在ubuntu下的界面还不错。 折腾一晚上的UBUNTU 8.10 ,发现 台湾官方源比中国官方源快 最快的是浙江那个双线机房源。 CN99和教育网的源直接忽略。 我可怜的铁通。在UBUNTU下面,找个加速器都找不到。来个 apt-get update 都要卡在 99%

  10. Hui | #60
    Nov 13th, 2008 at 10:49

    测试 :razz:

  11. Sivan | #61
    Nov 17th, 2008 at 14:07

    字多= =看了好晕,试着改改 :razz:

  12. Sivan | #62
    Nov 17th, 2008 at 14:10

    啊,放弃了……我只看的懂“替换代码XXX为XXX那种” :cry:

  13. Sivan | #63
    Nov 17th, 2008 at 14:24

    @Sivan
    弄好了,原来JS里那些代码也要改= =我的主题评论的id不是author_info :mad:

  14. mg12 | #64
    Nov 17th, 2008 at 21:53

    @Sivan
    那你将 author 换成你的 id 就行了.

  15. !CnSoLoer | #65
    Nov 28th, 2008 at 22:36

    我来问下,你的那个wp-syntax插件的问题,我在你的
    http://www.neoease.com/wp-content/themes/inove/wp-syntax.css
    里面没有找到字体定义,但是为什么我使用官方默认的字体和你的不一样,不知道是继承了哪里的设置。还有我看了下,在geshi.php里面好像定义了代码的字体为“monospace”,但修改此处的(改为Consolas),也只能显示代码出的字体变换,数字列表处的字体还是原来的样子,不知道怎么能定义,在wp-syntax.css 定义字体也无法实现字体变换。

    请问你的怎么可以。Consolas 字体应该很容易辨别,特别是那个数字0里面有一条斜杠。

  16. Tina | #66
    Nov 29th, 2008 at 16:05

    输入框这里迟钝了很久..要把自己模板里的替换进去..然后还得给它起个名字...
    恩以后就有经验了 经验就是这么折腾出来滴 啊哈哈~
    3Q for your sharing~

  17. mr wu | #67
    Nov 30th, 2008 at 20:52

    There is time to take a look at my new theme

  18. Kusanagi | #68
    Dec 4th, 2008 at 00:06

    测试下效果!

  19. 沿阶草 | #69
    Dec 13th, 2008 at 18:07

    测试
    学习。。。

  20. 木木木木木 | #70
    Dec 17th, 2008 at 18:00

    行啦 多谢分享代码啊~~

  21. HK | #71
    Dec 20th, 2008 at 14:18

    不错哦,我现在使用的就是你的主题,和

  22. 试下 | #72
    Jan 5th, 2009 at 17:32

    不是这里啊?

  23. ps | #73
    Jan 8th, 2009 at 14:01

    好吧 我真的有欲望试一试

  24. 痞子C | #74
    Jan 10th, 2009 at 13:43

    填个资料先 :smile:

  25. 痞子C | #75
    Jan 10th, 2009 at 13:45

    修改资料在来
    这是个刷留言的办法 :grin:
    30分钟之内都能修改,不错不错,超爽的用户体验,改完之后还有个渐入渐出的效果,牛

  26. mg12 | #76
    Jan 10th, 2009 at 21:31

    @ps
    请不要犹豫!

  27. hhist | #77
    Feb 21st, 2009 at 16:50

    但是我用了CACHE后怎么办
    下一个来访的继续前一个人的资料?

  28. hhist | #78
    Feb 21st, 2009 at 16:50

    @hhist
    问问

  29. 鸟蛋 | #79
    Mar 11th, 2009 at 20:19

    好东西!
    支持!

  30. 总总 | #80
    Mar 18th, 2009 at 21:39

    这个蛮好看的哦!

  31. 牛牛 | #81
    Mar 23rd, 2009 at 09:33

    效果非常的棒啊

  32. 老时 | #82
    Mar 28th, 2009 at 23:03

    看到代码头就疼。。唉。谁能帮我搞下。。

  33. 腌生肉 | #83
    Apr 23rd, 2009 at 22:17

    很不错的说。

  34. liangwei389 | #84
    May 15th, 2009 at 10:02

    不错,很好的用户体验!!

  35. 大猪 | #85
    Jun 17th, 2009 at 00:16

    这个不错,支持一下。

  36. gerr87 | #86
    Jul 19th, 2009 at 04:58

    就地尝试

  37. Eureka | #87
    Sep 9th, 2009 at 23:07

    我也试一试~

  38. 阿东 | #88
    Sep 10th, 2009 at 22:19

    试试好用不。

  39. jiujiu | #89
    Oct 12th, 2009 at 09:31

    学习了

  40. Dreamix | #90
    Oct 12th, 2009 at 23:39

    ;-) 呵呵,给自己的模板也加上啦~

  41. karm | #91
    Oct 26th, 2009 at 19:56

    看看啥效果

  42. 网络生活 | #92
    Nov 6th, 2009 at 20:47

    看起来有点复杂,一下没搞明白

  43. michael | #93
    Nov 11th, 2009 at 01:13

    强! 我也去试试

  44. Colin | #94
    Nov 19th, 2009 at 11:37

    看看怎么样,嘿嘿!

  45. noku | #95
    Feb 1st, 2010 at 17:15

    看下效果再看代码!

  46. jerrybo | #96
    Feb 2nd, 2010 at 11:13

    真的挺好看的

  47. jerrybo | #97
    Feb 2nd, 2010 at 15:24

    超级fashine

Comment pages
1 2 195
  1. Heey » 博客的一点小改进
    Jun 11th, 2008 at 17:04
  2. 适当隐藏输入框,提高WordPress访客评论时的用户体验 | Xiaorsz's Blog
    Oct 31st, 2008 at 23:07
  3. 也说用jQuery改进WP评论表单 at Becomin' Charles
    Nov 14th, 2008 at 21:50
  4. 提升Wordpress交互与浏览体验的6个工具
    Nov 25th, 2008 at 16:48
  5. wordpress主题设计与访客体验(上) | 微物之神
    Apr 12th, 2009 at 00:23
  6. 利用jQuery提高访客评论的用户体验 - 木木木木木
    Jun 17th, 2009 at 21:46
  7. 隐藏WordPress评论资料输入框
    Aug 30th, 2009 at 20:44

Twitter Email feed
RSS feed