0

私が作成している wp プラグインに jquery を実装しようとしています。

私のテーマの functions.php には、次のコードがあります。

function load_jquery() {

    // only use this method is we're not in wp-admin
    if ( !is_admin() ) {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');
        wp_deregister_script('jquery-ui-slider');
        wp_deregister_style('jquery-ui-style');


        // discover the correct protocol to use
        $protocol='http:';
        if($_SERVER['HTTPS']=='on') {
            $protocol='https:';
        }

        // register the Google CDN version
        wp_register_script('jquery', $protocol.'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_register_script('jquery-ui-slider', $protocol.'//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, '1.10.3');
        wp_register_style('jquery-ui-style', $protocol.'//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css', false );

        // add it back into the queue
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-slider');
        wp_enqueue_style('jquery-ui-style');
    }
}

add_action('wp_enqueue_scripts', 'load_jquery');

次に、プラグイン ファイルの 1 つで、関数と add_action('wp_head', 'functions_name'); を介して次を出力します。

echo '
<script type="text/javascript">

  jQuery(function($) {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
</script>';

実際のスクリプトの前に jquery がロードされていることがわかりますが、まだ何も機能しません。

何か案は？wp_enqueue_script の部分をスキップして、テーマファイルの header.php 内のすべてを貼り付けると機能します。

4

2 に答える 2

1

大きな問題は、ワードプレスの競合状況です。スクリプトを機能させるには、jQuery で使用するすべての '$'記号を 'jQuery'に置き換える必要があります。すべての優れた wordpress テーマ開発者はこれを知っています。wordpress はコードと競合するため、適応する必要があります。

例 ： 

   jQuery(document).ready(function($){
        jQuery( "#slider-range" ).slider({ 
            etc etc 
        )};
       )};

私は同じ問題を抱えていたので、正しいことを願っています。:)

于 2014-05-20T15:04:03.097 に答える