前几天见到某 Blog (遗记名字和网址了) 有一个相当适用的评论性能. 访客留言之后材料输出框会被暗藏起来, 好像登录了普通. 访客能够抉择修正相干材料再进行评论. 给予访客很好的用户体验. 明天我将这个性能移植到了本人的主题上, 制造不难, 分享一下吧.

需要

仔细的冤家可能曾经留意到了: 当在某个 WordPress 宣布评论后再次拜访该 Blog, 材料就不需求再次填写, 由于它们都曾经在材料输出框外面. 但没评论过的或许肃清了 Cookie 之后, 材料输出框将空洞无物.

1. 当访客的材料曾经存在的状况下, 访客很少关注材料自身, 那些材料输出框就会变成 "碍眼的货色", 咱们要想方法将它们暗藏起来. 同时, 咱们需求将这位访客的名字显示进去, 否则他/她基本不晓得本人的身份.

2. 访客有可能邮箱改换了, 或许就想换个酷点的名字, 此时的他/她一定想更改一下那些材料. 所以要求有一些措施, 让访客能够从新看到材料输出框.

3. 关于那些从未提供材料的访客, 材料输出框必需让他们看到.

剖析

由需要能够看到, 咱们要解决的是两种形态的访客: 有材料的, 无材料的.
关于有材料的, 具备显示材料输出框 (显示昵称) 和 暗藏材料输出框 (显示昵称) 两种形态.
而无材料的访客只有显示材料输出框 (没有昵称) 一种形态.
好, 咱们就为有材料的访客装备两个按钮 (更改和勾销), 一个用来显示材料输出框, 一个用来暗藏它.

思绪

1. 页面怎样写? 编码前, 咱们还应该理一下眉目. 用伪代码吧.

if (有材料的访客) {
    搁置访客昵称
    搁置更改按钮 (点击后: 暗藏更改按钮, 显示勾销按钮, 显示材料输出框)
    搁置勾销按钮 (点击后: 显示更改按钮, 暗藏勾销按钮, 暗藏材料输出框)
}
搁置材料输出框
if (有材料的访客) {
    暗藏勾销按钮
    暗藏材料输出框
}
2. 怎样获知访客能否评论过? 后面曾经谈到, 已评论访客的材料会在显示进去, 也就是说, 代码中曾经完成了获取材料的办法. 那咱们找找吧...

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

就是它! $comment_author 是访客的昵称, 当它为空的时分就阐明访客材料为空.

3. 有些控件又显示又暗藏的, 怎样弄呢? 咱们不需求为此转跳页面, 用 JavaScript 吧. 咱们能够写一个办法, 用来设定某些控件的显示与否, 只是一个很简略的办法:

/**
 * 设定控件的显示格调
 * @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>
 <p 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>
 </p>
<?php endif; ?>
 
<!-- 材料输出框 -->
<p id="author_info">
 <p 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>
 </p>
 <p 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>
 </p>
 <p 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>
 </p>
 
</p>
 
<!-- 有材料的访客 -->
<?php if ( $comment_author != "" ) : ?>
 <!-- 暗藏勾销按钮, 暗藏材料输出框 -->
 <script type="text/javascript">setStyleDisplay('hide_author_info','none');setStyleDisplay('author_info','none');</script>
<?php endif; ?>

访客评论显示欢送信息

要害成绩：获取访客信息

花点工夫去钻研，其实整个完成进程并不复杂。这里的要害点是，如何判别访客曾经在近期宣布过评论。

当访客评论时，会在 Cookie 中保留评论者的信息。咱们能够经过 Firebug 或许 Chrome 的 Developer Tool 来查看：

>>> document.cookie
"comment_author_bbfa5b726c6b7a9cf3cda9370be3ee91=helloworld; comment_author_email_bbfa5b726c6b7a9cf3cda9370be3ee91=dangoakachan%40gmail.com; comment_author_url_bbfa5b726c6b7a9cf3cda9370be3ee91=http%3A%2F%2Fexample.com"

从下面能够看到有三个与评论相干的信息，它们辨别是comment_author，comment_author_url，comment_author_email。不过两头夹杂着字符串 bbfa5b726c6b7a9cf3cda9370be3ee91，咱们能够看下 default-constants.php 的代码，就能够晓得这一段叫做 COOKIEHASH，它的值是博客 URL 的 md5值。

>>> import hashlib
>>> hashlib.md5('http://localhost/wordpress').hexdigest()
'bbfa5b726c6b7a9cf3cda9370be3ee91'

咱们只要要理解到这一点就能够了，由于这些信息 WordPress 曾经在comments_template办法中，经过wp_get_current_commenter为咱们从 Cookie 中解析了访客的信息。例如，咱们能够在 comment.php 文件中，间接用$comment_author来获取保留在 Cookie 中的访客姓名。

代码完成

接上去的完成就很简略了，咱们经过判别$comment_author变量值能否为空，来确定访客能否在近期有评论（有 Cookie）。

if (!is_user_logged_in() && !empty($comment_author)) {
...
}

假如有，则在评论框上方显示欢送信息：

if (!is_user_logged_in() && !empty($comment_author)) {
  $welcome_login = '<p id="welcome-login"><span>欢送回来, <strong>' . $comment_author . '</strong>.</span>';
  $welcome_login .= ' <span id="toggle-author"><u>更改</u> <i class="icon-signout"></i></span></p>';

  $comments_args['comment_field'] = '</p>' . $comments_args['comment_field'];
  $comments_args['comment_notes_before'] = $welcome_login . '<p id="author-info" class="hide">';
}

以上代码，需求增加到主题的 comment.php 文件 comment_form($comments_args) 办法调用之前。

接上去，咱们经过 Javascript 来完成访客信息更改：

/* Toggle comment user */
$('#comments').on('click', '#toggle-author', function () { 
  $('#author-info').slideToggle(function () { 
    if ($(this).is(':hidden')) {
      /* Update author name in the welcome messages */
      $('#welcome-login strong').html($('#author').val());

      /* Update the toggle action name */
      $('#toggle-author u').html('更改');
    } else {
      /* Update the toggle action name */
      $('#toggle-author u').html('暗藏');
    }  
  }); 
}); 

这样，假如用户需求更新信息时，能够点击欢送信息右侧的更改按钮；修正实现之后，用户信息会在评论后更新。

以上就是安达网络工作室关于《WordPress中对访客评论功能的一些优化方法》的一些看法。更多内容请查看本栏目更多内容！