如何解决WordPress移动端添加广告后缩略图尺寸异常问题

核心修复方法 #

1. 强制锁定缩略图及容器样式 #

给主题自定义CSS（外观→自定义→额外CSS）中添加以下代码，直接覆盖插件可能篡改的样式规则：

/* 修复广告后缩略图尺寸异常 */
.post-thumbnail {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  clear: both !important;
}
.post-thumbnail img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover; /* 保持图片比例，可选 */
}

注：如果你的缩略图容器class不是.post-thumbnail，请替换成主题实际使用的class（可通过浏览器审查元素查看）。

2. 隔离广告容器，避免布局干扰 #

进入Advanced Ads广告编辑页，给对应广告开启「自定义容器」，设置class为ad-isolated-box，然后添加以下CSS：

.ad-isolated-box {
  width: 100% !important;
  margin: 1.5em 0 !important;
  clear: both !important;
  float: none !important;
}

强制广告容器清除浮动，避免打乱后续元素的布局流。

3. 关闭插件自动样式注入 #

在Advanced Ads的「设置」→「样式」中，关闭「自动响应式调整」或「插件自带样式」选项，让主题的响应式规则主导页面布局。

4. 排查广告代码本身 #

如果是第三方广告代码（如谷歌广告），检查是否带有内联样式或JS脚本篡改父元素尺寸。可以把广告代码包裹在隔离容器中：

<div class="ad-clean-container">
  <!-- 你的第三方广告代码 -->
</div>

再添加样式：

.ad-clean-container {
  all: unset;
  display: block;
  width: 100%;
  margin: 1.5em 0;
}

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