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

if (有资料的访客) {
    放置访客昵称
    放置更改按钮 (点击后: 隐藏更改按钮, 显示取消按钮, 显示资料输入框)
    放置取消按钮 (点击后: 显示更改按钮, 隐藏取消按钮, 隐藏资料输入框)
}
放置资料输入框
if (有资料的访客) {
    隐藏取消按钮
    隐藏资料输入框
}

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

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

<!-- 有资料的访客 -->
<?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; ?>