WordPress自定义HTML预览正常发布后样式错乱如何修复

• 插入的代码是完整HTML文档结构，自带<html>、<head>、<body>标签，而WordPress正式页面本身已经输出了一套完整的HTML文档结构。预览模式下WordPress用独立iframe隔离渲染自定义代码，结构冲突不会显现；正式发布时，浏览器会自动修正嵌套的非法HTML结构，剔除多余的全局标签，写在自定义<head>内的样式块大概率会被移位，甚至被WordPress内容过滤器拦截，导致样式失效。
• 类名冲突：代码中使用的.container是WordPress生态下绝大多数主题、页面构建器都会全局定义的通用类名，主题自带的.container样式（通常为静态定位、固定最大宽度、左右自动外边距）会覆盖自定义的相对定位规则。预览环境不会加载主题全局样式，因此显示正常，正式页加载主题样式后布局直接错乱。
• 兼容问题：代码中使用的<center>是已被W3C废弃的HTML标签，部分主题的样式重置规则会给该标签添加额外布局属性，进一步打乱显示效果。

1. 删除自定义代码中所有多余的全局文档标签，仅保留需要渲染的内容块与样式代码，不要在WordPress自定义HTML区块内写入<html>、<head>、<body>标签。
2. 将通用类名替换为全局唯一的自定义类名，从根源上避免和主题、插件的样式规则冲突。
3. 移除废弃的<center>标签，改用CSS text-align: center属性实现文本居中效果，同时给标题标签加基础边距重置，兼容不同主题的默认样式。
4. 若替换类名后仍有样式被覆盖，可给对应CSS规则添加!important标记提升优先级。

修复后可直接使用的代码如下：

<style>
.pizza-card-wrap {
  position: relative;
  font-family: Arial;
}
.pizza-card-tag {
  position: absolute;
  bottom: -27px;
  left: 38%;
  right: 38%;
  background-color: #ff6900;
  color: #fff;
  padding: 0 20px;
  text-align: center;
}
.pizza-card-tag h4 {
  margin: 8px 0;
}
</style>
<div class="pizza-card-wrap">
  <img src="https://images.pexels.com/photos/315755/pexels-photo-315755.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Pizza" style="width:100%;">
  <div class="pizza-card-tag">
    <h4>Pizza</h4>
  </div>
</div>

注：代码中的图片链接可替换为你上传到WordPress媒体库的对应图片地址，加载稳定性更高。

内容的提问来源于stack exchange，提问作者Heçkır 001