使用WordPress子主题修改后台：自定义元素与JS失效问题排查

核心问题分析 #

你当前使用的wp_enqueue_scripts钩子仅针对前端前台页面加载资源，后台管理页面需要使用admin_enqueue_scripts钩子，这是脚本无法在后台运行的根本原因。

修正后的PHP代码（子主题functions.php中） #

add_action( 'admin_enqueue_scripts', 'multi_child_admin_assets' );
function multi_child_admin_assets() {
    // 加载后台自定义样式（用于修改红框区域显示）
    wp_enqueue_style( 'admin-custom-style', get_stylesheet_directory_uri() . '/admin/custom-style.css' );
    // 加载后台自定义脚本（用于复选框监听）
    wp_enqueue_script( 'admin-custom-script', get_stylesheet_directory_uri() . '/admin/script.js', array( 'jquery' ), '', true );
}

红框区域样式自定义 #

在子主题的admin目录下创建custom-style.css文件，根据后台页面实际DOM结构编写样式（示例）：

/* 替换为红框区域实际的CSS选择器，比如元素ID或类名 */
#target-red-box-area {
    background: #fef5f5;
    border-left: 4px solid #dc3232;
    padding: 12px;
    margin: 10px 0;
}

绿框复选框监听事件（修正后的JS代码） #

修改子主题admin/script.js内容，确保选择器匹配后台绿框内的复选框：

jQuery(document).ready(function ($) {
    console.log('后台脚本已加载');
    // 替换为绿框内复选框实际的CSS选择器
    $('.green-frame-checkbox').on('change', function() {
        const isChecked = $(this).is(':checked');
        console.log(isChecked ? '复选框已勾选' : '复选框已取消勾选');
        // 在这里添加勾选/取消后的业务逻辑
    });
});

注意事项 #

1. 确认子主题目录下已创建admin文件夹，且script.js、custom-style.css文件路径正确
2. 通过浏览器开发者工具（F12）的「控制台」面板查看console.log输出，验证脚本是否成功加载
3. 若后台元素是动态生成的，需改用事件委托（比如$(document).on('change', '.green-frame-checkbox', function(){...})）

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