WordPress Ajax 评论提交

Wordpress Ajax 评论提交

4.4+ 新版本

查看源码发现4.4新增了一个函数wp_handle_comment_submission

这个函数可以看作是wp_new_comment的升级版,用这个函数将大大减少了AJAX回调函数的代码量,简单的说就是由原来的几十行代码变成一行,而且过滤条件更加全面,非常之方便:idea:

本教程必须为4.4或以上版本,低版本直接使用会报错。

使用方法

下载压缩包里的文件,解压后将文件夹上传到主题根目录下,注意是加压后的文件夹,不是文件件中的文件

下载地址

然后在functions.php中使用如下代码调用

require('ajax-comment/main.php');

配置适应主题

app.js第四行调整评论列表class

__list = 'comment-list';

main.phpformpostion参数为评论表单位置

回调函数中的评论样式可根据你的主题自行调整,但不要使用回复按钮,会报错。

代码已经过默认主题twentysixteen测试,没有任何问题。

旧版本

2015/11/17 更新

解决了当评论倒序排列时新评论无法出现在顶部的bug

增加了一个评论表单位置参数

编辑do.php,找到formpostion参数(约第9行),默认为bottom,如果你的表单在顶部则设置为top


2015/09/15 更新

处理了没有评论时刷新后才能显示新评论的bug,注意在js中修改自己的容器名。

增加了一个是否接受邮件通知的选项。


ajax提交评论不但可以提升交互体验而且可以防止垃圾评论,一般垃圾评论都是通过表单机器人提交的,如果使用了ajax评论提交我们就可以禁用wordpress的表单提交,也就是删除或者清空wp根目录下的wp-comment-post.php这个文件。

默认代码兼容wordpress 默认主题2015。

实现方法

下载压缩包,解压后把文件夹放到自己的主题目录中,在functions.php中加入如下代码即可。

require get_template_directory() . '/ajax-comment/do.php';

注意是把解压得到的文件夹放到主题目录下,不是文件夹中的文件

兼容处理

由于主题结构的不同,可能出现的结果是虽然你成功提交了评论,但是刷新之前显示不正常,那么我们需要对相关函数进行处理

1.评论样式不一致

需要修改文件夹中的do.php,修改其中的评论结构使之和你的一致即可

2.不显示新评论

这是因为包裹评论的容器和JS中的不一致,打开comments.php,看看你的容器名,然后修改ajax-comment.js中标注的位置即可,具体代码如下

__list = 'comment-list';//your comment wrapprer

3.注意你的评论结构使用的是ul还是ol,js中也要保持一直

4.修改文字提示样式需要修改压缩包内的css文件

5.如无文字提示则检查你的评论框textarea是否有id="#comment"

文件下载

文件下载

Comments : 117

  1. 路过来测试。 :smile:

  2. 按照博主的instructions,设置好了,非常感谢!

  3. 博主,我根据你的指导,提交评论,返回首页内容,浏览器还提示说Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check 。请教我是怎么回事呢

    1. @小兽 连个链接都没有,让我猜么? :eek:

    2. @bigfa 恩恩,http://www.seo628.com/1418.html 大发哥。你尝试输入评论,但是不输入昵称邮箱,点击提交,看看,直接给我返回首页了。 :cry: :cry: :cry:

    3. @小兽 你可以删掉代码,再执行你的操作看看会有啥后果。

    4. @bigfa 删除执行代码后,评论没问题。
      有个情况,这个主题我本地测试没有问题,就是上传到线上有问题。出现上面的提示。

  4. 测试一下AJAX评论

  5. wp使用InstantClick的pjax预加载功能之后,提交评论,会造成多次连续提交的情况:提示信息会显示您已经提交过该评论。但可以提交成功。提交追加的评论有时候会变成重复的两条,三条。博主有办法解决吗?

    1. @金哥 我也是这样,请问你解决了嘛? :grin:

  6. 效果不错 只是错误信息的内容怎么改的啊..
    仅在主题文件夹内

  7. 我是来问博主是怎么实现PC和手机ajax comments 怎么效果是一致的呢。博主的网站ajax提交评论后提示框会从屏幕正中央滑下来,手机也是一样的效果,完美!而,我采用博主提供的文件下来修改,怎么样位置都是有显示差异的,这块全在app.css这个文件里面改吗? :neutral: 怎么回事呢?

  8. 五天后,仍然无大发应答。 :shock:

    1. @vlieh 没有什么 CSS 效果是微信红包解决不了的,如果有,那么就两个 :lol:
      忠告

  9. 测试一下大发的评论,果然提交很快。

  10. 测试使用下

发表留言

人生在世,错别字在所难免,无需纠正。

Smilies powered by wp-alu

Post Comment