您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress,前端资讯-正文

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

萨龙龙萨龙龙WordPress, 前端资讯7年前001.28W

默认情况下,WordPress会将图像元素width和height属性添加到图像元素中。这些属性会影响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属性

对于已经添加到文章的图像,必须手动删除width和height属性,或者也可以使用一些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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1422.46M457.22W4.42W
加载中…
分享:
WordPress 媒体库支持 SVG 图标的上传与预览
WordPress 媒体库支持 SVG 图标的上传与预览上一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本下一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本
相关文章
总数:117

Nuxt.js Headless WordPress 项目中的数据缓存优化策略

在 Headless WordPress + Nuxt.js 的架构中,WordPress 作为内容后端通过 REST API 提供数据,Nux…
萨龙龙萨龙龙WordPress2个月前009420

WordPress 主题选项框架 Codestar Framework Pro 2.0专业版使用

萨龙网络在2018年9月份就写了一篇《WordPress 简约实用的主题选项框架 Codestar Framework》文章来介绍 Codest…
萨龙龙萨龙龙WordPress7年前003.11W0

WordPress获取多个角色的用户列表并分页

在WordPress按角色获取可分页的用户列表并显示最新文章这篇文章中我们已经介绍了获取单个角色的用户列表,如果想获取多个角色的用户列表呢,ge…
萨龙龙萨龙龙WordPress10年前001.10W0

WooCommerce 3 更新后特色产品的获取方法

WooCommerce 已经是 WordPress 平台最好最强大的在线商城插件,已经被 WordPress 收购,更新速度比较频繁,功能更加完…
萨龙龙萨龙龙WooCommerce8年前001.29W0

WooCommerce商城首页获取自定义字段

WooCommerce商城首页默认被插件转换成归档页面archive-product.php,但是添加的依然是页面,所以通过get_post_m…
萨龙龙萨龙龙WooCommerce9年前001.39W0

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

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

WordPress 主题感染恶意代码function _check_active_widgets

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

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

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

WordPress MU多站点从子域名转子目录

使用WordPress MU多站点来管理所有的站点确实很方便,可以省去很多重复的工作,节省资源。萨龙网络使用MU多站点已经很久,已经爱不释手,也…
萨龙龙萨龙龙WordPress10年前002.61W0

WordPress 管理面板中禁用主题和插件编辑器

默认情况下,WordPress允许用户通过后台管理面板编辑主题和插件代码。虽然它是一个方便的功能,但对于主题或插件作者没有任何用途,最重要可以防…
萨龙龙萨龙龙WordPress7年前001.07W0

WooCommerce 商城插件的条件式标签

可以在模板文件中使用WooCommerce和WordPress的条件式标签,以根据匹配页面的条件来显示的特定内容。例如,您可能想要在商店页面上方…
萨龙龙萨龙龙WooCommerce9年前001.43W0

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

WordPress 获取评论所有主题都是使用wp_list_comments()函数,获取每篇文章的评论是相当的方便实用,唯一的不足是不能通过自…
萨龙龙萨龙龙WordPress7年前001.87W0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容