WordPress添加datepicker点击无反应 报jQuery/$未定义如何解决

核心报错原因 #

你看到页面源码存在jQuery引入标签但控制台报Uncaught ReferenceError: jQuery is not defined/$ is not defined，本质是脚本加载顺序错乱、全局jQuery变量未正确挂载，和手动硬插脚本、不按WordPress规范加载资源有直接关系。

排查解决步骤 #

• 第一步：修正资源加载方式，不要手动往页脚硬写script/link标签
  WordPress有标准的资源加载API，手动插标签会完全绕开系统的依赖排序机制，很容易出现“脚本写在jQuery前面先执行”的问题。把你之前手动加到页脚的moment、daterangepicker的js和css代码全删掉，把下面代码加到当前主题的functions.php文件中，系统会自动按依赖顺序加载资源，保证jQuery最先加载，再加载moment、最后加载daterangepicker：

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'moment', 'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js', ['jquery'], 'latest', true );
    wp_enqueue_script( 'daterangepicker', 'https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js', ['jquery', 'moment'], 'latest', true );
    wp_enqueue_style( 'daterangepicker-style', 'https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css' );
} );

• 第二步：处理jQuery冲突问题
  你当前手动往主题目录加了jquery-3.5.1.min.js，很可能和WordPress自带的jQuery产生冲突，打断全局变量挂载。先删掉你手动硬加的jQuery引入代码，使用WordPress自带的jQuery即可——上面代码里声明依赖jquery时，系统会自动正确加载内置jQuery，不会出现重复加载、变量丢失的问题。
  验证方法：改完后刷新页面，打开浏览器控制台输入window.jQuery回车，如果返回函数内容而非undefined，说明jQuery已经正常全局挂载。
• 第三步：修正日期选择器初始化代码
  把你page-test.php里的初始化脚本替换成下面的写法，用WordPress jQuery兼容的闭包写法，既保证DOM加载完成后执行，又避免$变量冲突：

jQuery(function($) {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("已选择日期范围: " + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
  });
});

注意：<link>类型的CSS资源按规范应该放在页面<head>区域，不要塞到页脚脚本堆里，用上面的wp_enqueue_style方法会自动把CSS放到正确位置。

• 第四步：清缓存验证
  所有修改完成后，清空站点缓存插件缓存、浏览器本地缓存，再刷新测试页面，控制台不会再有jQuery未定义的报错，点击输入框即可正常弹出日期范围选择器。

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