Anx's Blog

非插件,自己动手给WordPress评论添加极验验证!

有自己WP博客的朋友,一定都对垃圾评论深恶痛绝。不过还好WordPress官方给每个博客都预装了Anti-Spam,只要启用了Anti-Spam这个插件,就能避免大部分英文垃圾评论的骚扰。

前段时间看到有个极验验证安装到WP上的方法,尝试了一下,结果没有成功,可能是因为教程太老的原因。于是我找到了一个朋友,经过他的一番研究,终于把这个帅气的极验验证搞定了 (•̀ᴗ•́)و ̑̑

PS:此方法只合适使用WP标准评论参数的主题,并且需要一定的动手能力。

第一步:注册极验,获取ID和Key

极验官网:http://www.geetest.com

注册并登陆后台,然后点击新增验证,填写网站信息

填写好网站资料,添加后就能获取ID和KEY

 

第二步:下载SDK

SDK下载地址:Github: gt3-php-sdk

解压SDK后,我们需要以下文件:

./config/config.php
./lib/class.geetestlib.php
./static/gt.js
./web/StartCaptchaServlet.php

把这些文件上传到当前WP目录(建议放到对应文件的文件夹,比如.js放到主题的js文件夹,.php可以放到WP根目录,方便安装代码时调用)

然后创建一个geetest.js文件,复制以下代码,并将对应的文件路径改成自己的,上传到wp目录。

    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
       
    };
            //把此处的StartCaptchaServlet.php改成你的路径
    $.ajax({
        url: "//www.blog67.com/StartCaptchaServlet.php?t=" + (new Date()).getTime(),  //改成自己的路径
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
              	width: "100%",
                offline: !data.success
            }, handlerEmbed);
        }
    });

接着,把config.php中的ID和KEY修改成自己的

修改StartCaptchaServlet.php里的路径。

require_once dirname(dirname(__FILE__)) . '/class.geetestlib.php';   //改成自己的路径
require_once dirname(dirname(__FILE__)) . '/config.php';    //改成自己的路径

最后把php文件权限设置成755,就可以接着下面的步骤了。

第三步:修改WP主题代码

首先确认自己目前的主题,使用了1.9.1版本以上的jquery.js,否则请升级jquery版本。

然后修改function.php,添加引用js文件的代码。下面以本站目前使用的Kratos主题为例,存放gt.js的目录为”kratos/js/gt.js”。

这里要注意一点,引用顺序:jquery.js -> gt.js -> geetest.js。

编辑functions.php,在最末端添加以下代码

/* 添加极验验证js */
function add_geetest() {  
    $dir = get_template_directory_uri(); 
    if ( is_single() ) {
        wp_enqueue_script( 'geetest1', $dir . '/js/code.js', array(), '3.0'); 
        wp_enqueue_script( 'geetest2', $dir . '/js/gt.js', array(), '3.0');
    }
}
add_action('wp_enqueue_scripts', 'add_geetest');

接着编辑评论模板comments.php,添加验证码。

	<?php 
	$fields =  array(
   		 'author' => '<div class="comment-form-author form-group has-feedback"><div class="input-group"><div class="input-group-addon"><i class="fa fa-user"></i></div><input class="form-control" placeholder="昵称" id="author" name="author" type="text" value="" ' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /><span class="form-control-feedback required">*</span></div></div>',
   		'email'  => '<div class="comment-form-email form-group has-feedback"><div class="input-group"><div class="input-group-addon"><i class="fa fa-envelope-o"></i></div><input class="form-control" placeholder="邮箱" id="email" name="email" type="text" value="" ' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /><span class="form-control-feedback required">*</span></div></div>',
   		'url'  => '<div class="comment-form-url form-group has-feedback"><div class="input-group"><div class="input-group-addon"><i class="fa fa-link"></i></div><input class="form-control" placeholder="网站" id="url" name="url" type="text" value="" ' . esc_attr(  $commenter['comment_author_url'] ) . '" size="30"' . $aria_req . ' /></div></div>',
   		 //添加下面的代码
   		 'captcha'  => '<div id="embed-captcha"></div><p id="wait" class="show">正在加载验证码......</p><p id="notice" class="hide">请先完成验证</p><p></p>',
   		 //添加代码结束
		);

做完这里我们已经完成了一半了。如果上面的步骤都没做错,这时候你已经能在文章页的评论框内看到极验验证,但是目前它还是个摆设,因为你不点击也能发表评论。那么我们就要继续下面的步骤了。

第四步:修改wp-comments-post.php

目前还没有找到更方便的方法,只能粗暴的修改wp-comments-post.php来达到不验证不给发评论的效果  ๑乛◡乛๑

找到nocache_headers();这行,大概在23行。在下一行添加下面的代码。

注意修改对应路径。

/* 极验验证代码开始 */

/*注意修改路径!*/
require_once( dirname(__FILE__) . '/class.geetestlib.php' );   /*注意修改路径!*/
require_once( dirname(__FILE__) . '/config.php' );           /*注意修改路径!*/
/*注意修改路径!*/

session_start();
$GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);


$data = array(
        "user_id" => $_SESSION['user_id'], # 网站用户id
        "client_type" => "web", #web:电脑上的浏览器;h5:手机上的浏览器,包括移动应用内完全内置的web_view;native:通过原生SDK植入APP应用的方式
        "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP
    );


if ($_SESSION['gtserver'] == 1) {   //服务器正常
    $result = $GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $data);
    if (!$result) {
       wp_die( '<p>请先通过验证码</p>', array( 'response' => array(), 'back_link' => true ) );
    } 
    
}else{  //服务器宕机,走failback模式
    if (!$GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
        wp_die( '<p>请先通过验证码</p>', array( 'response' => array(), 'back_link' => true ) );
    }
}

/* 极验验证代码结束 */

保存即可。清空浏览器缓存,即可测试安装效果~

 

 

不填写验证码则提示

OK,完美~

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

正在加载验证码......

请先完成验证