博主最近发现一个现象,就是写文章时将图片上传到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 文件可能需要重新设置。