如何用preg_match和wp_img_tag_add_loading_attr实现WordPress figure类图片跳过懒加载

云上老周

2026-6-23

解决方案

替代弃用钩子：使用`wp_filter_content_tags`

WordPress 6.1+已弃用wp_img_tag_add_loading_attr，官方推荐使用wp_filter_content_tags钩子处理图片标签的属性修改。

实现逻辑

通过正则匹配判断当前<img>标签是否被包裹在带有no-lazy类的<figure>标签内，匹配成功则将loading属性设为eager。

完整代码示例

add_filter( 'wp_filter_content_tags', 'adjust_loading_attr_for_no_lazy_figure', 10, 3 );
function adjust_loading_attr_for_no_lazy_figure( $tag, $context, $attachment_id ) {
    // 仅处理img标签
    if ( 'img' !== $tag['tag'] ) {
        return $tag;
    }

    // 正则匹配：检查当前img是否在带no-lazy类的figure中
    // 正则说明：
    // <figure class=".*?no-lazy.*?> 匹配包含no-lazy类的figure起始标签
    // .*? 非贪婪匹配任意内容（支持跨多行）
    // preg_quote($tag['html'], '/') 转义img标签HTML中的特殊字符，避免正则语法冲突
    // .*?</figure> 匹配figure结束标签
    // s修饰符：让.匹配换行符，适配跨多行的figure结构
    if ( preg_match( '/<figure class=".*?no-lazy.*?>.*?' . preg_quote( $tag['html'], '/' ) . '.*?<\/figure>/s', $context ) ) {
        // 修改loading属性为eager
        $tag['attr']['loading'] = 'eager';
    }

    return $tag;
}

代码解释

钩子参数：wp_filter_content_tags的三个参数分别为标签数组（含标签名、HTML代码、属性集合）、上下文内容（包含当前标签的完整HTML片段）、附件ID。
正则适配：preg_quote确保img标签的特殊字符不会干扰正则匹配；s修饰符兼容figure和img标签跨多行的排版场景。
属性修改：检测到目标结构后，直接覆盖loading属性值为eager。