提高 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 »'); ?></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 »'); ?></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 这个文件.
想看看效果? 在此评论一次, 你就可以看到效果了...
English
终于搞出来了，其实挺简单的，觉得！！
不过ID确实蛮重要的！
大家可以去试下哈！
@mg12 anyway...我用上了这段改善用户体验的js 嘿嘿...
@mg12
你什么时候能把WP-RecentComments的CSS重写一下啊。 不单是默认主题，还有其它主题也出现错位。我自己改过，总是不到位。哭。我用MAXTHON2
另外，你的代码栏能否美化一下？ 最少滚动条能看起来不那么丑。
要是能做成light-box那样一点就全屏最好。因为横的滚起来看的不爽。
毕竟还是有很多穷人没钱用宽屏。
这是就我的用户体验。。。。
@freeher
就算我重写 CSS 也是没用的, 每个主题都不一样, 除非你不要显示头像.
我的代码框没有横滚, 如果你说的是 IE 显示的垂直滚动条, 那我没办法.
1024x768 或以上显示就不会有页面横滚, 800x600 也可以专注于内容, 640x480 目前统计中还没发现这样的用户.
@mg12
垂直的正常的。
我是说 1024x768 存在水平滚动条
我用的是 IE7 MAXTHON2 XPSP3 EN
http://www.neoease.com/wordpress-at-reply/#more-781
比如上面这页
chrome下亦是如此，ＦＦ太丑，没试过。
再重申，是水平滚动条，不是垂直的。
@freeher
IE7, FF3, Safari, Chrome在1024*768测试均表现一致，没有出现横向滚动条。
@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 很美.
firefox 3 for windows 的皮肤实在太丑了，那个前进后退按钮，真像一陀。 在ubuntu下的界面还不错。 折腾一晚上的UBUNTU 8.10 ，发现 台湾官方源比中国官方源快 最快的是浙江那个双线机房源。 CN99和教育网的源直接忽略。 我可怜的铁通。在UBUNTU下面，找个加速器都找不到。来个 apt-get update 都要卡在 99%
测试
字多= =看了好晕，试着改改
啊，放弃了……我只看的懂“替换代码XXX为XXX那种”
@Sivan
弄好了，原来JS里那些代码也要改= =我的主题评论的id不是author_info
@Sivan
那你将 author 换成你的 id 就行了.
我来问下，你的那个wp-syntax插件的问题，我在你的
http://www.neoease.com/wp-content/themes/inove/wp-syntax.css
里面没有找到字体定义，但是为什么我使用官方默认的字体和你的不一样，不知道是继承了哪里的设置。还有我看了下，在geshi.php里面好像定义了代码的字体为“monospace”，但修改此处的（改为Consolas），也只能显示代码出的字体变换，数字列表处的字体还是原来的样子，不知道怎么能定义，在wp-syntax.css 定义字体也无法实现字体变换。
请问你的怎么可以。Consolas 字体应该很容易辨别，特别是那个数字0里面有一条斜杠。
输入框这里迟钝了很久..要把自己模板里的替换进去..然后还得给它起个名字...
恩以后就有经验了 经验就是这么折腾出来滴 啊哈哈~
3Q for your sharing~
There is time to take a look at my new theme
测试下效果!
测试
学习。。。
行啦 多谢分享代码啊~~
不错哦，我现在使用的就是你的主题，和
不是这里啊？
好吧 我真的有欲望试一试
填个资料先
修改资料在来
这是个刷留言的办法
30分钟之内都能修改，不错不错，超爽的用户体验，改完之后还有个渐入渐出的效果，牛
@ps
请不要犹豫!
但是我用了CACHE后怎么办
下一个来访的继续前一个人的资料？
@hhist
问问
好东西！
支持！
这个蛮好看的哦！
效果非常的棒啊
看到代码头就疼。。唉。谁能帮我搞下。。
很不错的说。
不错,很好的用户体验!!
这个不错，支持一下。
就地尝试
我也试一试～
试试好用不。
学习了
看看啥效果
看起来有点复杂，一下没搞明白
强！ 我也去试试
看看怎么样,嘿嘿!
看下效果再看代码！
真的挺好看的
超级fashine