当你通过 WordPress 媒体上传器上传图像并将其插入编辑器时,它会带有宽度和高度属性。这些通常是可取的,因为它可以帮助浏览器在布局过程中为图像腾出适当的空间。但如果你想移除插入操作添加这些属性的功能,你可以将以下代码添加到你的 functions.php
文件或你自己的功能插件中
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
更新:这现在几乎肯定是个坏主意,因为 width
和 height
有助于 在加载图像时预留空间,即使在流体宽度的情况下也是如此。
对我来说,这似乎还会在我去将图像插入帖子时剥离标题。其他人也遇到这种情况吗?
是的,不幸的是我也遇到了同样的问题。
我最终删除了上面建议的代码,并切换到此处推荐的 CSS 解决方案:http://wordpress.stackexchange.com/a/37768/17599
Drew 你拯救了我的生命,谢谢
非常感谢您,先生!
嘿,伙计们,这与我需要的类似,但我需要从“特色图片”框中显示的图像中删除属性,我该如何更改代码以适合这种情况? 这是我在 WordPress 论坛上发布的内容 - http://wordpress.org/support/topic/editing-featured-image-size-in-the-editor?replies=5#post-3109119
我一直在使用这个,但后来意识到,当我编辑图像(添加标题)到帖子本身的图像(而不是在媒体上传器中)时,WordPress 会重新应用宽度和高度。通过向“the_content”添加过滤器找到了一个解决方案
https://snipt.net/dnnsldr/remove-image-height-and-width-for-responsive-design-in-wp/
这在使用 Twitter Bootstrap 时非常方便,它需要图像动态调整大小以适合轮播。
谢谢 Chris!
谢谢! 正是我要找的东西,但我仍然需要标题的短代码才能正常工作。我发现将优先级从 10 更改为大于 20 的值,就可以让标题短代码过滤器先执行并仍然被创建。
例如:
addfilter( 'image_send_to_editor', 'remove_width_attribute', 50 );
然后我修改了它:http://justintadlock.com/archives/2011/07/01/captions-in-wordpress 来更改短代码的输出,以从标题 div 中移除宽度,以及其他一些内容。
显然,我太早说话了。只要用户从未在编辑器中切换过“视觉”和“html”选项卡,该解决方案就可以工作。
所以…我最终使用了它
并创建了自己的标题短代码
为了防止这些更改被对帖子的编辑或更新所还原,将该函数作为过滤器应用到 the_content 而不是 send_to_editor。
我做了一个简短的 gist,它将这个和其他一些有助于消除 WordPress 中的硬编码图像宽度和高度属性的更改捆绑在一起:https://gist.github.com/4557917
我在 functions.php 中的哪个位置粘贴它有关系吗? 我已经在 functions.php 中的不同位置粘贴过它,但它仍然不起作用。 谢谢提供任何信息。
-Mike
谢谢! 一开始就起作用了。
我知道我评论有点晚了,但有一个更好的方法来做到这一点,它提供了一个机会去做比仅仅移除宽度和高度属性更多的事情。据我所知,还没有人提出过像我在这里写的那样做这件事的方法
在添加媒体时重建图像标签
互联网上有很多博客文章以你的方式来做,但我的方式不同,因为你没有尝试改变现有的图像标签,而是有机会创建一个新的图像标签,就像你想要的那样。
嗯… 我可以在网络上找到类似的代码。但我遇到了同样的问题。
[caption id="XXX" ...] … description[/caption] 也会被移除。
这不是我想要的。我怎样才能只移除宽度和高度信息? 仅此而已,不多不少。 如果有人能给我一个有效的解决方案就好了。
使用 SimpleXML。 我在第一个评论中提供的链接展示了如何使用它。 你可以自定义该函数来重建你想要的图像标签。
抱歉 Brain,但我无法理解你的意思。 我是否需要将你的脚本添加到使用 preg_replace 的脚本中,或者我是否需要用你的脚本替换“preg_replace”脚本?(我认为是第二个,对吗?) 然后你的脚本只重建 img 标签,对吗?
好吧,在我的服务器上 SimpleXML 已被激活,但它仍然不起作用,我已 1:1 复制了你的脚本,仅用于测试。 我是否需要创建一个 XML 文件? 它不应该也能与 HTML(5) 文件(由 PHP 生成)一起使用吗?
你能举一个例子,说明我如何只移除宽度/高度吗? 我认为我对你的脚本理解错了 :-/
derElch,如果你将我的代码直接放入你的 functions.php 文件中,而不是使用这篇博客文章中提出的方法,并且如果 SimpleXML 已启用,那么你应该就完成了。
好吧,我也是这么想的,但什么也没发生,和以前完全一样的代码,以以下开头
[caption id="XXX" width="XXX" (我知道这还没有被移除)]< a …>< img src=”XXX” … width=”XXX” height=”XXX”/>< /a>Description[/caption]
我尝试修改结果 img 标签以更好地查看差异,但没有任何变化,仍然和以前完全一样的代码,包括(以及“preg_replace”)… 有什么想法吗?
为什么要移除它们,当你可以用简单的 CSS 轻松覆盖这些属性时? width: whatever; height: auto;
如果我想移除 html,我需要修改什么?
我想拥有高度/宽度属性可能是有用的
我的 [CSS] 修复 https://twitter.com/ldexterldesign/status/346656591480762369
此致
这也可以用 jQuery 完成
用 jQuery 移除 IMG 高度和宽度属性
http://www.redbridgenet.com/how-to/remove-img-height-and-width-attributes-with-jquery/
按原样完美运行! 谢谢!
除了使用 jQuery 或 CSS 技巧之外,还有其他方法可以做到这一点吗?
老生常谈了!这应该成为函数中的默认选项……特别是对于 RWD。谢谢,克里斯!
我在 iframe 中遇到了问题,所以我只是修改了我的正则表达式,使其只对图像生效。
以下是我使用的方法
帮了我很大的忙,谢谢!!!
看来从 WordPress 3.9 开始,它就不再起作用了?还有其他人遇到这个问题吗?太可惜了,因为它是我的响应式解决方案的基石。
如果我的图形设计师给我一个简洁美观的响应式布局,并为图像使用一个简单的类,该怎么办?我正在竭尽全力让图像显示为“,但到目前为止,我还没有做到。
我以为使用类似
the_post_thumbnail('full', array('class' => 'img1'));
的东西会奏效,但结果我错了。CRAIG,你的解决方案简直是救命稻草。
太感谢你了!!!!
Craig 的解决方案也适合我。感谢 Craig!
带有标题的图像的外部 div 也包含宽度。为什么地球上 WordPress 坚持这样做呢?
嗨,如何从外部图像获取宽度和高度属性?
例如
我在元框中添加了一张图像。[http://www.example.com/img/test-image.jpg]。
我想使用自动高度和宽度属性将此图像显示在文章中。
< img src=”http://www.example.com/img/test-image.jpg” width=”” height=”” >
谢谢
如果您使用的是最新版本的 Jetpack(截至本文撰写时的 v3.8.0),您会发现它会在页面加载时通过 JavaScript 在图像中添加回
width
和height
属性,即使您使用上述代码。Jetpack 与devicepx
打包在一起,支持高 DPI 显示的图像,但它会添加回破坏响应式布局的宽度/高度属性。要解决此问题,只需将以下内容添加到
functions.php
中感谢大家的提供的信息。WordPress 是最容易的企业级 Web 内容管理服务之一,它允许开发人员完全控制任何网站。随着图形在网站上的重要性不断提高,以适合屏幕且不占用太多空间的方式定义图像变得至关重要。此代码将有助于管理图像的显示。确保您使用响应式设计,这是目前排名因素,也为用户体验增加了价值。
太棒了!正是我需要的!
此代码片段会破坏 WP 4.7.5 中的 TinyMCE 图像标题功能。
另一个解决方案是在您的主题文件中执行以下操作,这样就不会影响所有图像。