WordPress 页面中禁用 alert()，应改用语义化警告横幅（role="alert"）或原生 模态框；需确保 DOM 加载完成、正确移除元素、区分前后端提示机制，并验证无障碍与内存释放。
alert() 不能用在 WordPress 页面里做用户可见警告——它阻塞脚本、移动端常被拦截、样式不可控，且在 Gutenberg 编辑器或 SSR 渲染场景下可能直接报错 ReferenceError: alert is not defined。
WordPress 页面中插入可访问的警告横幅（role="alert"）
适合轻量提示，比如表单提交成功、库存预警、权限变更等不打断操作但需用户知晓的场景。
- 结构必须带语义：
<div role="alert" aria-live="assertive" class="wp-warning-banner">⚠️ 您的试用期还剩 2 天</div> - CSS 关键点：固定顶部 + 高 z-index + 可读配色，例如
background: #fff3cd; color: #856404; position: fixed; top: 0; width: 100%; z-index: 10000; - 关闭后必须调用
element.remove()，不能只设display: none——否则仍留在 DOM 中，干扰焦点流和读屏软件 - 若由 PHP 动态生成（如根据用户角色判断），确保只在需要时输出 HTML，避免空警告占位
在 Gutenberg 页面中安全嵌入 <dialog></dialog> 模态框
WordPress 前端页面支持原生 <dialog></dialog>，但需绕过编辑器对自定义 HTML 的过滤限制。
- 用
Custom HTML区块插入完整结构，例如：<button id="trigger-warn">查看风险说明</button><dialog id="risk-dialog"><p>此操作不可撤销</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11896" title="Amazon Keyword Research"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Amazon Keyword Research" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11896" title="Amazon Keyword Research">Amazon Keyword Research</a> <p>亚马逊关键词研究与市场机会分析（面向卖家）。获取自动补全建议（长尾关键词）、分析竞品格局、……</p> </div> <a href="/xiazai/skill11896" title="Amazon Keyword Research" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <button onclick="this.closest('dialog').close()">我已知晓</button></dialog> - 必须用 JS 触发显示：
document.getElementById('trigger-warn').addEventListener('click', () => document.getElementById('risk-dialog').showModal()) - 常见报错
Failed to execute 'showModal' on 'HTMLDialogElement'通常因元素未挂载到 DOM —— 解决方法是加setTimeout(() => dialog.showModal(), 0)或确保脚本在 DOMContentLoaded 后执行 - 不要在
functions.php里用wp_add_inline_script注入含showModal()的代码，除非明确绑定到用户手势（如按钮点击），否则 Safari 和部分安卓 WebView 会静默拒绝
避免在 WordPress 后台 PHP 提示中混用前端警告逻辑
WordPress 后台 PHP 钩子（如 admin_notices）输出的是服务器端 HTML，和前端 JS 警告不是一回事；误把 alert() 写进 PHP echo 会导致 JS 语法错误或空白页。
- 后台提示应走标准机制：
echo '<div class="notice notice-warning"><p>主题未配置</p></div>';，由 WordPress 自动加样式和可关闭逻辑 - 如果需要在后台触发前端警告（比如保存失败后弹窗），必须用
wp_add_inline_script注入一段仅在当前页面执行的 JS，并确保它依赖 jQuery 或原生事件委托，而非直接操作尚未渲染的 DOM 节点 - 别在
login_footer里写alert()—— 登录页无用户上下文，Chrome 会拦截，且破坏无障碍流程
真正难的不是“怎么让文字弹出来”，而是“谁该看到它”“它该持续多久”“关掉后是否真从内存释放”。很多 WordPress 插件的警告框关了还在 DOM 里挂着，既吃内存，又让键盘 Tab 焦点卡住，还被读屏软件反复播报——上线前务必检查 document.querySelectorAll('dialog[open]').length 和 document.querySelectorAll('[role="alert"]').length 是否归零。
