web-dev-qa-db-ja.com

コメントシステムにスライダーキャプチャを追加する

QapTcha はドラッグ可能なjQueryキャプチャシステムです。私はWordpressのコメントシステムで動作するようにプラグインを作成しようとしています。私はすでにこれを行っている プラグイン を見つけましたが、時代遅れで最新の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実装ガイド を再確認しましたが、すべて正しく設定されています。間違っているかもしれない唯一の事は多分jQueryが実行される時です…？私は自分のプラグインプロジェクトをアップロードしました。ダウンロードボタン をここ で見つけて、テストしたい場合はそれをあなたのサイトに追加してください。

whyスライダーが表示されないのを見つけてもらえますか？どこかに間違いがあるに違いありません...

Edit：これは、生成された出力へのライブリンクです。 http://bogsorken.com/wpse/wordpress/?p= 1

pluginsphpjqueryjquery-uicaptcha
1
Amanda Duke

まず最初に、スクリプトのエンキューにかなりの_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');

コアバンドルスクリプトはプラグインやテーマによって絶対に上書きされるべきではありません。コアバンドル版を他のバージョンに置き換えると問題が発生することがあります。

プラグインバンドルのスクリプトを正しくエンキューする

これらのスクリプトは、コールバックを介してキューに入れられ、適切なアクションにフックされるべきです。

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の両方が必要な場合は、qaptcha.script.phpなどのPHPファイル内に配置して、ファイル内のWordPress関数にアクセスできるようにします。

更新されたコアバンドルスクリプトを使用する

WordPress 3.4はjquery-ui-touch-punchで出荷されました。プラグインバンドルのjquery-ui-touchライブラリの代わりにそれをエンキュー/使用する必要があるかもしれません。

1
Chip Bennett