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

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

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

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

WordPress 自定义的评论查询类 WP_Comment_Query 参考文档和使用实例

WordPress获取评论所有主题都是使用wp_list_comments()函数,获取每篇文章的评论是相当的方便实用,唯一的不足是不能通过自…
萨龙龙萨龙龙
WordPress
6年前
0
0
1.57W
0

WordPress MU多站点解决Timthumb.php不显示缩略图

最近在开发Perimg图片主题,用户想要用Timthumb.php插件来实现缩略图,缩略图的顺序是自定义域、文章第一张图片与默认缩略图,而萨龙龙…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.12W
0

WordPress 主题禁用古滕堡编辑器和小工具

WordPress4.9.8版本就发布了古滕堡编辑器,很好用,添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑…
萨龙龙萨龙龙
WordPress
4年前
0
0
1.47W
0

WordPress附件函数wp_get_attachment_metadata简码获取照片EXIF信息

自动获取照片的EXIF信息,很多大型的摄影论坛都有这个功能,对于摄影爱好者来说是一个很实用的功能。萨龙龙开发的Deephoto主题和Neatim…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.30W
0

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

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

WordPress 判断是否在循环中的函数 in_the_loop

WordPress主题开发中,很多时间需要在文章与列表中进行判断从而输出不同的内容,比如文章分类,只想在列表中显示,文章中不显示。列表页面可直…
萨龙龙萨龙龙
WordPress
7年前
0
0
9.92K
0

WordPress按自定义文章类型进行搜索

一般的Wordpress主题中都有多种自定义文章类型,除了了默认的文章还会有作品、商品等自定义类型的文章,而WordPress默认只能搜索到文章…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.20W
0

使用WordPress MU一个程序创建多站点网络介绍与安装教程

经常折腾wp的人肯定不止一个博客,主题高产的WPER那就更不用说,所以我们不想重复地安装wordpress,通过WordPressMU只需要安…
萨龙龙萨龙龙
WordPress
10年前
0
0
2.07W
2

WordPress 功能函数—— add_comments_page(将子菜单页添加到评论主菜单上)

描述 此函数具有一个功能,该功能将用于确定菜单中是否包含页面。 连接到处理页面输出的函数也必须检查用户是否具有所需的…
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
1.25W
0

WordPress获取优酷视频缩略图

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

WordPress 使用 wp_set_password 重置用户密码

当WordPress管理员忘记密码或需要重置用户密码时,可以使用wp_set_password函数来实现。该函数将为指定用户设置新密码,…
萨龙龙萨龙龙
WordPress
2年前
0
0
2.14W
0

让 WordPress 菜单图像描述支持 HTML 标签

默认情况下,WordPress的菜单描述输入框不支持HTML代码,有些时间需要向菜单中添加一些html代码,比如添加个SVG图标,…
萨龙龙萨龙龙
前端资讯
6年前
0
0
8.40K
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 100
评论列表
总数:0
萨龙网络
暂无评论,第一个评论下?