jQuery 未在 Wordpress 中定义，但我的脚本已正确入队

Posted 2023-02-24

【中文标题】jQuery 未在 Wordpress 中定义，但我的脚本已正确入队

【英文标题】：jQuery is not defined in Wordpress, but my script is enqueued properly

【发布时间】：2015-03-30 15:36:24

【问题描述】：

我正在尝试将单独的 javascript 文件 mobile-menu.js 加载到我的 Wordpress 主题中。当我查看控制台时，它显示“未定义 jQuery”。但是，我知道我正确地将我的脚本文件排入队列。有任何想法吗？

html 文件：

<a href="#" id="menu-icon"></a> <!--this line wasn't here originally-->
    <div id="switchmenu"><!--switchmenu begin-->
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </div><!--switchmenu end-->

functions.php 文件：

function lapetitefrog_scripts() 
    wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() );
    wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true );

add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );

mobile-menu.js 文件：

 jQuery(document).ready(function($) 
    $('#menu-icon').click(function() 
            $('#switchmenu').slideToggle("fast");
    );
);

【问题讨论】：

试试这个：jQuery(document).ready(function() jQuery('#menu-icon').click(function() jQuery('#switchmenu').slideToggle("fast"); ); );

检查同一页面中是否包含两个 jquery 文件。

【参考方案1】：

错误jQuery is not defined 也可能出现在您的模板部分中嵌入的 jQuery 代码中。

当 jQuery 被添加到页面的 footer，而嵌入的脚本试图在页面的 middle 中执行时，就会发生这种情况。

如果是这种情况，您需要在带有wp_enqueue_script() 的标头中加载jQuery。 所以这里最后一个参数需要false：

wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js', array(), time(), false );

现在代码以正确的顺序执行，jQuery 将被定义。

另一种解决方案是将嵌入的脚本移动到一个 Javascript 文件中，该文件也将使用wp_enqueue_script() 添加到页面的页脚。这取决于你。

【参考方案2】：

在将脚本排入队列之前添加 wp_enqueue_script('jquery');。

【讨论】：

这成功了！太感谢了！我觉得这个问题很奇怪，因为我以前从来没有在我的脚本中添加那段代码……你知道为什么这次有必要吗？谢谢！

嗯，这就是我如何理解它在 wordpress codex 和支持论坛之后的工作方式，所以从一开始我就把它放在我的插件和主题中，从来没有质疑过。还有一些其他的，例如wp_print_scripts('editor');，如果你想使用wp_edit....我只是根据我有什么代码sn-ps来默认添加它们用于什么目的。抱歉，我无法详细说明。

@GavinSimpson functions.php 文件在哪里？在“wp-content/themes”里面对吗？如果是这样，我应该改变哪一个？有2个functions.php，一个在普通文件夹中，另一个在-child文件夹中。

使用您正在使用的主题文件夹中的那个，所以如果您使用的是子主题，请编辑themes/mytheme-child中的那个。

这个答案为我节省了数小时的工作时间。非常感谢。

【参考方案3】：

你可以试试：

首先让 Jquery 入队。

wp_enqueue_script('jquery'); 

然后在第三个参数中使用 JQuery 依赖 将后一个脚本排入队列，即array('jquery')，这是大多数人忘记的。

wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );

【讨论】：

我正在创建自己的插件，并在加载我的自定义 jquery 时出现此错误，因为我认为 jquery 库未加载到资源页面中，并且此解决方案对我没有帮助！实际上我需要在管理面板中加载 jquery ！你知道其他解决方案吗？

【参考方案4】：

Wordpress 默认自带 jQuery

// Adds jQuery
    add_action('init', 'childoftwentyeleven_down');

        function childoftwentyeleven_down() 

          // register your script location, dependencies and version
                wp_register_script('down',
                    get_stylesheet_directory_uri() . '/js/down.js',
                    array('jquery') );
           // enqueue the script
           wp_enqueue_script('down');

        

【参考方案5】：

首先确保 jquery 文件包含在标头中，并且您的文件需要 jQuery

wp_enqueue_script( 
        'lapetitefrog-mobile-menu', 
        get_template_directory_uri() . '/js/mobile-menu.js', 
        array('jquery'), 
        '1.0', 
        true 
);

其次，您应该启动您的 javascript 文件，例如：

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

或

// Use jQuery in place of $
jQuery(document).ready(function() 
    .....
);

【讨论】：

在 array() 中添加 'jquery' 似乎已经摆脱了 jQuery 未定义的问题。但是现在当我检查网络面板时，它甚至没有得到 mobile-menu.js 文件。有什么问题？

@nicatoby 签入页脚，在wp_enqueue_script() 中定义选项true

不，它不存在。