大部分代码取自核心文件,您可能还需要根据自己的需求对其进行一些修改。
这是核心文件链接,我的想法来自:https://developer.wordpress.org/reference/functions/wp_make_content_images_responsive/
你需要注意开放p
标记在图像的正前方。
很匆忙,所以我没有等着检查您尝试了什么,也没有修改它,而是很快创建了这个片段。
add_filter( \'the_content\', \'wpse_220739_modify_images\', 100 );
/**
* Get all the image tags from content and modify them
*
* @param $content
*
* @return mixed
*/
function wpse_220739_modify_images( $content ) {
if ( ! preg_match_all( \'/<img [^>]+>/\', $content, $matches ) ) {
return $content;
}
$selected_images = $attachment_ids = array();
foreach ( $matches[0] as $image ) {
if ( preg_match( \'/size-([a-z]+)/i\', $image, $class_size ) && preg_match( \'/wp-image-([0-9]+)/i\', $image, $class_id ) && $image_size = $class_size[1] && $attachment_id = absint( $class_id[1] ) ) {
/*
* If exactly the same image tag is used more than once, overwrite it.
* All identical tags will be replaced later with \'str_replace()\'.
*/
$selected_images[ $image ] = $attachment_id;
// Overwrite the ID when the same image is included more than once.
$attachment_ids[ $attachment_id ] = true;
}
}
foreach ( $selected_images as $image => $attachment_id ) {
$content = str_replace( $image, wpse_220739_modify_image_tag( $image, $attachment_id, $image_size ), $content );
}
return $content;
}
/**
* Modifies the image tag, by prepending a figure tag and adding necessary classes
*
* @param $image
* @param $attachment_id
* @param $image_size
*
* @return mixed|string
*/
function wpse_220739_modify_image_tag( $image, $attachment_id, $image_size ) {
$image_src = preg_match( \'/src="([^"]+)"/\', $image, $match_src ) ? $match_src[1] : \'\';
list( $image_src ) = explode( \'?\', $image_src );
// Return early if we couldn\'t get the image source.
if ( ! $image_src ) {
return $image;
}
//Get attachment meta for sizes
$size_large = wp_get_attachment_image_src( $attachment_id, \'large\' );
$size_medium = wp_get_attachment_image_src( $attachment_id, \'medium\' );
$size_large = $size_large ? $size_large[0] : \'\';
$size_medium = $size_medium ? $size_medium[0] : \'\';
//Check if the image already have a respective attribute
if ( ! strpos( $image, \'data-large\' ) && ! empty( $size_large ) ) {
$attr = sprintf( \' data-large="%s"\', esc_attr( $size_large ) );
}
if ( ! strpos( $image, \'data-medium\' ) && ! empty( $size_medium ) ) {
$attr .= sprintf( \' data-medium="%s"\', esc_attr( $size_medium ) );
}
// Add \'data\' attributes
$image = preg_replace( \'/<img ([^>]+?)[\\/ ]*>/\', \'<img $1\' . $attr . \' />\', $image );
//Append figure tag
$r_image = sprintf( \'<figure id="image-%d" class="size-%s">\', $image_size, $attachment_id );
$r_image .= $image . \'</figure>\';
return $r_image;
}
如果一个图像标签已经有了一个环绕,那么您需要添加另一个检查
<figure>
标记与否,但您的主要问题是无法修改内容中的所有图像,应该通过此解决。
更新:第二个foreach循环需要在外部(当然,我没有注意到这一点,真傻),这应该会有所帮助。