向评论系统添加滑块验证码

时间:2012-11-21 作者:Amanda Duke

QapTcha 是一个可拖动的jQuery验证码系统。我一直在尝试创建一个插件,使其在Wordpress评论系统上工作。我找到了一个plugin 它已经在这样做了,但已经过时了,并且没有使用最新的QapTcha版本。

早期版本在触摸屏上不起作用,因此,最新版本至关重要。因此,我使用插件作为模板,并相应地更新了所有文件,但无论我做什么,QapTcha滑块都不会出现在注释表单中。

以下是一些PHP脚本:

function my_scripts_method() {
    wp_deregister_script( \'jquery\' );
    wp_deregister_script( \'jquery ui\' );
    wp_register_script( \'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\');
    wp_register_script( \'jquery ui\', \'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js\'); 
    wp_enqueue_script( \'jquery\' );
    wp_enqueue_script( \'jquery ui\' );
} 

function myQaptcha_wp_footer() {
    if (is_singular() && !is_user_logged_in()) {
        $url = get_bloginfo("wpurl");
        $outer = \'<link rel="stylesheet" href="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.css" type="text/css" />\'."\\n";     
        $outer.= \'<script type="text/javascript" src="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/jquery.ui.touch.js"></script>\'."\\n";
        $outer.= \'<script type="text/javascript">var myQaptchaJqueryPage="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.php";</script>\'."\\n";
        $outer.= \'<script type="text/javascript" src="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/myqaptcha.jquery.js"></script>\'."\\n";        
        $outer.= \'<script type="text/javascript">jQuery(document).ready(function(){if(jQuery("p:has(\\\'textarea\\\')").length>0) jQuery("p:has(\\\'textarea\\\')").before(\\\'<div class="QapTcha"></div>\\\'); else jQuery("#comment").before(\\\'<div class="QapTcha"></div>\\\');jQuery(\\\'.QapTcha\\\').QapTcha({disabledSubmit:true,autoRevert:true});});</script>\'."\\n";
        echo $outer;
    } 
}

function myQaptcha_preprocess_comment($comment) {
    if (!is_user_logged_in()) {
        if(!session_id()) session_start();
        if ( isset($_SESSION[\'30corg\']) && $_SESSION[\'30corg\']) {
            unset($_SESSION[\'30corg\']);
            return($comment);
        } else {
            if (isset($_POST[\'isajaxtype\']) && $_POST[\'isajaxtype\'] > -1) {
                //header(\'HTTP/1.1 405 Method Not Allowed\');   clove   find some error with ajax submit  2012-03-02
                die("请滑动滚动条解锁");
            } else {
                if(function_exists(\'err\'))
                    err("请滑动滚动条解锁");
                else 
                    wp_die("请滑动滚动条解锁");
            } 
        } 
    } else {
        return($comment);
    } 
} 
add_action(\'wp_enqueue_scripts\', \'my_scripts_method\');
add_action(\'wp_footer\', \'myQaptcha_wp_footer\');
add_action(\'preprocess_comment\', \'myQaptcha_preprocess_comment\');
我仔细检查了Qaptcha implementation guide 一切都设置正确。唯一可能出错的是,当jQuery被执行时。。。?我已经上传了我的插件项目,只需找到下载按钮here 如果您想测试它,请将其添加到您的站点。

你能帮我查一下吗why 滑块没有出现?一定有什么地方出错了。。。

Edit: 以下是生成的输出的实时链接:http://bogsorken.com/wpse/wordpress/?p=1

1 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

首先,有很多_doing_it_wrong() 在脚本排队中。

不要覆盖核心捆绑脚本,请尝试删除此挂钩回调,看看是否可以解决问题:

function my_scripts_method() {
    wp_deregister_script( \'jquery\' );
    wp_deregister_script( \'jquery ui\' );
    wp_register_script( \'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\');
    wp_register_script( \'jquery ui\', \'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js\'); 
    wp_enqueue_script( \'jquery\' );
    wp_enqueue_script( \'jquery ui\' );
} 

add_action(\'wp_enqueue_scripts\', \'my_scripts_method\');
核心捆绑脚本应never 被插件或主题所困扰。将核心捆绑版本替换为其他版本会导致问题。

将插件捆绑的脚本正确排队

这些脚本应通过回调排队,并连接到适当的操作中:

function myQaptcha_wp_footer() {
    if (is_singular() && !is_user_logged_in()) {
        $url = get_bloginfo("wpurl");
        $outer = \'<link rel="stylesheet" href="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.css" type="text/css" />\'."\\n";     
        $outer.= \'<script type="text/javascript" src="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/jquery.ui.touch.js"></script>\'."\\n";
        $outer.= \'<script type="text/javascript">var myQaptchaJqueryPage="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.php";</script>\'."\\n";
        $outer.= \'<script type="text/javascript" src="\' . $url . \'/wp-content/plugins/myqaptcha/jquery/myqaptcha.jquery.js"></script>\'."\\n";        
        $outer.= \'<script type="text/javascript">jQuery(document).ready(function(){if(jQuery("p:has(\\\'textarea\\\')").length>0) jQuery("p:has(\\\'textarea\\\')").before(\\\'<div class="QapTcha"></div>\\\'); else jQuery("#comment").before(\\\'<div class="QapTcha"></div>\\\');jQuery(\\\'.QapTcha\\\').QapTcha({disabledSubmit:true,autoRevert:true});});</script>\'."\\n";
        echo $outer;
    } 
}
请尝试以下操作:

function wpse73486_enqueue_myQaptcha_scripts() {
    if ( is_singular() && ! is_user_logged_in() ) {
        $url = plugin_dir_url( plugin_basename( __FILE__ ) );
        wp_enqueue_style( \'qapcha-jquery\', $url . \'/jquery/myQaptcha.jquery.css\' );
        wp_enqueue_script( \'qaptcha-jquery\', $url . \'/jquery/myqaptcha.jquery.js\', array( \'jquery\' ), \'\', true );
        wp_enqueue_script( \'jquery-touch-punch\' );
        // etc.
    }
}
add_action( \'wp_enqueue_scripts\', \'wpse73486_enqueue_myQaptcha_scripts\' );
将脚本代码移动到文件中,以便它可以排队创建新文件,例如qaptcha.script.js, 并将自定义脚本代码放入其中。如果代码同时需要jQuery和PHP,请将其放入PHP文件中,例如qaptcha.script.php, 这样您就可以访问文件中的WordPress函数。

使用更新的核心捆绑脚本WordPress 3.4现在随附jquery-ui-touch-punch. 您可能需要排队/使用它,而不是捆绑的插件jquery-ui-touch 图书馆

结束