跳过在 WordPress 中添加到图形元素的图像类的延迟加载

Question

这就是 WordPress 中图像的输出方式：

<figure class="no-lazy"><img loading="lazy" class="wp-image-12345" src="apple.jpg" alt="apple"></figure>

我想调整WordPress中图片的加载属性。我目前正在使用以下使用 str_replace 的解决方案：

add_action( 'template_redirect', function(){
    ob_start( function( $buffer ){

$buffer = str_replace( array( '<figure class="no-lazy"><img loading="lazy"', "<figure class='no-lazy'><img loading='lazy'"), '<figure class="no-lazy"><img loading="eager"', $buffer );

        return $buffer;
    });
});

但是，我相信有更好的方法使用 wp_img_tag_add_loading_attr 来实现我的目标。

wp_img_tag_add_loading_attr 解决方案仅在将类直接分配给图像元素 (img) 时才有效，如下所示：

<img loading="lazy" class="no-lazy" src="apple.jpg" alt="apple">

这里是 wp_img_tag_add_loading_attr 代码，它将 class="no-lazy" 的图像的加载属性从惰性更改为急切：

add_filter( 'wp_img_tag_add_loading_attr', 'skip_lazy_load', 10, 3 );

function skip_lazy_load( $value, $image, $context ) {
    if ( strpos( $image, 'no-lazy' ) !== false ) $value = 'eager';

    return $value;
}

WordPress 中的问题是类被添加到图形而不是图像中，如下所示：

<figure class="no-lazy"><img loading="lazy" src="apple.jpg" alt="apple"></figure>

如何使用 preg_match 和 wp_img_tag_add_loading_attr 来实现与上面的 str_replace 解决方案相同的效果？

'/<figure [^£]*?my_css_class[^£]*?<\/figure>/'

PS - 我对 preg_match 一点也不熟悉，并且我知道 wp_img_tag_add_loading_attr 已被弃用。

Answer 1

解决方案如下：

function add_loading_attr_to_img_in_figure($content) {
    // Define the pattern to match a <figure> with the specific class
    $pattern = '/(<figure[^>]*class="[^"]*eager-load[^"]*"[^>]*>)(.*?)(<img[^>]+>)(.*?<\/figure>)/is';

    // Define the replacement to add the loading="eager" attribute to the <img> tag
    $replacement = '$1$2<img loading="eager"$3$4';

    // Use preg_replace to modify the content
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

// Add the filter for the_content to modify images in post content
add_filter('the_content', 'add_loading_attr_to_img_in_figure');