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

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

萨龙龙萨龙龙
WordPress, 前端资讯
7年前
0
0
1.20W

默认情况下,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' );

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

通过 jQuery 删除width和height属性

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

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

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

使用 CSS 使图像大小属性失效

对于响应式图片或者延迟加载时的默认图片都是较好的解决方法,将以下代码添加到主题 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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1352.34M457.13W4.42W
加载中…
分享:
WordPress 媒体库支持 SVG 图标的上传与预览
WordPress 媒体库支持 SVG 图标的上传与预览上一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本下一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本
相关文章
总数:110

WordPress 主题 Slearn Pro 课程插件之编辑课程选项

课程插件功能已经能满足绝大多数在线教育培训课程网站的需求,选项功能也众多,「即将推出」功能还在开发中。
萨龙龙萨龙龙
WordPress
3年前
0
0
2.26W
0

Woocommerce一个很漂亮的购物系统

Woocommerce,一个wordpress的电子商务扩展插件,一个很漂亮的可以帮你卖任何东西的工具,这是插件在wordpress后台插件中的…
萨龙龙萨龙龙
WooCommerce
11年前
0
0
1.57W
0

WordPress函数wp_nav_menu_items向菜单列表中添加搜索内容

Wordpress的菜单都是通过后台菜单来添加设置,很多时候需要添加一些功能到菜单,比如搜索,或者购物车,这时我们就可以使用wp_nav_men…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.05W
0

WordPress多站点社区动态中获取自定义文章类型更新

萨龙网络使用Buddypress社区已经很长一段时间,在社区首页动态中可能获取整个网站的最新文章、用户注册,用户动态内容,而自定义文章类型的发布…
萨龙龙萨龙龙
Buddypress, WordPress
10年前
0
0
1.23W
0

WordPress 获取用户 ID 的8种方法

在WordPress主题的开发过程中,获取用户ID的频率是很高的,可在WordPress中查看用户信息,也可以通过代码直接获取。 …
萨龙龙萨龙龙
WordPress
4年前
0
0
5.08W
0

WordPress获取当前分类的顶级分类ID

在开发吃货主题Chihuo时,要对产品和文章进行筛选,在一级分类下显示所有一级分类和当前一级分类下的所有二级分类,在二级分类下,显示所有一级分类…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.85W
0

WordPress获取优酷视频缩略图

很多网站的视频都是来自在线视频网站,这样即节省网站空间也带来更高的访问速度,优酷视频是使用较多的。在添加视频文章时我们都想直接获取视频中的缩略图…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.29W
0

WordPress前台登录函数wp_login_form的用法

网站开放注册的站点都会添加一个前台登录与注册的表单或页面,这样方便用户登录站点,同时也保证网站后台的安全性。今天我们来介绍前台登录函数wp_lo…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.99W
0

WordPress MU多站点网络克隆新站点插件Multisite Cloner

WordpressMU多站点已经使用很久,在本地测试和主机上安装的都是多站点,极大的方便网站搭建以及主题开发。当我们有多个站点,需要创建的新站…
萨龙龙萨龙龙
WordPress
10年前
0
0
2.03W
0

WordPress 主题感染恶意代码function _check_active_widgets

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

WordPress 重置缩略图插件 Regenerate Thumbnails 获取媒体数量时错误的解决方法

WordPress一键重置缩略图使用相当简单方便,设置了媒体中要裁剪的缩略图参数(使用了WooCommerce商城插件,需要在外观——自定…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.10W
0

WordPress 媒体库支持 SVG 图标的上传与预览

WordPress默认支持多种图片格式包括.jpg,.jpeg,.png,和.gif,出于安全考虑不能上传可缩放矢量图形(SVG)。SVG是…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.27W
0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容