1. David Wu首页
  2. WordPress
  3. WordPress建站教程

WordPress 文章插入图片自动移除 img 的 width、height、class 属性-WordPress建站教程

无意间在百度知道看到有人提问,如何移除 WordPress 文章插入图片是自动添加在 IMG 标签中的 width、height、class 属性,才恍然发现子凡我早在 Fanly 主题的第一个版本中就已经使用了该功能,了解子凡的人都知道子凡比较追求简单极致,对于 WordPress 的有写功能就会显得比较冗余,所以这样的情况在子凡这里是绝对不能容忍的。

无意间在百度知道看到有人提问,如何移除 WordPress 文章插入图片是自动添加在 IMG 标签中的 width、height、class 属性,才恍然发现子凡我早在 Fanly 主题的第一个版本中就已经使用了该功能,了解子凡的人都知道子凡比较追求简单极致,对于 WordPress 的有写功能就会显得比较冗余,所以这样的情况在子凡这里是绝对不能容忍的。

WordPress 图片标签

可能因为是个小功能,所以之前也没有在泪雪博客上做分享,但是才发现市面上很多的 WordPress 主题都没有该功能,都没有注意到这些用户体验和细节性的问题,那么下面子凡就把实现的代码分享出来吧!

问题分析

WordPress 文章插入图片附件的时候默认类似于以下的代码:

1
<img class="alignnone size-full wp-image-123" src="https://zhangzifan.com/uploads/2016/11/Fanly-MIP.png" alt="Fanly MIP" width="390" height="260" />

其中图片 img 标签中就会有 class、src、alt、width、height 这些属性,其中 src 是图片的路径,alt 是图片的描述有利于优化,所以 class 以及 width、height 对于一个优秀的 WordPress 主题来说是非常的多余和没有必要的,甚至会造成数据库的冗余等等。

解决方法

依然是通过在当前主题的 functions.php 中添加如下代码:

1
2
3
4
5
6
7
8
9
10
//remove insert images attribute
//add_filter( \'the_content\', \'fanly_remove_images_attribute\', 99 );
add_filter( \'post_thumbnail_html\', \'fanly_remove_images_attribute\', 10 );
add_filter( \'image_send_to_editor\', \'fanly_remove_images_attribute\', 10 );
function fanly_remove_images_attribute( $html ) {
	//$html = preg_replace( \'/(width|height)="\\d*"\\s/\', "", $html );
	$html = preg_replace( \'/width="(\\d*)"\\s+height="(\\d*)"\\s+class=\\"[^\\"]*\\"/\', "", $html );
	$html = preg_replace( \'/  /\', "", $html );
	return $html;
}

最终效果

通过添加以上解决方法中的代码到 WordPress 主题中,在 WordPress 文章中插入图片的时候代码就非常的简洁了,最终效果代码如下:

1
<img src="https://zhangzifan.com/uploads/2016/11/Fanly-MIP.png" alt="Fanly MIP" />

是不是非常的干净了呢?当然如果某些 WordPress 主题作者开发的时候是通过图片 css 控制图片样式的,那么可能页面效果可能会有所变化,大家动手调试一下即可,子凡就不详细说明了,大家举一反三就好。

更多关于 WordPress 优化及疑问可以添加 QQ 群:255308000

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/wordpress-remove-class-width-height.html

原创文章,作者:泪雪博客,如若转载,请注明出处:https://www.davidwu.net/archives/129202

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注