如何阻止WordPress为带链接图片添加width:0!important内联样式？

直接插入图片时显示正常，但为图片添加链接后，WordPress会自动为<img>标签注入style="width: 0px !important;"内联样式，常规CSS规则无法覆盖该样式，此问题不仅影响文章页面的图片，还会波及广告管理插件生成的锚标签内的图片。

以下是几种可行的解决方法：

方案1：通过JavaScript清除错误样式 #

利用JS直接移除内联的width:0 !important样式，确保图片正常显示：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配所有被a标签包裹的wp-image类图片
  const linkedImages = document.querySelectorAll('a img.wp-image');
  linkedImages.forEach(img => {
    // 移除width属性的!important样式
    img.style.removeProperty('width');
    // 若无需保留其他内联样式，可直接清空：
    // img.removeAttribute('style');
  });
});

将这段代码添加到主题的footer.php文件</body>标签前，或者通过wp_add_inline_script函数挂载到主题的functions.php中。

方案2：通过WordPress钩子拦截错误属性 #

使用wp_get_attachment_image_attributes钩子，在图片生成阶段就移除错误的样式属性：

add_filter('wp_get_attachment_image_attributes', 'fix_linked_image_width', 10, 3);
function fix_linked_image_width($attr, $attachment, $size) {
  // 检查是否存在错误的width样式
  if (isset($attr['style']) && strpos($attr['style'], 'width: 0px !important') !== false) {
    // 直接移除整个style属性
    unset($attr['style']);
    // 若需保留其他样式，可替换掉错误部分：
    // $attr['style'] = str_replace('width: 0px !important;', '', $attr['style']);
  }
  return $attr;
}

将代码粘贴到当前主题的functions.php文件中，WordPress生成图片时就不会再添加这个错误样式。

方案3：针对广告插件的专属处理 #

如果广告插件生成的图片也受影响，且上述PHP钩子未覆盖到，可针对广告图片的特定类（比如插件定义的ad-image类）单独处理：

document.addEventListener('DOMContentLoaded', function() {
  const adImages = document.querySelectorAll('a img.ad-image');
  adImages.forEach(img => {
    img.style.removeProperty('width');
  });
});

方案4：CSS强制覆盖（不推荐） #

虽然不建议，但极端情况下可通过更高优先级的CSS选择器+!important强制覆盖：

figure.aligncenter a img.wp-image {
  width: 100% !important;
  // 针对特定尺寸的图片可单独设置，比如size-large：
  // width: 1024px !important;
}

注意：此方法可能破坏图片的响应式布局，仅作为临时应急方案。

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