WordPress functions.php引入jQuery致JS功能失效求助

问题根源 #

1. 你直接在函数外裸写外部jQuery加载代码，和WordPress自带的jQuery冲突。WordPress默认自带jQuery并启用noConflict()模式，避免和其他JS库冲突，额外加载的jQuery会破坏这个机制，导致依赖默认jQuery的ACF Datepicker、后台下拉菜单等功能全部失效。
2. 加载Slick轮播时没有声明依赖jQuery，可能导致Slick在jQuery之前加载，引发报错。
3. 外部JS直接写在钩子函数外，加载时机不符合WordPress的规范，容易引发加载顺序问题。

修复步骤 #

1. 移除冲突的外部jQuery代码

删掉这两行全局加载的jQuery代码：

wp_register_script('x', 'https://code.jquery.com/jquery-3.6.3.min.js', null, null, true );
wp_enqueue_script('x');

2. （可选）替换WordPress默认jQuery版本（如果确实需要更高版本）

如果必须使用指定版本的jQuery，不要直接重复加载，而是替换默认的，添加以下函数：

function replace_default_jquery() {
    wp_deregister_script('jquery');
    // 注册指定版本的jQuery，保留noConflict兼容模式
    wp_register_script('jquery', 'https://code.jquery.com/jquery-3.6.3.min.js', array(), '3.6.3', true);
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'replace_default_jquery');

提示：后台尽量使用WordPress默认jQuery版本，避免兼容性问题，如果需要后台也替换，再加一个add_action('admin_enqueue_scripts', 'replace_default_jquery');。

3. 修复Slick的依赖声明

把Slick的加载代码移到wp_enqueue_scripts钩子的函数里（比如Load_CSS），并声明依赖jquery，确保加载顺序正确：

wp_register_script( 'Slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array('jquery'), '1.8.1', true );
wp_enqueue_script('Slick');

完整修复后的代码示例 #

<?php
function Load_CSS() {
    // 加载样式
    wp_register_style('main', get_template_directory_uri() . '/css/main.css', array (), false, 'all');
    wp_enqueue_style('main');
    
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Lora&family=Roboto:wght@900&display=swap',array(), null );                                
    wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v6.1.1/css/all.css',array(), null );

    // 加载自定义脚本，依赖jQuery
    wp_register_script('script', get_template_directory_uri() . '/js/script.js', array('jquery'),'1.0.0', true);
    wp_enqueue_script('script');

    // 加载Slick，声明依赖jQuery
    wp_register_script( 'Slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array('jquery'), '1.8.1', true );
    wp_enqueue_script('Slick');
}
add_action('wp_enqueue_scripts','Load_CSS');

// 可选：替换默认jQuery版本
function replace_default_jquery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'https://code.jquery.com/jquery-3.6.3.min.js', array(), '3.6.3', true);
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'replace_default_jquery');

额外提示 #

如果没有特殊需求，建议直接使用WordPress自带的jQuery版本，兼容性最好，不会引发这类冲突。

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