让wordpress使用ajax发表评论

wordpress默认的评论发布方式是form表单提交,如果遇到错误,会到一个wp_die函数生成的包含错误信息的页面,用户要修改再次提交需要手动返回之前的页面。提高这一体验的方式,无疑是改造为使用ajax来发布评论。

使用ajax,就会涉及到后端响应部分。一般来说,我所知道有以下几种方式来达到目标需求:

  • 依然提交到默认的官方的接受评论相应的处理接口:/wp-comments-post.php。但这个带来的问题是它所返回的信息都是html页面代码,前端javascript部分需要提取出相应的信息来展示。个人认为麻烦程度:*****
  • 提交到后端的/wp-admin/admin-ajax.php。这个接口是wordpress后端发布评论的接口,由于我没有使用过该方法,不清楚是否需要做其它hook。我猜测应该需要配合其他的一些hook,因为这个接口是后台在用,可能需要管理员权限,如果要用在前台,可能需要hook部分情况来开放权限。个人认为麻烦程度:***
  • 提交到自定义的comments-ajax-post.php。这个方法是最早一位台湾的博友 Willin Kan 提供的,就是复制了一份wp-comments-post.php,然后修改其返回部分,并加入了重复duplicate和过快flood检测。个人认为麻烦程度:**

综上个人认为第三种是比较好的一种实现思路。因为ajax评论属于主题实现的东东,跟着主题走,我们尽量不要去破坏wordpress既有机制。

当然,Willin Kan的版本在我看来还有一些小问题,我根据个人需要重新定制了一份comemnts-post.php,如果觉得对自己有用的同学可以随意拿去:https://github.com/qiqiboy/comments-post/

部分代码思路

默认的wp-comments-post.php里面其实包含了大部分的错误信息检测,我们首先要做的就是修改这些错误的返回展示。json是比较好的用于ajax通信的数据格式,所以我统一使用了 {err:ERR_CODE} 格式来返回错误信息。错误代码有以下几种:

COMMENT_DUPLICATE: 评论重复
COMMENT_FLOOD: 评论过快
CLOSED: 文章未开放评论
POST_NOT_EXISTS: 文章不存在
POST_NEED_PASSWORD: 文章已加密
MUST_LOGIN: 需要登录后才能评论
NAME_EMAIL_EMPTY: 姓名或邮箱未填写
EMAIL_ERROR: 邮箱格式错误
COMMENT_EMPTY: 还没有输入评论内容
COMMENT_SHORT: 评论内容太短了
FAILD: 评论创建是失败(可能是由于数据库或者其它未知原因导致)

重复评论和过快评论的检测并不在wp-comments-post.php里,它是用过hook在 wp_new_comment(); 时进行了检测,它的错误返回形式依然是 wp_die 生成的html页面,所以我们也要改造这一部分。经过研究,我找到了相应的hook勾子,非常简单:

/* 注:cmt_die是在comments-post.php里定义的一个输出错误信息的函数 */
add_action( 'comment_duplicate_trigger', create_function('', 'cmt_die("COMMENT_DUPLICATE");') );
add_action( 'comment_flood_trigger', create_function('', 'cmt_die("COMMENT_FLOOD");') );

到此,我们已经对所有的错误进行了有效地拦截。评论提交成功后的返回在文件最底部部分,默认是返回评论对象的json数据。可以自行根据自己的需要进行修改。

...
$comment = get_comment( $comment_id );
/**
 * Perform other actions when comment cookies are set.
 *
 * @since 3.4.0
 *
 * @param object $comment Comment object.
 * @param WP_User $user   User object. The user may not exist.
 */
do_action( 'set_comment_cookies', $comment, $user );

/**
 * 以下部分为评论成功后的返回输出部分
 */ 
output($comment);
exit;

下载comments-post.php: https://github.com/qiqiboy/comments-post/

本文已经有 18 条评论,继续盖楼啦!

发表评论 取消回复