为评论框添加邮箱验证码吧!

发布于 2021-01-16  951 次阅读


令人头疼的垃圾评论

只要有评论框,就会有垃圾评论出现;只要你文章内容或者是个性化设计让人不满意,你就会收到各种吐槽。

邮件地址的框栏对于Spam commenters来说几乎不存在,他们可以随便伪造一个地址就可以畅所欲言。为了阻止这种极其闹挺的现象在自己的Wordpress站点上发生,果然还是该写写邮箱验证码功能。

没基础的可以直接抄走代码使用,但是转载请务必先联系lemonpig-chu@qq.com

准备工作

  1. 你的主机具有发送邮件的功能,或者安装了第三方SMTP插件(我用WP SMTP)
  2. 你知道数据库这个东西是什么
  3. 你会修改你的主题里的配置文件
  4. 引用了jQuery

Let's Start!

制作获取验证码的API

我们来编写发送验证码的业务逻辑,原则上不能写在前端,一切验证码的生成与校验都应该在后端进行,否则那些会F12的大佬们会把你的评论系统弄得一团糟。

建立一个数据表,建议结构如下:结构示意

为了实现Ajax(/Pjax)的异步效果,将以下代码写出

接下来,再添加以下代码,将功能挂到admin_ajax.php中

解释:

为了防止SQL注入查询,使用了wpdb->prepare();进行转义

很容易就能看出来,调用方式为:

https://www.lemonpig.cn/wp-admin/admin-ajax.php?action=captcha&mail=邮箱地址

send_captcha()是发送验证码的函数,可以自定义,我的模板如下,各位可以根据自己主题的情况进行更改

编写前端调用

在comments.php中添加验证码输入框(注意!!!这是一段Javascript代码,写在HTML部分!!不是PHP),可以参考我的评论模板(F12也行吧)

编写ajax请求程序:

我的邮箱输入框id是email,故有#email

那个是消息提醒,可以自定义,addComment也是自定义,可以不用,我是借用了自己主题里的一个类。提醒框亦可这么写(需要自写css,允许F12看我的)

后端验证

直接上代码

是消息回显的函数,是主题自带的,可以自定义。

大功告成

你可能需要一点时间去调试,但这似乎并不难,调试完了,Spam Commenters就不能伪造地址了!

要不要试试我的验证码功能?就在下面!


明月装饰了你的窗子,你装饰了别人的梦