jQuery 和 Wordpress - 脚本不工作答案

【问题标题】：jQuery and Wordpress - Scripts not workingjQuery 和 Wordpress - 脚本不工作
【发布时间】：2013-08-12 23:52:12
【问题描述】：

我正在尝试为我正在创建的 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 中的所有内容，它将起作用。

【问题讨论】：

有什么问题？脚本根本没有加载，还是加载了但不工作？
脚本已加载，所以我可以在源代码中看到它们，但它们不起作用
顺便说一句，我正在运行 Genesis 框架。
你可以使用?>...<?，而不是echo，然后语法荧光笔也可以为html和javascript工作
您遇到什么错误？您可以链接到实时页面吗？

标签： jquery wordpress

【解决方案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>';

【讨论】：

我也试过了，但仍然没有结果。我很确定这与 Genesis 框架有关。

【解决方案2】：

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

示例：

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

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

【讨论】：