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

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

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

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

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

<?php if ( $comment_author != "" ) : ?>
<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; ?>

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

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

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

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

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