WordPress中通过script.js引入多文件及该脚本失效问题排查

首先得说，你原来用document.write引入脚本的方式在WordPress里肯定会出问题——WordPress有自己的页面渲染流程，document.write在DOM加载完成后执行会直接覆盖页面内容，而且这种方式完全不符合WordPress的脚本管理规范，这就是为啥迁移后功能失效的核心原因。下面给你一套靠谱的解决方法：

第一步：抛弃document.write，改用WordPress官方脚本加载API #

WordPress推荐用wp_enqueue_script来管理所有脚本，它能帮你处理依赖关系、加载时机，还能避免和其他插件/主题的脚本冲突。

你需要在主题的functions.php文件里添加以下代码（注意替换成你实际的文件路径）：

function my_custom_scripts_loader() {
    // 1. 加载你的主脚本script.js，依赖jQuery（如果你的功能需要jQuery的话）
    wp_enqueue_script(
        'main-custom-script', // 脚本唯一标识
        get_template_directory_uri() . '/js/script.js', // 脚本文件的URL路径
        array('jquery'), // 依赖的脚本，比如jQuery
        '1.0', // 版本号，方便缓存更新
        true // 设为true表示在页脚加载，不阻塞页面渲染
    );

    // 2. 加载其他需要的JS文件，比如滑块、菜单相关的
    wp_enqueue_script(
        'slider-script',
        get_template_directory_uri() . '/js/slider.js',
        array('jquery'),
        '1.0',
        true
    );

    wp_enqueue_script(
        'menu-script',
        get_template_directory_uri() . '/js/menu.js',
        array('jquery'),
        '1.0',
        true
    );

    // 如果还要保留IE兼容逻辑，可以给IE单独加载兼容脚本
    wp_enqueue_script(
        'ie-compat-script',
        get_template_directory_uri() . '/js/ie-polyfill.js',
        array(),
        '1.0',
        true
    );
    // 只让IE10及以下加载这个脚本
    wp_script_add_data('ie-compat-script', 'conditional', 'lt IE 11');
}
// 挂载到WordPress的脚本加载钩子上
add_action('wp_enqueue_scripts', 'my_custom_scripts_loader');

第二步：修改你的script.js文件 #

把原来的include函数删掉，然后确保所有功能代码都在DOM加载完成后执行（避免操作还没渲染出来的DOM元素）：

// 保留你的IE判断函数（如果还需要的话）
function isIE() {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
};

// 等DOM完全加载后再执行功能代码
document.addEventListener('DOMContentLoaded', function() {
    // 这里放你原来的滑块初始化代码
    initSlider();
    // 菜单功能初始化代码
    initMenu();
    // Cookie相关的处理逻辑
    handleSiteCookies();
});

关键注意事项 #

• 路径要正确：get_template_directory_uri()是获取当前主题根目录的URL，如果用的是子主题，换成get_stylesheet_directory_uri()。
• 依赖要明确：如果你的滑块/菜单脚本依赖jQuery，一定要在array('jquery')里声明，WordPress会自动先加载jQuery。
• 清除缓存：修改后记得清一下WordPress缓存和浏览器缓存，避免旧代码干扰。
• 排查报错：如果还是不行，打开浏览器控制台（F12）看有没有404错误（路径错了）或者JS语法错误，针对性调整。

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