萨龙网络
登录
首页-WordPress文章-WordPress,前端资讯-正文

删除或失效WordPress文章中的图像大小属性

萨龙龙萨龙龙
WordPress, 前端资讯
6年前
0
0
1.13W

默认情况下,WordPress会将图像元素widthheight属性添加到图像元素中。这些属性会影响CSS宽度和高度属性,图片延迟加载时默认图片的大小,可通过 PHP、JavaScript 和 CSS 来删除属性,或者使用其失效。

删除图像大小属性可完全控制 CSS 属性,可将以下代码添加到主题 functions.php 文件中:

/**
* 移除图片高度和宽度属性从文章内容中的图片上
*/
function salong_remove_image_size_attributes( $html ) {
return preg_replace( '/(width|height)="\d*"/', '', $html );
}
// 从特色图像中删除图片大小属性
add_filter( 'post_thumbnail_html', 'salong_remove_image_size_attributes' );
// 从添加到WordPress文章的图像中删除图像大小属性
add_filter( 'image_send_to_editor', 'salong_remove_image_size_attributes' );

请注意,当图像是特色图像或将媒体库有图像添加到文章时,此代码将从图像中去除图像大小属性,再添加图像到文章中。已上传到文章中的现有图像不受影响。

对于已经添加到文章的图像,必须手动删除widthheight属性,或者也可以使用一些jQuery代码来解决问题,以下代码添加到主题 js 文件中:

/*直接删除图像上的大小属性*/
jQuery(document).ready(function($) {
    $('img').removeAttr('width').removeAttr('height');
});

使用 jQuery 代码删除图像大小属性更加方便,对于已经添加或者将来要添加的图片都适用。

对于响应式图片或者延迟加载时的默认图片都是较好的解决方法,将以下代码添加到主题 CSS 样式文件中:

img {
    width: initial !important;
    max-width: 100% !important;
}

对于延迟加载时,默认图像与实际图像大小不一样时,默认图像将保持原有的大小。

英文原文:https://wpscholar.com/blog/remove-wp-image-size-attributes/

标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/remove-wordpress-image-size-attributes.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.20M456.65W3.85W
分享:
WordPress 媒体库支持 SVG 图标的上传与预览
WordPress 媒体库支持 SVG 图标的上传与预览上一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本下一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本
相关文章
总数:109

WordPress通过分类ID获取分类名称与链接

在Wordpress主题开发的过程中,尤其是CMS主题分类的布局,通过后台选项(萨龙龙使用的都是Redux开源框架)选择分类,前台通过调用分类的…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.75W
0

WordPress网站统计相关信息使用大全

很多个人博客都有一个小工具是来统计网站的一些信息,Deephoto主题企业版本首页就集成了网站统计,添加了工作天数、完成作品、新闻动态、摄影师、…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.17W
0

移除 WooCommerce 商城插件编辑产品中的产品数据相关 tabs

WooCommerce插件默认为编辑产品页面提供了产品数据TABS,默认包括:常规、库存、配送、联锁产品、属性、高级等模块,功能强大而实用。…
萨龙龙萨龙龙
WooCommerce
7年前
0
0
1.30W
0

自定义WooCommerce产品文章hook顺序

最近在做一款企业产品展示的商城网站,设计WooCommerce产品文章的布局与默认的布局有很大的不同,所以其中的一些模块都需要重新调整。WooC…
萨龙龙萨龙龙
WooCommerce
9年前
0
0
1.42W
0

WordPress 如何根据文章类型向编辑器添加 CSS

在WordPress中,我们可以通过向主题中添加CSS文件来为页面和文章添加样式。但是,如果您希望根据文章类型添加自定义样式,该怎么办呢…
萨龙龙萨龙龙
WordPress
2年前
0
0
2.09W
0

WooCommerce为购物车和结算添加附加费 – 使用费用API

为所有交易添加基于百分比的附加费 /** *添加1%的附加费到你的购物车和结算页面 *更改百分比以将附加费设置为适合的…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.11W
0

WordPress按角色获取可分页的用户列表并显示最新文章

最近开发了一款多功能的新闻视频类Wordpress主题Yewan,客户的网站用户也比较多,要求设计一个按权限(管理员、编辑、作者、投稿者、订阅者…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.24W
0

WordPress 主题感染恶意代码function _check_active_widgets

萨龙龙开发主题这么久,第一次感染恶意代码,整个WordPress下的主题functions.php都被插入了一大段函数代码,百度一下也发…
萨龙龙萨龙龙
WordPress
8年前
0
0
1.59W
0

WordPress 限制上传媒体的文件类型

MNews和LensNews主题都有前台投稿的功能,用户可以上传图片等文件,管理员是不希望用户上传任意的媒体文件,这时我们可以对用户上传的…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.18W
0

WordPress桌面客户端无需浏览器管理多个站点及JetPack安装使用

WordPress推出已经十多年了,越来越多的个人与公司都是在使用其开发自己的网站,全球的开发者也都在为其提供程序。WordPress移动客户端…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.69W
0

WordPress 功能函数—— add_clean_index(向指定的表添加索引)

描述 向指定的表添加索引。 用法 add_clean_index(string$table,st…
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
9.33K
0

使用 wp_add_inline_script 函数向 WordPress 站点输出脚本

前面我们介绍了wpadd_inline_style函数的使用,并为主题添加自定义样式切换功能,既然有函数可以向站点输出css样式,同时也可以…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.50W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容