如何永久修改WordPress插件并添加按钮点击JavaScript函数

不要直接修改原插件的代码——这是更新后丢失的核心原因。以下是三种永久添加自定义JS函数的可靠方案：

方案一：通过子主题加载自定义JS #

子主题独立于原主题和插件，不会被更新影响：

1. 在你的子主题目录下创建js文件夹，新建custom-plugin-click.js文件，写入自定义逻辑：

jQuery(document).ready(function($) {
    // 用事件委托兼容动态生成的按钮，替换成插件按钮的实际选择器
    $(document).on('click', '#target-plugin-button', function(e) {
        // 你的自定义函数逻辑
        console.log('插件按钮被点击，执行永久绑定的函数');
        // 示例：阻止默认行为（如果需要）
        // e.preventDefault();
    });
});

2. 打开子主题的functions.php，添加加载脚本的钩子：

function load_custom_plugin_click_script() {
    // 优先级设为100，确保在原插件脚本之后加载
    wp_enqueue_script(
        'custom-plugin-click',
        get_stylesheet_directory_uri() . '/js/custom-plugin-click.js',
        array('jquery'), // 依赖jQuery，按需调整
        '1.0',
        true // 放在页面底部加载，提升性能
    );
}
add_action('wp_enqueue_scripts', 'load_custom_plugin_click_script', 100);

方案二：创建独立的自定义插件 #

如果不想依赖主题，这个方案更通用：

1. 在wp-content/plugins/目录下新建custom-plugin-js-enhance文件夹，创建主文件custom-plugin-js-enhance.php：

<?php
/**
 * Plugin Name: 插件JS增强工具
 * Description: 为目标插件按钮绑定永久点击事件
 * Version: 1.0
 */

function enqueue_plugin_enhance_script() {
    wp_enqueue_script(
        'plugin-enhance-script',
        plugin_dir_url(__FILE__) . '/js/enhance.js',
        array('jquery'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_plugin_enhance_script', 100);

2. 在该文件夹下创建js目录，新建enhance.js，写入和方案一相同的点击事件代码。
3. 到WordPress后台激活这个自定义插件即可。

方案三：自定义HTML区块/主题自定义器（适合单页面场景） #

如果按钮只在特定页面出现，可直接在页面添加自定义HTML区块：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 事件委托处理动态按钮
    document.body.addEventListener('click', function(e) {
        if (e.target.id === 'target-plugin-button') {
            // 自定义逻辑
            alert('永久绑定的点击事件触发');
        }
    });
});
</script>

部分主题的自定义器提供「自定义JS」选项，也可在这里添加代码，全局生效。

关键注意事项 #

• 务必用事件委托（$(document).on或document.body.addEventListener）绑定事件，避免因按钮动态生成导致绑定失效。
• 确认目标按钮的选择器（ID、类名）准确，可通过浏览器开发者工具查看。
• 调整脚本加载优先级（钩子的第三个参数），确保自定义JS在原插件脚本之后执行。

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