
wordpress 插件中使用 `admin_notices` 钩子输出提示消息时,若未包裹在 `.wrap` 容器内,会导致通知全宽显示、遮挡侧边栏或错位到 `
` 底部——根本原因是该钩子触发过早,早于 wordpress 主内容区 `#wpbody-content` 的渲染。在 WordPress 后台,标准的管理通知(如更新成功、设置保存提示)均被正确嵌入 .wrap > .notice 结构中,从而继承 CSS 布局规则(如最大宽度、内边距、与主内容区对齐)。而直接使用 add_action('admin_notices', ...) 输出
- 全屏宽度、无左右内边距;
- 位于左侧菜单(.wp-menu) 后方,视觉上被遮挡;
- DOM 中脱离 #wpbody-content,无法响应主题或插件的样式覆盖。
✅ 正确做法是:不直接在 admin_notices 中输出通知 HTML,而是通过自定义动作钩子 + 包裹容器进行可控注入。核心思路是利用 WordPress 的钩子执行顺序,在 admin_notices 触发时,仅“占位”并触发一个延迟动作,确保通知渲染在 .wrap 内部。
以下是推荐的重构方案:
'Customer updated successfully.',
'customer_new_success' => 'Customer added successfully.',
'customer_delete_success' => "Customer with number {$customer_nr} has been deleted.",
'customer_delete_error' => "No customer with number {$customer_nr} was found.",
];
$type_map = [
'customer_update_success' => 'success',
'customer_new_success' => 'success',
'customer_delete_success' => 'success',
'customer_delete_error' => 'error',
];
if (!isset($messages[$message_type])) {
return;
}
$notice_class = 'notice notice-' . ($type_map[$message_type] ?? 'info') . ' is-dismissible';
echo '';
echo '' . esc_html($messages[$message_type]) . '
千博企业网站管理系统标准版2013 Build0206
系统简介 千博企业建站系统是根据企业客户实际应用需求而提供的一套完整的中小企业网站应用解决方案,协助企业对公司产品进行更深层次的展示、推广。 千博企业建站系统主要面向企业进行产品展示、推广、企业形象展示而设计研发,系统界面简洁大方,管理操作非常简易,可高效构建企业、行业、律师、医院、政府信息门户网站、内部知识网站、信息门户等平台,并内置了专业的内容管理功能模块,可为浏览网站的顾客提供全方位的导购服
下载
';
echo '';
}
// 2. 创建包装器:确保通知被包裹在 .wrap 容器中
function customer_admin_notice_wrapper() {
// 检查当前是否处于有效管理页面(可选增强健壮性)
$screen = get_current_screen();
if (!$screen || !in_array($screen->base, ['toplevel_page_your-plugin', 'your-plugin_page_subpage'], true)) {
return;
}
echo '';
do_action('customer_admin_notices');
echo '';
}
// 3. 注册钩子:先挂载 wrapper 到 admin_notices,再让通知逻辑响应自定义钩子
add_action('admin_notices', 'customer_admin_notice_wrapper');
// 自定义钩子用于实际渲染通知(可安全传递参数)
add_action('customer_admin_notices', function() {
// 示例:从 $_GET 或 transient 获取通知类型(生产环境应避免全局变量直读)
if (isset($_GET['customer_notice'])) {
$type = sanitize_key($_GET['customer_notice']);
$nr = isset($_GET['customer_nr']) ? sanitize_text_field($_GET['customer_nr']) : '';
customer_render_admin_notice($type, $nr);
}
});
?>? 关键说明与最佳实践:
- ✅ 必须使用 .wrap 包裹:这是 WordPress 管理界面 CSS 布局的基础容器,所有 .notice 元素需在其内部才能获得正确样式和定位;
- ✅ 避免在 admin_notices 回调中直接 echo HTML:应改用 do_action() 分离“触发时机”与“渲染逻辑”,提升可维护性与兼容性;
- ✅ 始终转义输出:使用 esc_html()、esc_attr() 防止 XSS,尤其当消息含用户输入(如 $customer_nr);
- ✅ 通知状态建议用 transient 或 GET 参数传递:避免重复显示,支持刷新后消失(例如:set_transient('customer_notice', ['type' => 'success', 'msg' => '...'], MINUTE_IN_SECONDS));
- ⚠️ 不要依赖全局变量或未校验的 $_GET:生产代码中应结合 nonce 验证、权限检查(current_user_can())及来源页面判断。
通过以上结构,你的通知将严格遵循 WordPress UI 规范:左对齐、响应式宽度、与主内容区一致的边距,并能正常接收 .is-dismissible 的关闭交互及 notice-success/notice-error 的语义化样式。









