当前位置: 首页 » 网站建设 » wordpress教程 » 正文

wordpress图片img去除样式及长宽属性width、height、class

发布时间:2025-01-16 以下文章来源于网友投稿,内容仅供参考!

前言
测速网在年前仿了一款新的wordpress自媒体主题——优设网,新的wp主题的部分功能还在优化中会在年会发布在测速网网站上给大家,做为新的开年主题,本挖尽了最大努力尽可能的保留了原有主题的样式及后台功能调用开发的情况下做了一些细节上的优化调整,(优设网,是国内职业设计师设计教程与素材的交流平台)。

在测试中发现问题
在仿这款wordpress主题时最后的测试中发现文章内容页面样式错位的情况,最开始本挖以为是wp主题的div没有闭合,但是通过开发者功能的检测并没有问题,又检测了css样式表的样式表,也没有发现有优先或是错误出现。最后通过新建文章添加图片后发现,就算是独立一张图片也会出现错位,最后把问题定位在了默认主题的wordpress程序默认图片的自带属性上。是图片自带的wordpress属性导致了页面错位。

找到问题解决问题
最终测速网通过某度找到了最佳解决方案如果需要的挖友可以直接复制走,只要把下面的代码复制到 functions.php中添加即可,便可以把程序默认自带的属性都清除干净,推荐给开发者们使用,操作起来也十分的方便,现在将方法总结发给大家。

wordpress图片移除属性解决方法

默认的img

area data-settings="dblclick" readonly ><img src="xxx" alt="Fanly MIP" width="390" height="260" />area>1<img src="xxx" alt="Fanly MIP" width="390" height="260" />

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

area data-settings="dblclick" readonly >//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;}area>12345678910//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 文章中插入图片的时候代码就非常的简洁了,最终效果代码如下:

area data-settings="dblclick" readonly ><img src="xxxx" alt="Fanly MIP" />area>1<img src="xxxx" alt="Fanly MIP" />

  • • 开启wds是什么意思?无线路由器wds是怎么开启?

    开启wds是什么意思?WDS是英文Wireless Distribution System的简称,中文名称是:无线分布式系统。WDS功能就是一种帮助无线基站与

  • • 系统boot是什么意思?电脑出现boot manager怎么办?

    系统boot是什么意思1、开机后我们连续按启动热键,进入bios界面,我们就可以看到boot了。2、boot有启动的意思,在电脑中就是指电

  • • win10系统msconfig无法正常启动怎么办?win10系统msconfig怎么设置最

    msconfig打不开解决办法:1.先打开电脑开始菜单,在操作窗口输入regedit,打开注册表编辑器。然后将HKEY_LOCAL_MACHINE\SOFTWARE

  • • 金士顿u盘怎么写保护?金士顿U盘恢复出厂设置怎么操作?

    金士顿u盘怎么写保护?方法一:如果你的U盘如我简介中说的那样,有一个自带的物理写保护的小 开关 ,就观察一下是不是已经将开关

  • • 苹果AirPods Pro 2发布 搭载H2芯片降噪能力翻倍

    9月8日凌晨,苹果正式发布第二代主动降噪耳机AirPods Pro 2,搭载H2芯片,降噪能力翻倍,而且续航也飚至30小时。得益于全新的H2

  • biubiu加速器
    九游优盟游戏推广平台
    九游推广联盟
    digdig游戏入口
    4999小游戏大全
    九游游戏网
    站长素材
    植物大战僵尸杂交免费版
    站长之家
    测速网在线测网速
    354211邮编查询,354211邮政编码查询
    354209邮编查询,354209邮政编码查询
    353132邮编查询,353132邮政编码查询
    354215邮编查询,354215邮政编码查询
    353121邮编查询,353121邮政编码查询
    354213邮编查询,354213邮政编码查询
    353125邮编查询,353125邮政编码查询
    354201邮编查询,354201邮政编码查询
    353101邮编查询,353101邮政编码查询
    354200邮编查询,354200邮政编码查询