如何让WordPress.story容器内的core/image块自动链接至媒体文件

需求背景 #

我的博客每篇文章包含50-70张图片，手动为每张图片添加指向原始媒体文件的链接操作十分繁琐。希望实现：为core/image块中的图片外围添加指向原始尺寸媒体文件的链接，用户点击图片即可跳转至原图。

原脚本及问题 #

原使用的脚本如下：

function link_wp_block_image_to_media( $block_content, $block ) {
    if ( 'core/image' === $block['blockName'] ) {
        if ( strpos( $block_content, '<a ' ) === false ) {
            preg_match( '/src="(.*?)"/', $block_content, $matches );
            $image_url = $matches[1];
            $block_content = preg_replace( '/<img(.*?)>/', '<a href="' . $image_url . '" class="fade--in">$0</a>', $block_content );
        }
    }
    return $block_content;
}
add_filter( 'render_block', 'link_wp_block_image_to_media', 10, 2 ); 

该脚本存在两个问题：

• 会为页面上所有图片添加链接，仅需对名为.story的特定容器内的图片生效
• 当<figcaption>内包含文本链接时，无法为对应图片添加链接

修正后的解决方案 #

以下是改进后的脚本，解决了上述问题：

function link_wp_block_image_to_media( $block_content, $block ) {
    // 仅处理core/image块
    if ( 'core/image' !== $block['blockName'] ) {
        return $block_content;
    }

    // 检查当前图片块是否在.story容器内
    $is_in_story = false;
    if ( isset( $block['ancestors'] ) && is_array( $block['ancestors'] ) ) {
        foreach ( $block['ancestors'] as $ancestor_id ) {
            $ancestor_block = parse_blocks( get_post()->post_content )[$ancestor_id] ?? null;
            if ( $ancestor_block && isset( $ancestor_block['attrs']['className'] ) && str_contains( $ancestor_block['attrs']['className'], 'story' ) ) {
                $is_in_story = true;
                break;
            }
        }
    }

    if ( !$is_in_story ) {
        return $block_content;
    }

    // 使用DOM处理HTML，避免正则的局限性
    $dom = new DOMDocument();
    libxml_use_internal_errors( true );
    $dom->loadHTML( mb_convert_encoding( $block_content, 'HTML-ENTITIES', 'UTF-8' ) );
    libxml_clear_errors();

    $img = $dom->getElementsByTagName('img')->item(0);
    if ( !$img ) {
        return $block_content;
    }

    // 仅当图片未被链接包裹时才添加链接
    if ( $img->parentNode->tagName === 'a' ) {
        return $block_content;
    }

    // 优先使用块属性中的原始图片URL，而非缩略图src
    $image_url = $block['attrs']['url'] ?? $img->getAttribute('src');

    // 创建并插入a标签
    $a = $dom->createElement('a');
    $a->setAttribute('href', $image_url);
    $a->setAttribute('class', 'fade--in');
    $img->parentNode->replaceChild( $a, $img );
    $a->appendChild( $img );

    // 返回处理后的内容
    return $dom->saveHTML( $dom->getElementsByTagName('body')->item(0)->firstChild );
}
add_filter( 'render_block', 'link_wp_block_image_to_media', 10, 2 );

改进说明 #

• 仅作用于.story容器：通过遍历图片块的祖先节点，检查是否有包含story类的父容器，确保只处理目标区域内的图片
• 解决figcaption链接干扰问题：不再检查整个块内容中的<a>标签，而是直接判断图片的父节点是否为链接，避免figcaption内的文本链接影响图片处理
• 更准确的原图URL：优先使用WordPress图片块自带的原始媒体文件URL（block['attrs']['url']），而非图片的缩略图src，确保跳转的是真正的原图
• 更可靠的HTML处理：用DOMDocument替代正则表达式解析HTML，避免正则匹配带来的各种边界问题

内容的提问来源于stack exchange，提问作者NORDc