新安装WordPress 5.8用Twenty Twentyone主题前端未加载Jquery怎么办

成因 #

• Twenty Twentyone主题默认没有引入核心jQuery：WordPress核心虽然内置jQuery资源，但不会自动在前端全局加载，需要主题或插件通过官方挂载逻辑主动引入才会输出到页面
• 代码执行时机早于jQuery加载：直接写在header.php中的jQuery代码会在页面资源加载完成前执行，即使后续有jQuery引入，也会先触发未定义报错
• 语法适配问题：WordPress内置jQuery默认开启noConflict模式，全局调用别名是jQuery（首字母大写），直接写小写jquery或者用$未做别名适配也会触发报错
• 资源被主动卸载：优化类插件或自定义代码可能通过wp_deregister_script方法移除了核心jQuery的挂载逻辑，导致资源没有输出

解决方法 #

方法1：通过官方钩子引入核心jQuery #

在当前主题的functions.php文件中添加以下代码，通过WordPress官方的资源队列机制加载jQuery，确保加载顺序合规：

function custom_load_core_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'custom_load_core_jquery');

方法2：正确编写jQuery代码逻辑 #

所有自定义jQuery代码需要适配noConflict模式，并且确保在DOM加载完成后执行，推荐写法如下：

jQuery(document).ready(function($) {
    // 该作用域内可以正常使用$作为jQuery别名
    // 你的业务逻辑写在这里
});

如果是独立的JS文件，引入时声明jQuery为依赖，系统会自动优先加载jQuery：

function custom_enqueue_custom_js() {
    wp_enqueue_script(
        'custom-business-js',
        get_template_directory_uri() . '/js/custom.js', // 替换为你的JS文件实际路径
        array('jquery'), // 声明jQuery为依赖项
        '1.0.0',
        true // 建议加载到页脚，避免阻塞页面渲染
    );
}
add_action('wp_enqueue_scripts', 'custom_enqueue_custom_js');

方法3：排查冲突项 #

• 检查已安装的性能优化、速度优化类插件，确认是否存在「移除默认jQuery」「禁用核心jQuery」类配置，关闭对应配置即可
• 排查主题functions.php、自定义代码片段中是否存在wp_deregister_script('jquery')相关逻辑，删除对应代码即可

内容的提问来源于stack exchange，提问作者Infoconic Technologies