jQuery和Wordpress -脚本不工作

Question

我正在尝试实现一些jquery到我正在创建的wp插件。

在我的主题的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');

然后，在其中一个插件文件中，我通过一个函数和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中的所有内容，它就会起作用。

Answer 1

您应该用jQuery(document).ready(function($)包装您的脚本，因为jquery对象可能已经加载，但是您还需要jquery-ui脚本。

<script type="text/javascript">
jQuery(document).ready(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>';

Answer 2

最大的问题是wordpress conflict的情况，为了让你的脚本正常工作，你需要将你在jQuery中使用的所有wordpress‘$’符号替换为‘jQuery’。每一个好的wordpress主题开发人员都知道这一点，wordpress与你的代码冲突，所以你需要适应。

示例:

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

我希望我是对的，因为我也有同样的问题，我这样做了，它得到了解决。:)