如何防止WordPress生成内联样式的CSS?

5vf7fwbs  于 5个月前  发布在  WordPress
关注(0)|答案(2)|浏览(56)

我有一个WordPress生成图像元素的问题。当我放置一个图像时没有问题,但是当我需要该图像作为链接时,它会添加'width:0!important'作为内联样式。有没有办法防止这种情况发生,或者至少是!important部分可以防止我在CSS文件中覆盖它?
下面是生成的代码:
无链接:

<figure class="aligncenter size-large">
    <img decoding="async" width="1024" height="676" src="IMGSRC" alt="IMGALT" class="wp-image-55" srcset="IMGSRCSET" sizes="(max-width: 1024px) 100vw, 1024px">
    <figcaption class="wp-element-caption">IMAGECAPTION</figcaption>
</figure>

字符串
链接:

<figure class="aligncenter size-large">
   <a href="LINK">
       <img decoding="async" width="1024" height="676" src="IMGSRC" alt="IMGALT" class="wp-image-55" srcset="IMGSRCSET" sizes="(max-width: 1024px) 100vw, 1024px" style="width: 0px !important;">   
   </a>
   <figcaption class="wp-element-caption">IMAGECAPTION</figcaption>
</figure>


这个问题是给我的问题,在后页,但也使用插件的广告管理在每一个其他网页的网站,每次可湿性粉剂必须生成代码的图像内的一个锚标签。
我试图寻找有同样问题的人,但我找到的所有解决方案都是针对没有!重要部分的内联代码。

osh3o9ms

osh3o9ms1#

我怀疑有一些插件或代码在某处插入width: 0px !important;,应该被删除。CTRL + F的代码基地,为位,看看是否有任何弹出,删除或禁用。
或者,你可以用render_block钩子拦截所有的图像块,并像这样替换内联样式(除非内联样式是在客户端添加的):

// Define a function to remove inline styles from the image tag within an image block
function remove_inline_styles_from_image_block($block_content, $block) {
    // Check if the block is an image block
    if ($block['blockName'] === 'core/image') {
        // Remove the 'style' attribute from the <img> tag
        $block_content = str_replace('width: 0px !important;', '', $block_content);
    }

    return $block_content;
}

// Add a filter to apply the function to the block output
add_filter('render_block', 'remove_inline_styles_from_image_block', 10, 2);

字符串
请谨慎使用,因为需要解析的图像块越多,它的性能就越密集。
希望能帮上忙。

pgpifvop

pgpifvop2#

您可以尝试使用CSS来覆盖!important规则。尽管覆盖!important声明通常很棘手,但有时可以使用更具体的CSS选择器或将!important添加到您自己的CSS中来覆盖内联样式。

figure a img {
  width: auto !important;
}

字符串
此CSS规则针对<img>元素,特别是当它位于<figure>元素内任何位置的锚标记(<a>)内的任何位置时。它试图覆盖内联样式设置的宽度。然而,此方法的有效性可能会因CSS选择器的特定性和样式应用的顺序而异。

相关问题