Question

正如推荐的那样，我将我的脚本排入function.php文件中，而不是像以下示例那样在头部排队：

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

问题在于，除非我使用通常的方法将jQuery添加到头部，否则此JavaScript将无法运行：

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

我遇到的问题是，WordPress会使用wp-admin / includes目录中的wp_head();自动加载jQuery版本。因为jQuery加载了2x，所以它会破坏一些代码。例如，以下内容将抛出'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' ) );

你面临的第二个问题是WordPress中的jQuery在noConflict模式下加载。这意味着全局“$”快捷方式不再可用。以下是一些更多信息：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);

最后一定要删除你直接添加到页眉/页脚的任何jQuery脚本，而不是排队。

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

1 个答案: