在wordpress中将内置jquery-ui脚本排入队列时出现问题

Question

我能够注册和排队我自己下载的jquery-ui插件，但控制台上到处都是关于它的错误。由于某些原因，我无法使用相同的方法加载jquery-ui-core。

控制台还抱怨我的$不是$(document).ready( function )初始jquery包装器的函数。即使wp在内核中内置了自己的jquery版本，我还是能理解这一点。

搜索文档可以看出，wp还包含大量jquery-ui脚本。所以我走了那条路，但他们没有被调用使用他们的句柄。

我做错了什么？

        wp_enqueue_script('jquery-core');
        //wp_register_script( 'jquery-core', get_template_directory_uri() . '/js/jquery.ui.core.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-core');
        //wp_register_script( 'jquery-draggable', get_template_directory_uri() . '/js/jquery.ui.draggable.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-draggable');
        //wp_register_script( 'jquery-droppable', get_template_directory_uri() . '/js/jquery.ui.droppable.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-droppable');
       // wp_register_script( 'jquery-mouse', get_template_directory_uri() . '/js/jquery.ui.mouse.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-mouse');
       // wp_register_script( 'jquery-sortable', get_template_directory_uri() . '/js/jquery.ui.sortable.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-sortable');
        //wp_register_script( 'jquery-widget', get_template_directory_uri() . '/js/jquery.ui.widget.min.js', array( 'jquery' ));
        wp_enqueue_script('jquery-ui-widget');

目前，我已经注释掉了我的register_script函数调用，当我添加enqueue_script以通过句柄调用它时，它确实起作用了，但是控制台抛给我关于这些文件(从jquery -ui下载)的错误，我认为它的bc jquery不能被识别，因此出现了关于$没有被定义的错误。

如果我首先使用wp_register_script调用脚本，它实际上会加载，但会抛出许多指向jquery-ui库的控制台错误。最后，最后一个错误实际上是我的代码指出$(...).accordion()；不是一个函数。我从一个jquery-ui演示中摘取了这段代码。我可以用jsfiddle对我的jquery-ui构建进行单元测试，它工作得很好。我没有手动调用那里的jquery-ui库，因为他们有一个下拉列表来选择它，但我放入的html和js演示代码。

有什么想法吗？

Answer 1

未定义$的错误是因为jQuery在WP中以无冲突模式加载。

替换：

$(document).ready(function(){

通过以下方式：

jQuery(document).ready(function($){

另外，为了确保您的PHP位于一个带有入队脚本钩子的函数中。

function wpse_load_js() {
   wp_enqueue_script('jquery-ui-core');
   wp_enqueue_script('jquery-ui-draggable');   
   wp_enqueue_script('jquery-ui-droppable');      
   wp_enqueue_script('jquery-ui-mouse');
   wp_enqueue_script('jquery-ui-sortable');
   wp_enqueue_script('jquery-ui-widget');
}
add_action( 'wp_enqueue_scripts', 'wpse_load_js' );