芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
8

隐藏用户评论表单,提高用户体验

作者 芒果/分类 教程/发布于 2009-07-02 01:42

考虑到安全性等因素,一般建议关闭 WordPress 的用户注册功能。如此一来,所有的评论发布均需要输入用户信息。通常,可以使用以下代码来记录并显示用户输入的资料:

<?php echo $comment_author; ?> //昵称
<?php echo $comment_author_email; ?> //邮件
<?php echo $comment_author_url; ?> //网址

一旦访客成功留言,其信息会被评论表单记录。

当然,通过简单的 JavaScript 控制,可以选择性地隐藏用户资料(详细请参考芒果评论演示)。该方法来自适当隐藏输入框,提高 WordPress 访客评论时的用户体验 | Xiaorsz’s Blog

芒果纯粹菜鸟,故单纯张贴代码,不做过多细节说明。

如果获得用户信息后,需要隐藏下列表单元素:

<span id="author_info">
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />昵称 *
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />邮件 *
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />网站
</span>

此处,用样式 ID 为 author_info 的 <span></span> 标记对是为让 JavaScript 能有效识别。

修改评论模板(一般为 comments.php 文件),在上述需要隐藏的表单之前,插入以下代码:

<?php if ( $comment_author != "" ) : ?>
<script type="text/javascript">function setStyleDisplay(id, status){document.getElementById(id).style.display = status;}</script>
<?php printf('欢迎回来,%s。', $comment_author) ?>
<a href="javascript:setStyleDisplay('author_info','');setStyleDisplay('show_author_info','none');setStyleDisplay('hide_author_info','');" id="show_author_info">显示资料</a>
<a href="javascript:setStyleDisplay('author_info','none');setStyleDisplay('show_author_info','');setStyleDisplay('hide_author_info','none');" id="hide_author_info">隐藏资料</a>
<?php endif; ?>

在上述需要隐藏的表单之后,插入以下代码:

<?php if ( $comment_author != "" ) : ?>
<script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
<?php endif; ?>

成功添加后,用户即可自主编辑、隐藏或显示个人资料。用户体验非常不错,值得把玩。

感谢 Jutoy 同学的帮助,敬礼!

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/hide-user-comment-form-enhance-user-experience/" title="隐藏用户评论表单,提高用户体验" rel="bookmark">隐藏用户评论表单,提高用户体验 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 8 条群众意见

  1. 卢松松 /2009-07-02 13:33

    不错 zblog 就用不上! 回应

    #1
  2. bolo /2009-07-02 19:06

    嗯,这段代码不错。 回应

    #2
  3. 万戈 /2009-07-03 20:23

    虽然不是很懂,但是要支持一下。 回应

    #3
  4. Jutoy /2009-07-04 02:41

    嘿嘿,哪里哪里,你得感谢 Xiaorsz,这个功能真的不错的说…… 回应

    #4
  5. blankyao /2009-07-04 20:43

    你的 blog 主题不错,哈哈。 回应

    #5
  6. 网络生活 /2009-11-06 21:41

    还请芒果来指点一下,怎么加的。 回应

    #6
  7. Martin /2009-12-23 13:36

    很有帮助。 回应

    #7
  8. 0.0 /2011-10-05 10:50

    貌似不错的样子` 回应

    #8

下面我简单说几句