移除WordPress主题中JavaScript实现的粒子动画

问题背景 #

使用WordPress主题时，头部的粒子动画通过JavaScript实现，直接修改父主题代码会被更新覆盖，尝试removeEventListener因原事件是匿名函数失败，需要子主题层面的永久解决方案。

解决方案：子主题加载自定义脚本终止动画 #

以下方案无需修改父主题代码，所有操作在子主题中完成，主题更新后依然有效。

步骤1：在子主题functions.php中添加脚本加载逻辑

将以下代码添加到子主题的functions.php文件中，确保自定义脚本在原动画脚本之后加载：

function disable_particle_animation() {
    wp_enqueue_script(
        'disable-particles',
        get_stylesheet_directory_uri() . '/js/disable-particles.js',
        array(),
        wp_get_theme()->get('Version'),
        true // 页脚加载，保证原动画脚本已执行
    );
}
add_action('wp_enqueue_scripts', 'disable_particle_animation', 999); // 高优先级确保最后加载

步骤2：创建自定义JS文件终止动画

在子主题目录下新建js文件夹，创建disable-particles.js文件，写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('canvas');
    if (!canvas) return;

    // 清空粒子数组，阻止粒子绘制
    if (typeof particlesArray !== 'undefined') {
        particlesArray.length = 0;
    }

    // 替换canvas元素，移除原绑定的所有匿名事件监听
    const newCanvas = canvas.cloneNode(true);
    canvas.parentNode.replaceChild(newCanvas, canvas);

    // 彻底隐藏canvas，消除动画显示
    newCanvas.style.display = 'none';
});

方案原理 #

1. 子主题加载脚本：通过子主题加载的脚本不会被父主题更新覆盖，保证修改永久有效。
2. 替换canvas元素：原动画的点击、鼠标移动事件是匿名函数，无法直接用removeEventListener移除，替换canvas相当于重置了元素，原事件监听失效。
3. 清空粒子数组：阻止原动画逻辑中的粒子绘制，即使动画循环未完全终止，也不会有粒子显示。
4. 隐藏canvas：直接让动画元素不可见，彻底解决视觉效果问题。

备选方案：取消原动画脚本加载（如果能找到脚本handle） #

若能通过页面源码或父主题代码找到原粒子动画脚本的注册handle，可以直接在子主题中取消加载：

function dequeue_particle_script() {
    wp_dequeue_script('particle-animation-handle'); // 替换为原脚本的实际handle
    wp_deregister_script('particle-animation-handle');
}
add_action('wp_enqueue_scripts', 'dequeue_particle_script', 999);

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