在WordPress中引入jQuery遇阻：自定义插件提示jQuery变量未找到求解决

我来帮你排查并解决这个问题，你的代码里有几个关键错误导致了jQuery未被正确加载，下面一步步说明修正方案：

主要问题分析 #

1. 错误的jQuery引入地址
   你当前用的http://code.google.com/apis/libraries/devguide.html#jquery是Google Libraries的文档页面，不是实际的jQuery JS文件。而且WordPress本身已经内置了jQuery库，直接调用自带版本更安全，还能避免版本冲突。

2. 钩子使用时机错误
   register_form钩子是用来输出注册表单内容的，在这个钩子中加载脚本会太晚，导致你的JS代码执行时jQuery还没被加载完成。应该用专门针对登录/注册页面的login_enqueue_scripts钩子来加载脚本。

3. 脚本依赖关系未声明
   jQuery UI的组件（比如datepicker）依赖于jQuery和jQuery UI Core，但你没有在wp_enqueue_script中声明这些依赖，WordPress无法保证加载顺序，可能出现依赖未加载的情况。

4. CSS与JS版本不匹配
   你加载的是jQuery UI 1.8.2的CSS，但JS用的是1.12.1，版本不一致会导致样式错乱甚至功能异常。

修正后的完整代码 #

functions.php 修正版 #

<?php
function register_jqscripts() {
    // 加载WordPress内置的jQuery库
    wp_enqueue_script('jquery');
    
    // 加载jQuery UI Core，声明依赖于jQuery
    wp_enqueue_script(
        'jquery-ui-core',
        'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js',
        array('jquery'), // 依赖项
        '1.12.1', // 版本号
        true // 加载在</body>之前，优化加载速度
    );
    
    // 加载jQuery UI Datepicker，声明依赖于jQuery和jQuery UI Core
    wp_enqueue_script(
        'jquery-ui-datepicker',
        '', // 因为datepicker已经包含在jquery-ui.min.js里了，不需要额外URL
        array('jquery', 'jquery-ui-core'),
        '1.12.1',
        true
    );
    
    // 加载对应版本的jQuery UI CSS
    wp_enqueue_style(
        'jquery-ui-css',
        'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css',
        array(),
        '1.12.1'
    );
}

function add_datepicker(){ ?>
    <script type="text/javascript">
        // 用jQuery的ready方法确保DOM加载完成后执行
        jQuery(document).ready(function($){
            // 这里可以用$代替jQuery，因为回调函数里把jQuery别名设为$了
            $('#dob').datepicker({ dateFormat: 'dd-mm-yy' });
        });
    </script>
<?php }

// 用login_enqueue_scripts钩子加载脚本，针对登录/注册页面
add_action( 'login_enqueue_scripts', 'register_jqscripts' );
// register_form钩子用来输出Datepicker的JS代码没问题，此时脚本已加载
add_action('register_form','add_datepicker');
?>

额外说明 #

• 关于$的使用：WordPress内置的jQuery处于noConflict模式，默认不能直接用$，但可以在jQuery(document).ready(function($){...})的回调函数里使用$，这样更简洁。
• 脚本加载位置：wp_enqueue_script的最后一个参数设为true，会让脚本加载在页面底部</body>之前，既提升页面加载速度，也能减少DOM未就绪的问题。

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