wordpress 后台通知消息显示位置异常的解决方案：wordpress 插件中使用 `admin_notices` 钩子添加通知时，若消息渲染在 `

` 顶部而非主内容区（`.wp-body-content`），会导致样式错位、宽度异常和遮挡侧边栏。根本原因是钩子触发过早，此时 wordpress 主容器尚未生成。本文提供标准、可靠且符合 wp 编码规范的修复方案。

WordPress 的 admin_notices 动作钩子确实在 <body> 开始后、#wpwrap 和 .wp-body-content 容器创建前就被触发，因此直接输出的 <div class="notice"> 元素会脱离 WordPress 后台的标准布局流，表现为全宽显示、覆盖侧边栏、无内边距与对齐控制——正如截图中所示。

正确做法不是强行修改 CSS 或使用 JavaScript 移动 DOM，而是将通知包裹进 WordPress 官方推荐的语义化容器结构中。核心思路是：利用 admin_notices 触发时机，但将实际通知内容委托给一个延迟执行的、位于主内容上下文内的自定义钩子，并用 <div class="wrap"> 包裹，确保其融入 .wp-body-content 流程。

以下是优化后的完整实现（含安全加固与最佳实践）：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

<?php
/**
 * 输出后台通知消息（需配合 customer_admin_notices 钩子调用）
 */
function customer_admin_notice($message_type, $customer_nr = '') {
    // 使用 wp_kses_post() 防止 XSS（即使当前为纯文本，也应养成习惯）
    $message = '';
    $type_class = 'notice-success';

    switch ($message_type) {
        case 'customer_update_success':
            $message = 'Customer updated successfully.';
            break;
        case 'customer_new_success':
            $message = 'Customer added successfully.';
            break;
        case 'customer_delete_success':
            $message = sprintf('Customer with number %s has been deleted.', esc_html($customer_nr));
            break;
        case 'customer_delete_error':
            $message = sprintf('No customer with number %s was found.', esc_html($customer_nr));
            $type_class = 'notice-error';
            break;
        default:
            return; // 未知类型，不输出
    }
    ?>
    <div class="notice <?php echo esc_attr($type_class); ?> is-dismissible">
        <p><?php echo wp_kses_post($message); ?></p>
        <button type="button" class="notice-dismiss">
            <span class="screen-reader-text">Dismiss this notice.</span>
        </button>
    </div>
    <?php
}

/**
 * 将通知渲染包裹在 .wrap 容器中，确保位于主内容区域
 */
function customer_admin_notice_wrapper() {
    // 仅在 admin_notices 已触发且存在有效通知时才输出 wrap 容器
    // 此处不直接输出内容，而是触发子钩子，便于扩展
    echo '<div class="wrap">';
    do_action('customer_admin_notices');
    echo '</div>';
}

// ✅ 关键：先注册通知函数到自定义钩子
add_action('customer_admin_notices', 'customer_admin_notice');

// ✅ 关键：在 admin_notices 中输出 wrap 容器（此时页面结构已就绪）
add_action('admin_notices', 'customer_admin_notice_wrapper');

// ✅ 可选：添加 JS 实现“关闭”功能（WordPress 默认不自动处理 is-dismissible）
function customer_enqueue_notice_script() {
    if (is_admin()) {
        ?>
        <script>
        document.addEventListener('click', function(e) {
            if (e.target.closest('.notice-dismiss')) {
                e.target.closest('.notice').style.display = 'none';
            }
        });
        </script>
        <?php
    }
}
add_action('admin_footer', 'customer_enqueue_notice_script');
?>

重要说明与注意事项：

• 不要直接在 admin_notices 中输出 .wrap：customer_admin_notice_wrapper() 必须挂载在 admin_notices 上，但它本身只负责输出容器并触发子钩子；真正的通知逻辑由 customer_admin_notice() 在 customer_admin_notices 钩子中执行——这种解耦设计既保证了 DOM 位置正确，又保留了扩展性。
• 务必转义动态内容：示例中使用 esc_html() 处理 $customer_nr，用 wp_kses_post() 渲染消息，杜绝 XSS 漏洞。
• is-dismissible 需要手动支持：WordPress 不会自动绑定关闭逻辑，需自行添加轻量级 JS（如上所示），或集成 wp_add_inline_script() 更规范地注入。
• 避免重复渲染：该方案天然防止多次调用 customer_admin_notice_wrapper() 导致嵌套 .wrap；如需多组通知，可复用同一钩子机制（例如 do_action('customer_admin_notices', $context) 并在回调中判断上下文）。

遵循此模式，你的通知将严格遵循 WordPress 后台 UI 规范：居中对齐、响应式宽度、与列表/表单等元素垂直间距一致，并完全兼容 Gutenberg 及经典编辑器环境。