WordPress主题自定义JS不生效 DOM修改闪回如何解决

你遇到的脚本不生效、DOM修改后1秒内容复原是三类问题叠加导致的：

• 脚本挂载方式/文件名错误，导致前两种方案的代码根本没有正常执行
• 手写JS存在语法错误，直接打断逻辑运行
• 主题/插件存在异步渲染、片段刷新逻辑，你在初始DOM加载阶段做的样式修改，被后续运行的脚本覆盖重置

1. 修复functions.php脚本挂载问题 #

首先注意WordPress主题的函数文件名为functions.php，不是你写的function.php，文件名拼写错误会导致整段挂载代码完全不执行。另外你当前使用的主题名拼写应为Vantage，注意核对主题目录名避免路径错误。
正确的挂载代码请放到主题的functions.php文件末尾，设置高加载优先级确保代码正常加载：

add_action('wp_enqueue_scripts', 'custom_theme_enqueue_js', 999);
function custom_theme_enqueue_js() {
    wp_enqueue_script(
        'custom-site-js',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        '1.0.0',
        true
    );
}

注意：不要直接修改父主题的核心文件，所有自定义修改请放到子主题中，避免主题版本更新后自定义代码被覆盖。代码添加后，手动在主题目录下创建/js/custom.js文件，设置文件权限为可读，后续自定义JS代码全部写到这个文件里即可，不需要直接往页面内容里插script标签。

2. 修复JS代码语法与执行时机问题 #

你写的内联JS存在两个直接导致逻辑失效的错误：

• 设置visibility属性时属性名多打了尾部空格，写为"visibility "，浏览器无法识别带空格的属性名，对应样式设置完全不生效
• 代码执行时机过早，没有等待页面异步渲染、主题初始化逻辑完成就修改DOM，后续运行的主题脚本会直接把你改的样式重置
  另外你重复写了多段完全相同的DOM操作代码，没有做元素存在校验，一旦某个元素不存在会直接打断整段代码运行。
  修复后的代码直接放到刚才创建的custom.js中即可：

// 等待页面所有资源、异步片段加载完成后再执行逻辑
window.addEventListener('load', function() {
    // 先做元素存在校验，避免找不到元素时报错
    const productTitle = document.querySelector("#product-title-id");
    const offerWelcome = document.getElementById("no-welcome");
    const offerBlock = document.querySelector(".word-offerswelcomme");
    if (!productTitle || !offerWelcome || !offerBlock) return;

    console.log(productTitle.innerHTML);
    console.log(offerWelcome.innerHTML);

    // 抽离公共隐藏逻辑，方便重复调用
    const hideOffer = () => {
        offerBlock.style.setProperty("display", "none", "important");
        offerBlock.style.setProperty("visibility", "hidden", "important");
        offerWelcome.style.display = "none";
        offerWelcome.innerHTML = "";
    };

    // 首次执行隐藏
    hideOffer();

    // 监听WooCommerce商品片段刷新事件，每次异步刷新后重新执行隐藏
    jQuery(document.body).on('wc_fragments_refreshed updated_checkout', hideOffer);

    // 加轮询兜底，覆盖主题延迟初始化场景
    let checkTimes = 0;
    const checkTimer = setInterval(() => {
        hideOffer();
        checkTimes++;
        if (checkTimes >= 30) clearInterval(checkTimer);
    }, 100);

    // 原判断逻辑
    if (productTitle.innerHTML.includes("ltimate")) {
        console.log("Yes, it is included.");
        console.log(offerWelcome.innerHTML);
        // 判断生效后的自定义逻辑写在这里
    }
});

3. Simple Custom CSS and JS插件加载无效排查 #

如果用该插件加载代码不生效，优先检查两个设置：

• 自定义代码的发布状态必须是「已发布」，草稿状态的代码不会在前端输出
• 加载位置选择「页脚」，关闭插件自带的代码压缩、合并功能，避免和主题的优化功能冲突导致代码加载失败

优化提示：如果要彻底解决内容1秒闪现的问题，优先用CSS提前隐藏目标元素，比JS生效时机更早。把下面的代码加到主题自定义CSS中即可：

.word-offerswelcomme, #no-welcome {
    display: none !important;
    visibility: hidden !important;
}

如果后续逻辑需要显示对应元素，再用JS移除隐藏样式即可，从根源避免加载闪现问题。

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