前言
大挖在年前仿了一款新的wordpress自媒体主题——优设网,新的wp主题的部分功能还在优化中会在年会发布在挖主题网站上给大家,做为新的开年主题,本挖尽了最大努力尽可能的保留了原有主题的样式及后台功能调用开发的情况下做了一些细节上的优化调整,(优设网,是国内职业设计师设计教程与素材的交流平台)。
在测试中发现问题
在仿这款wordpress主题时最后的测试中发现文章内容页面样式错位的情况,最开始本挖以为是wp主题的div没有闭合,但是通过开发者功能的检测并没有问题,又检测了css样式表的样式表,也没有发现有优先或是错误出现。最后通过新建文章添加图片后发现,就算是独立一张图片也会出现错位,最后把问题定位在了默认主题的wordpress程序默认图片的自带属性上。是图片自带的wordpress属性导致了页面错位。
找到问题解决问题
最终大挖通过某度找到了最佳解决方案如果需要的挖友可以直接复制走,只要把下面的代码复制到 functions.php中添加即可,便可以把程序默认自带的属性都清除干净,推荐给开发者们使用,操作起来也十分的方便,现在将方法总结发给大家。
wordpress图片移除属性解决方法
默认的img
1 |
<img class="alignnone size-full wp-image-123" src="xxx" alt="Fanly MIP" width="390" height="260" /> |
其中图片 img 标签中就会有 class、src、alt、width、height 这些属性,其中 src 是图片的路径,alt 是图片的描述有利于优化,所以 class 以及 width、height 对于一个优秀的 WordPress 主题来说是非常的多余和没有必要的,甚至会造成数据库的冗余等等。
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="xxxx" alt="Fanly MIP" /> |