javascript - 在 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

$ not being defined 的错误是因为jQuery在WP中是以无冲突模式加载的。

替换:

$(document).ready(function(){

与:

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

也只是为了确保您的 PHP 位于一个函数内，带有入队脚本 Hook 。

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