如何去除WordPress文章中的图像大小属性

WordPress程序在默认情况下,会将图像元素width和height属性添加到图像元素中。

这些属性会影响CSS宽度和高度属性,图片延迟加载时默认图片的大小,可通过 PHP、JavaScript 和 CSS 来删除属性,或者让其失效。

阅读推荐:WordPress 超高压缩率 支持webp图片格式的图片压缩插件:ShortPixel

代码禁用WordPress程序图片裁剪功能

WordPress网站上传图片出现http报错解决办法

从媒体库插入的图像中删除图像大小属性

删除图像大小属性可完全控制 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;
}

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

通过插件让图像大小属性失效

如果你不是太擅长代码,可以通过安装 Image Size Attributes RemoverWordPress插件来让图像大小属性失效,简单方便。。。

【声明1】:如本站转载别的站的文章,我个人没有添加来源,您可以发电邮:admin#zhuji.gd 提醒我,我会尽快添加文章来源。 【声明2】:本博客不参与任何交易及中介服务,只记录 VPS 测评和优惠,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。
(0)
上一篇 22/09/2019 12:32
下一篇 26/10/2019 08:52

相关推荐

  • 优化YSlow add expires headers项目提升博客访问速度

    这两天一直对本站进行优化,Gtmetrix 得分实在难看。YSlow 可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。这里着重介绍一下优化项中的 add expires headers 。本站网站评分因为这一项评分F而拉低。 从网站评分看起,一图胜千言: 由于 add expires headers 这一项,网站整体评分为F,所以,我必须从这里下手。 add expires headers 首先,add expires headers 到底是什么? Expires headers tell...

    24/03/2019
    13.7K0
  • 博客 SSL 检测 PCI DSS 不合规的解决方法

    前段时间就随便检测了一下泪雪博客的 SSL 证书,就提示 PCI DSS 不合规,当时也没有在意,因为 PCI DSS 是属于支付卡行业安全标准,泪雪博客并不涉及,所以也没有影响,这不就在昨天有个朋友也发现这个问题了,所以昨天有空就简单的看了一下,然后顺便就解决一下。 SSL 相信不用多说,就是网站需要安装 SSL 证书后,才能够开始 HTTPS 协议的访问,可以提升网站数据传输的安全性。 PCI DSS,全称 Payment Card Industry Data Sec...

    07/03/2019
    11.8K0
  • WordPress插件:Compress JPEG & PNG images 对博客图片进行压缩

    上次博客搬迁时发现网站竟然占用了差不多800MB空间,整个搬迁过程还好是在移动光纤100M上下行对等的情况下顺利进行。是什么文件占用这么大的空间呢?不用问,肯定是图片。如果图片过大会影响浏览体验,给人的感觉这个网站好慢,所以对博客中的图片进行压缩这一步工作是必须的。 Compress JPEG & PNG images 是 TinyPNG 官方出品的插件,所以在压缩质量来说还是令人放心的。安装过程非常简单,只需要下载该插件安装激活既可...

    05/03/2019
    13.5K0
  • 大前端 DUX 美化版主题推荐:QGG

    本站不提供下载。诚然有热心的童鞋义务破解,但别有用心的人会植入后门,越流行的主题越是这样。为保护作者知识产权和保护网站安全,支持购买正版主题,辛辛苦苦的站不能因为一时贪便宜毁于一旦。需要正版的请移步:DUX,XIU QGG 主题是作者参考大前端 DUX ,知更鸟 Begin,以及网络各技术文章综合所写。主题中绝大部分文件都做了注释,对新手小白比较友好。代码未经压缩,体积较大,不排除存在 BUG 的可能,作者日后也会不定期...

    12/10/2020
    12.5K0
  • 安装配置Fail2Ban屏蔽攻击IP

    Fail2Ban 是一款由 Python 开发的服务器入侵防御软件,用来保护服务器免受暴力破解的攻击。推荐开启密码登录的 VPS 都要配置上 Fail2Ban,用来自动封禁尝试暴力破解 SSH 的 IP。 Fail2Ban可以扫描系统日志文件,对异常登录过多的IP进行禁止,自动更新防火墙规则(比如iptables),在指定的时间内拒绝特定的IP地址的请求,常用来防止暴力破解SSH。 安装 Fail2Ban # 对于 Ubuntu, Debian sudo apt install -y fail2ban # 对于 CentO...

    技术教程 05/01/2023
    9220
  • lenovo quick fix 官方工具一键关闭Win11自动更新,老版免费用不用花钱

    lenovo quick fix工具在使用前请彻底断开电脑网络,然后再使用,要不会直接要求工具更新到新版本。现在官方联想关闭win11自动更新工具已经收费,每次2元,我自己存了一份免费的分享给大家。

    07/09/2022
    4240
  • 博客写手怎么突破更新文章的困境

    现在博客建站的成本一直是越来越低,大容量的VPS也就百八十块钱,域名阿里云天天搞活动不是9块就是19块。 但是难度却没有随着成本降低而降低,因为内容更新始终是博客最难的一关 一个站点如果长时间不更新的话,就没有收录,收益就会越来越少。 毕竟人都有惰性,更不用说长期见不着收益,始终缺乏持续更新的动力。 不知道大家是否遇到更新文章的困境?每天都在为更新什么文章而发愁。 [ad] 采集是最快的,也是最容易出问题的。 ...

    27/03/2019
    10.5K0
  • Linux VPS 主机使用 CPULimit 来限制 Linux 进程的 CPU 使用率

    搬瓦工 VPS 都会限制 CPU 使用率,如果超出限制,VPS主机会被暂停。可以使用 CPULimit 每个进程的 CPU 使用率进行限制,可以避免搬瓦工 VPS 的过程中因超出 CPU 限制而被暂停。CPULimit适用于所有的Linux VPS主机,因为搬瓦工 VPS 比较典型,以搬瓦工 VPS 为例。 CPULimit 简介 CPUlimit 是一个限制进程的 CPU 使用率的工具(以百分比表示,而不是以 CPU 时间表示)。 当不希望批处理作业占用太多 CPU 时,控制批处理作业很有用...

    13/07/2021
    470
  • 如何通过巧用WordPress Trackbacks和Pingbacks获得外链?

    Trackbacks和Pingbacks是WordPress自带的一个功能。 简单的说就是一种互惠外链,主要应用在WordPress的博客文章里。 很长一段时间内,它们被认为对SEO优化有利,能为WordPress网站带来流量。但是Trackbacks和Pingbacks的缺点要大于它们的优点。 因为你无法控制谁链接到你的网站,这就会导致大量的垃圾网站做链接连接到的你网站,并产生大量的垃圾评论,最终会增加主机的CPU和内存负载,拖慢网站加载速度。 所以,正确的做法是禁...

    18/03/2019
    2070
  • WordPress插件:Redirection和WP Permalinks Migrations实现301重定向

    网站上线一段时间后,由于某些原因,需要修改WordPress的固定链接结构,这就必须面临一个问题:网站的文章已经被百度、google等搜索引擎收录,这时,如果别人访问旧链接,就会出现 404错误,不仅不利于SEO,也影响用户体验。 为了实现良好的SEO,一般都需要设置301重定向。在此推荐两个WordPress 301重定向插件:Redirection 和 WP Permalinks Migration 一、Redirection Redirection 是一款功能非常强大的WordPress 301重定向...

    11/03/2019
    530
返回顶部