无法理解如何在 WordPress 中正确排队 jQuery

Question

因此，按照建议，我将我的脚本排入 function.php 文件中，而不是像下面的示例那样排在头部：

function bok_scripts() {
    wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );
}
add_action( 'wp_enqueue_scripts', 'bok_scripts' );

问题是这个 JavaScript 将不起作用，除非我使用通常的方法将 jQuery 添加到头部：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

不过，我经常遇到的问题是 WordPress 使用 wp-admin/includes 目录中的 wp_head(); 自动加载 jQuery 的一个版本。因为 jQuery 加载了 2 倍，它破坏了一些代码。例如，以下将引发 'This is not a function ($)' 错误：

$(window).load(function(){
    $('#modal-notices').modal('show');
});

有谁知道如何克服这个问题？我已经尝试了很多东西，但所有似乎有效的方法都是从 wp-admin/includes 目录中删除 jQuery。但是，显然，这不是正确的解决方法。

Answer 1

您需要做的第一件事是将 jQuery 声明为脚本的依赖项，以便 WordPress 知道加载它。

要进行更改：

wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );

收件人：

wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) );

您面临的第二个问题是 jQuery 在无冲突模式下 WordPress 加载。这意味着全局“$”快捷方式不再可用。这里有更多信息：http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

要让您的脚本正常工作，请更改：

$(window).load(function(){
    $('#modal-notices').modal('show');
});

收件人：

(function($) {
    $(window).load(function(){
        $('#modal-notices').modal('show');
    });
})(jQuery);

最后一定要删除所有直接添加到 header/footer 而不是排队的 jQuery 脚本。

无法理解如何在 WordPress 中正确排队 jQuery

Having trouble understanding how to properly enqueue jQuery in WordPress

javascript

wordpress

jquery