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

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

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

默认情况下,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.16M456.59W3.85W
分享:
WordPress 媒体库支持 SVG 图标的上传与预览
WordPress 媒体库支持 SVG 图标的上传与预览上一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本下一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本
相关文章
总数:109

WordPress 插入页面函数 wp_insert_post

萨龙网络已经开发了很多WordPress主题,LensNews主题要创建的页面较多,所以导致很多用户来咨询如何设置用户中心,在最新上线的…
萨龙龙萨龙龙
WordPress
7年前
0
0
2.07W
0

Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化

萨龙网络Purity主题是集成了Woocommerce+Buddypress+Bbpress商城社区论坛,因为www.gravatar.com头…
萨龙龙萨龙龙
Bbpress, Buddypress, WooCommerce, WordPress
10年前
0
0
1.63W
0

WooCommerce 通过woocommerce_cart_item_thumbnail钩子修改购物车缩略图

在开发基于WooCommerce的商城主题时,我们一般会将模板文件添加到主题中来进行修改,对于有钩子或接口的地方,就没有必要再修改模板代码了…
萨龙龙萨龙龙
WooCommerce
5年前
0
0
1.58W
0

WordPress + 宝塔面板速度优化方案 Memcached + Redis

WordPress网站的速度应该上每个站长必须关注的一个问题,对于刚使用WordPress的朋友,优化网站速度是比较困难的事情,找不到好的…
萨龙龙萨龙龙
WordPress, 建站技术
5年前
0
0
2.22W
0

WordPress获取自定义文章类型分类下的文章并循环

Wordpress获取分类文章的函数有query_posts和WP_Query,两个函数的功能都很强大,推荐使用WP_Query函数来查询文章。…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.51W
0

WordPress为所有文章自动添加自定义字段

Sixianqiu主题是专为诗歌设计开发的主题,有一些朋友也需要这样的多形式博客主题,就整理出来了。一开始所有的文章内容都是居中显示,这样对于其…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.60W
0

修改Buddypress中管理员的显示名与用户名区别开提高账户安全

Buddypress社区中有很多地方会直接显示用户登录名,比如用户个人主题中的名称和链接中,所有来访的用户都知道了管理员的用户名,对于小人知道了…
萨龙龙萨龙龙
Buddypress, WordPress
10年前
0
0
1.60W
0

WordPress MU多站点设置子站点上传路径和文件的URL地址

为了提高网站的访问速度,萨龙网络也将所有的媒体文件放置在二级域名下,WordPress3.5以上的版本,隐藏了后台的媒体(Media)设置页面…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.50W
0

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

前面我们介绍了wpadd_inline_style函数的使用,并为主题添加自定义样式切换功能,既然有函数可以向站点输出css样式,同时也可以…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.48W
0

WordPress 主题 Slearn Pro 产品插件之属性设置

产品属性可在后台「产品——产品选项——属性」中单独设置(也可在编辑产品时再次添加),有三种类型:文本、颜色和图片,在前台也是以这三种方式来显示。…
萨龙龙萨龙龙
WordPress
3年前
0
0
2.42W
0

WordPress 功能函数—— activate_plugins(激活多个插件)

描述 激活多个插件。 当WP_Error返回,但这并不意味着该插件的一个有错误。这意味着一个或多个插件文件路径无效。…
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
8.16K
0

WordPress获取不同用户、类型文章和自定义字段下的文章数量

萨龙网络开发的MNews主题中,集成了个人中心功能,需要获取文章、视频、下载、专题和商城的文章数量,这个是比较简单,使用wp_count_p…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.01W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容