WordPress后台：输入字段变更时为UPDATE按钮添加类的实现方案

核心思路 #

通过监听后台页面编辑表单中所有字段的变更事件，给「UPDATE」按钮（ID为publish）添加自定义类，再通过CSS实现颜色变化或脉动动画，让编辑人员直观感知需要保存更改。

步骤1：注册后台脚本与样式 #

在主题的functions.php文件中添加以下代码，仅在页面编辑页面加载自定义JS和CSS：

add_action('admin_enqueue_scripts', 'custom_admin_save_reminder');
function custom_admin_save_reminder() {
    // 仅在页面编辑界面加载
    $current_screen = get_current_screen();
    if ($current_screen->base !== 'post' || $current_screen->post_type !== 'page') {
        return;
    }

    // 加载自定义JS文件（路径根据主题结构调整）
    wp_enqueue_script(
        'save-reminder-js',
        get_stylesheet_directory_uri() . '/js/save-reminder.js',
        ['jquery'],
        '1.0.0',
        true
    );

    // 加载自定义CSS文件（路径根据主题结构调整）
    wp_enqueue_style(
        'save-reminder-css',
        get_stylesheet_directory_uri() . '/css/save-reminder.css',
        [],
        '1.0.0'
    );
}

步骤2：编写字段变更监听JS #

在主题目录下创建js/save-reminder.js文件，添加以下代码监听所有表单字段的变化：

jQuery(document).ready(function($) {
    const publishButton = $('#publish');
    // 覆盖所有核心字段及自定义字段
    const formFields = $('#post input, #post textarea, #post select, #post .wp-editor-area, .acf-field input, .acf-field textarea, .acf-field select');

    // 页面加载时移除提示类
    publishButton.removeClass('needs-save');

    // 监听字段的输入、变更事件
    formFields.on('change keyup input', function() {
        publishButton.addClass('needs-save');
    });

    // 点击保存按钮后延迟移除提示类（确保保存请求完成）
    publishButton.on('click', function() {
        setTimeout(() => {
            publishButton.removeClass('needs-save');
        }, 1200);
    });
});

注：如果使用了其他自定义字段插件，可根据插件的字段容器类名扩展formFields的选择器，确保所有可编辑字段都被监听。

步骤3：编写视觉提示CSS #

在主题目录下创建css/save-reminder.css文件，添加以下样式实现高亮和脉动效果：

/* 基础高亮样式：替换按钮默认颜色 */
#publish.needs-save {
    background-color: #e63946 !important;
    border-color: #e63946 !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

/* 脉动动画：增强视觉提醒 */
@keyframes saveReminderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(230, 57, 70, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
    }
}

#publish.needs-save {
    animation: saveReminderPulse 2s infinite;
}

注意事项 #

• 如果你使用的是子主题，务必使用get_stylesheet_directory_uri()而非get_template_directory_uri()，确保资源路径正确。
• 若按钮样式未生效，可检查CSS选择器的优先级，必要时增加!important或调整选择器 specificity。

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