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

然后在其中一个插件文件中，我通过一个函数和 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

4

您应该使用 jquery 对象来包装您的脚本，jQuery(document).ready(function($)但您也需要 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>';
于 2013-08-12T01:49:50.800 回答
1

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

例子 ： 

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

我希望我是对的，因为我遇到了同样的问题，这样做并解决了。:)

于 2014-05-20T15:04:03.097 回答