WordPress移除jquery.min.js后手动引入主题JS报jQuery未定义如何解决

报错核心原因：你虽然移除了jQuery库的加载，但主题目录下的scripts.js文件本身编写时用了jQuery语法，文件开头就调用了jQuery对象，没有jQuery库的情况下第一行就会触发引用错误，且你要求不能使用wp_deregister_script方法，按以下步骤修复即可：

1. 定位报错根源 #

打开主题路径下的/wp-content/themes/mytema/js/scripts.js文件，查看文件起始部分的代码，绝大多数WordPress主题的JS都会在最外层包裹jQuery标准的DOM就绪封装，类似下面的写法：

jQuery(document).ready(function($) {
    // 主题所有交互逻辑都写在这个闭包内
})
// 或者是jQuery简写形式
$(function() {
    // 交互逻辑
})

这行就是控制台报错指向的第1行代码，因为没有提前加载jQuery，浏览器识别不到jQuery这个全局对象会直接抛错。

2. 修复方案（完全适配无jQuery场景） #

既然你明确当前站点无其他jQuery依赖需求，直接把JS文件内的jQuery语法全部改写为原生JavaScript即可，不需要额外引入任何库，常见语法替换对照：

• 外层DOM就绪封装替换：把jQuery的ready监听替换为原生的DOM加载完成监听

  // 替换掉原来的jQuery开头封装，所有内部逻辑移到这个原生监听里
  document.addEventListener('DOMContentLoaded', function() {
    // 原有业务逻辑放这里，逐行替换jQuery写法
  })
  

• 元素选择器替换：
  • 单元素选择：$('#xxx')/$('.xxx')/$('div') 替换为 document.querySelector('#xxx')/document.querySelector('.xxx')/document.querySelector('div')
  • 多元素选择：$('.item') 替换为 document.querySelectorAll('.item')，返回的节点列表可以直接用forEach遍历操作
• 事件绑定替换：$dom.on('click', callback) 替换为 dom.addEventListener('click', callback)
• 类名操作替换：$dom.addClass('active')/removeClass('active')/toggleClass('active') 替换为 dom.classList.add('active')/dom.classList.remove('active')/dom.classList.toggle('active')
• 样式操作替换：$dom.css('color', 'red') 替换为 dom.style.color = 'red'

3. 引入位置优化 #

你手动引入scripts.js的代码不要放在HTML的<head>标签内，挪到</body>闭合标签之前（页面最底部）引入，不需要加额外属性，等DOM结构渲染完成后再加载JS，能避免额外的DOM节点找不到的问题。

改完之后清理浏览器缓存、站点静态缓存刷新页面，控制台就不会再有相关报错，JS功能可以正常运行。

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