WordPress自定义页面中jQuery函数调用报错：$ is not a function

这个问题在WordPress开发里真的是高频坑！你遇到的Uncaught TypeError: $ is not a function报错，根源很明确：WordPress默认会禁用jQuery的$别名，目的是避免和其他JavaScript库（比如Prototype）的$变量冲突，强制你使用完整的jQuery关键字来调用方法。

下面给你几种实用的解决办法，按需选择：

方法1：直接替换$为jQuery #

最简单的方式就是把你函数里所有的$都改成jQuery。比如你的LoadModal函数可以改成这样：

function LoadModal() {
  // 把原来的$(...)换成jQuery(...)
  jQuery('#your-modal-id').show();
  // 其他逻辑同理替换
}

这种方式适合代码量不大的情况，直接修改就能生效。

方法2：用自执行函数保留$别名 #

如果习惯了用$不想改，可以用自执行匿名函数把jQuery作为参数传递进去，这样函数内部就能正常用$了。注意要把函数挂载到全局作用域，不然HTML里的onclick找不到它：

// 把jQuery传入函数，参数名用$
(function($) {
  function LoadModal() {
    $('#your-modal-id').show();
    // 这里可以放心用$啦
  }
  // 把函数挂载到window，让全局能访问
  window.LoadModal = LoadModal;
})(jQuery);

方法3：通过WordPress脚本队列配置别名 #

如果你是用wp_enqueue_script加载自定义JS文件的，还可以在注册脚本的时候配置依赖，并启用$别名。在主题的functions.php里添加这段代码：

function enqueue_custom_jquery_script() {
  // 注册并加载自定义脚本，指定jQuery为依赖
  wp_enqueue_script(
    'custom-modal-script',
    get_template_directory_uri() . '/js/your-script-file.js',
    array('jquery'), // 声明依赖jQuery
    '1.0',
    true // 放在页脚加载，优化性能
  );
  // 输出内联脚本，启用jQuery的$别名
  wp_add_inline_script('custom-modal-script', 'jQuery.noConflict();');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_jquery_script');

这种方式更符合WordPress的开发规范，能确保脚本加载顺序正确。

额外建议：避免内联onclick事件 #

其实更推荐用jQuery的事件绑定来替代HTML里的内联onclick，这样代码更整洁，也能减少全局函数的问题：

(function($) {
  // 等待DOM加载完成
  $(document).ready(function() {
    // 给目标按钮绑定点击事件
    $('#your-button-id').on('click', function() {
      $('#your-modal-id').show();
    });
  });
})(jQuery);

这样就不用在HTML里写onclick="LoadModal()"了，直接通过JS绑定事件更专业。

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