»

让上传到WordPress的图片形成的<img>标签属性顺序一致

    WordPress  
WP Rocket爬虫wordpress数据库工作CLB前端插件防盗链ApacheCDNwindows主机Wp Super CacheIIS伪静态htaccessWordPress插件访问cookies网站优化建站网站镜像网络安全缓存重定向

博主最近发现一个现象,就是写文章时将图片上传到WordPress上,输出的时候,<img>标签里的 width 和 height 属性的顺序会不一样,有时候在 src 的前面(例如使用缩略图引入的时候),有时候又出现在 src 属性的后面。。。

究其原因,是 WordPress 系统的原因,程序员们没有考的这么详细,或者由不同的人分做不同的部分导致。

为什么会考虑这个?因为顺序不一致,使用正则匹配图片的时候可能会很麻烦。所以我决定找到相关代码,并统一成如下顺序:

<img ... src="..." ... width="..." height="..." /> 

即把 width 和 height 属性挪到最后。

控制上传图片的文件主要是  /includes/media.php  ,因此做如下修改。

1. 在 get_image_tag( ) 函数中 

将  

$html = '<img src="' . esc_attr( $img_src ) . '" alt="' . esc_attr( $alt ) . '" ' . $title . $hwstring . 'class="' . $class . '" />';  

修改为:

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

$html = '<img src="' . esc_attr( $img_src ) . '" alt="' . esc_attr( $alt ) . '" ' . $title . 'class="' . $class . '" ' . $hwstring . '/>';

 

2. 在 wp_get_attachment_image( ) 函数中

 $html = rtrim( "<img $hwstring" );  

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

改成 $html = rtrim( "<img " ); 

 $html .= ' />'; 

改成: $html .= ' ' . $hwstring . '/>'; 

 

3. 在 wp_img_tag_add_width_and_height_attr( ) 函数中 

本文禁止全文转载。任何形式转载请联系作者(时光在路上 www.timezls.com) Copyright © 2023. All Rights Reserved

 return str_replace( '<img', "<img {$hw}", $image ); 

修改为:

本文禁止无授权转载 - 时光在路上 www.timezls.com 保留所有权利

 return str_replace( '/>', "{$hw} />", $image ); 

修改了以上几处后,上传的图片输出到前端以后,width 和 height 属性的顺序就统一排在最后了。

注意,每次 WordPress 升级或更新的时候,media.php 文件可能需要重新设置。

时光在路上扫码阅读、分享
  • 版权声明:该文章由 时光在路上 发表,共 933字。除非特别标注来源,否则为原创。详见《版权声明》部分。
  • 转载请注明:文章标题和文章链接 - 时光在路上 - 也可直接“复制本文链接” 或 使用右边二维码分享本文 →