WordPress中对访客评论功能的一些优化方法


Posted in PHP onNovember 24, 2015

前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验. 今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧.

WordPress中对访客评论功能的一些优化方法

需求

细心的朋友可能已经注意到了: 当在某个 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>
 <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; ?>

访客评论显示欢迎信息

WordPress中对访客评论功能的一些优化方法

关键问题:获取访客信息

花点时间去研究,其实整个实现过程并不复杂。这里的关键点是,如何判断访客已经在近期发表过评论。

当访客评论时,会在 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'] = '</div>' . $comments_args['comment_field'];
  $comments_args['comment_notes_before'] = $welcome_login . '<div 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('隐藏');
    }  
  }); 
});

这样,如果用户需要更新信息时,可以点击欢迎信息右侧的更改按钮;修改完成之后,用户信息会在评论后更新。

PHP 相关文章推荐
PHP中使用数组实现堆栈数据结构的代码
Feb 05 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
Jul 31 PHP
php实现执行某一操作时弹出确认、取消对话框
Dec 30 PHP
php接口和抽象类使用示例详解
Mar 02 PHP
PHP中单引号与双引号的区别分析
Aug 19 PHP
php天翼开放平台短信发送接口实现方法
Dec 22 PHP
PHP获取远程图片并保存到本地的方法
May 12 PHP
PHP获取网页所有连接的方法(附demo源码下载)
Mar 30 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
Dec 02 PHP
php 删除指定文件夹的实例讲解
Jul 25 PHP
PHP实现与java 通信的插件使用教程
Aug 11 PHP
详解PHP Swoole与TCP三次握手
May 27 PHP
php发送短信验证码完成注册功能
Nov 24 #PHP
PHP获取文件扩展名的4种方法
Nov 24 #PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
Aug 17 #PHP
PHP如何通过AJAX方式实现登录功能
Nov 23 #PHP
最新制作ThinkPHP3.2.3完全开发手册
Nov 23 #PHP
php生成4位数字验证码的实现代码
Nov 23 #PHP
3种php生成唯一id的方法
Nov 23 #PHP
You might like
星际争霸中的热键
2020/03/04 星际争霸
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php文件上传的两种实现方法
2016/04/04 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
了解VUE的render函数的使用
2017/06/08 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python中运行并行任务技巧
2015/02/26 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python的等深分箱实例
2019/11/22 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
写给老师的感谢信
2015/01/20 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
如何写好活动总结
2019/06/21 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
聊聊redis-dump工具安装问题
2022/01/18 Redis
python flappy bird小游戏分步实现流程
2022/02/15 Python
分享3个非常实用的 Python 模块
2022/03/03 Python