web-dev-qa-db-fra.com

Ajout d'un curseur captcha au système de commentaires

QapTcha est un système jQuery captcha déplaçable. J'ai essayé de créer un plugin pour le faire fonctionner sur le système de commentaires Wordpress. J'ai trouvé un plugin qui le fait déjà, mais il est obsolète et n'utilise pas la dernière version de QapTcha.

Les versions antérieures ne fonctionnant pas sur les écrans tactiles, la dernière version est essentielle. J'ai donc utilisé le plug-in comme modèle et mis à jour tous les fichiers en conséquence, mais quoi que je fasse, le curseur QapTcha n'apparaît pas dans le formulaire de commentaire.

Voici quelques-uns des scripts 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');

J'ai vérifié le guide d'implémentation de Qaptcha et tout est réglé correctement. La seule chose qui pourrait se tromper, c'est peut-être lorsque jQuery est exécuté ...? J'ai téléchargé mon projet de plugin, il suffit de trouver le bouton de téléchargement ici et de l'ajouter à votre site si vous souhaitez le tester.

Pouvez-vous m'aider à découvrir pourquoi le curseur n'apparaît pas? Il doit y avoir une erreur quelque part ...

Edit : Voici un lien direct vers la sortie générée: http://bogsorken.com/wpse/wordpress/?p=1

1
Amanda Duke

Tout d'abord, il y a pas mal de _doing_it_wrong() dans la mise en file d'attente des scripts.

Ne remplacez pas les scripts fournis par le noyau

Essayez de supprimer ce rappel de hook et voyez si cela résout le problème:

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');

Les scripts fournis avec le noyau ne devraient jamais être écrasés par des plugins ou des thèmes. Remplacer la version fournie avec une autre version peut et va causer des problèmes.

Scripts correctement inclus dans les plugins

Ces scripts doivent être mis en file d'attente via callback, liés à une action appropriée:

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;
    } 
}

Essayez ceci à la place:

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' );

Déplacez le code de script dans un fichier afin qu'il puisse être mis en file d'attente

Créez un nouveau fichier, tel que qaptcha.script.js, et insérez le code de script personnalisé à l'intérieur. Si le code nécessite à la fois jQuery et PHP, insérez-le dans un fichier PHP, tel que qaptcha.script.php, afin de pouvoir accéder aux fonctions WordPress de ce fichier.

Utiliser un script intégré au noyau mis à jour

WordPress 3.4 est maintenant livré avec jquery-ui-touch-punch. Vous devrez peut-être mettre en file d'attente/l'utiliser à la place de la bibliothèque jquery-ui-touch fournie avec le plugin.

1
Chip Bennett