WordPress更新后自定义JS失效：Uncaught TypeError: $ is not a function

兄弟，这个问题我太熟了！你遇到的Uncaught TypeError: $ is not a function本质是WordPress默认启用了jQuery的noConflict模式——也就是说，jQuery会主动放弃$这个常用简写别名，防止和其他JavaScript库（比如Prototype、MooTools）产生命名冲突。

之前你的网站可能有主题或插件帮你全局映射了$到jQuery，但升级后这个映射逻辑失效了，导致自定义JS里的$找不到对应的函数。

给你几个靠谱的解决方案，按优先级推荐：

方案1：用自执行匿名函数包裹代码（最推荐，不用改内部代码） #

只需要把你的所有自定义JS代码套进一个自执行函数里，把jQuery作为参数传入并命名为$，这样函数内部的$就可以正常代表jQuery了：

(function($) {
  // 这里面的$完全等同于jQuery，放心用
  // 为页面应用效果
  var $headereffect = $('.hero-effect');
  $headereffect.waypoint(function (direction) {
    if (direction == 'down') {
      $headereffect.addClass('hero-effect-animation');
    } else {
      $headereffect.removeClass('hero-effect-animation');
    }
  }, { offset:'1px' });
  // 为默认页面页眉应用效果
  var $headereffect = $('#page-header');
  $headereffect.waypoint(function (direction) {
    if (direction == 'down') {
      $headereffect.addClass('hero-effect');
    } else {
      $headereffect.removeClass('hero-effect');
    }
  }, { offset:'1px' });
})(jQuery);

方案2：全局替换$为jQuery #

如果代码量不大，直接把所有$改成jQuery也能解决问题：

// 为页面应用效果
var $headereffect = jQuery('.hero-effect');
$headereffect.waypoint(function (direction) {
  if (direction == 'down') {
    $headereffect.addClass('hero-effect-animation');
  } else {
    $headereffect.removeClass('hero-effect-animation');
  }
}, { offset:'1px' });
// 为默认页面页眉应用效果
var $headereffect = jQuery('#page-header');
$headereffect.waypoint(function (direction) {
  if (direction == 'down') {
    $headereffect.addClass('hero-effect');
  } else {
    $headereffect.removeClass('hero-effect');
  }
}, { offset:'1px' });

方案3：通过WordPress脚本注册添加全局$映射 #

如果你的自定义JS是通过WordPress官方的wp_enqueue_script方法加载的，可以在注册脚本后添加一段inline代码，全局把$映射为jQuery：

// 先注册你的自定义脚本，依赖指定为jquery
wp_enqueue_script(
  'custom-hero-script',
  get_template_directory_uri() . '/js/your-custom-script.js',
  array('jquery'), // 声明依赖jQuery，确保jQuery先加载
  '1.0',
  true // 放在页面底部加载，优化性能
);
// 添加inline脚本，在你的自定义脚本前执行，映射$到jQuery
wp_add_inline_script('custom-hero-script', 'var $ = jQuery;', 'before');

额外提醒 #

别忘了确认waypoint插件是否正常加载——你的代码用到了.waypoint()方法，如果这个插件没正确引入，后续可能还会出现新的错误。不过根据你当前的报错信息，核心问题还是jQuery的别名问题，先解决这个再说。

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