WordPress为搜索结果摘要添加特色图片的函数实现方案

问题说明 #

想要给WordPress搜索结果的摘要区块添加文章特色图片，最初通过直接修改核心文件wp-includes/blocks/post-excerpt.php实现，但这种方式存在隐患——WordPress版本更新后核心文件会被覆盖，自定义代码会失效。尝试钩子方案初期未成功显示图片，经调试后得到稳定可行的实现方式。

不推荐的核心文件修改方式 #

以下是直接修改核心文件的代码示例，不建议使用：

function render_block_core_post_excerpt( $attributes, $content, $block ) {
    if ( ! isset( $block->context['postId'] ) ) {
        return '';
    }

    /*
    * 摘要长度设置的目的是限制自动生成和用户创建的摘要长度。
    * 由于excerpt_length过滤器仅适用于自动生成的摘要，因此改用wp_trim_words。
    */
    $excerpt_length = $attributes['excerptLength'];
    $excerpt        = get_the_excerpt( $block->context['postId'] );
    if ( isset( $excerpt_length ) ) {
        $excerpt = wp_trim_words( $excerpt, $excerpt_length );
    }

    $more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
    $filter_excerpt_more = static function ( $more ) use ( $more_text ) {
        return empty( $more_text ) ? $more : '';
    };
    /**
     * 部分主题可能使用`excerpt_more`过滤器处理截断摘要后的"更多"链接。
     * 由于区块有"更多文本"属性，我们需要检查并在必要时覆盖该过滤器的返回值。
     * 因此如果区块属性不为空，就覆盖`excerpt_more`过滤器并返回空值，确保只显示一个"阅读更多"链接。
     */
    add_filter( 'excerpt_more', $filter_excerpt_more );
    $classes = array();
    if ( isset( $attributes['textAlign'] ) ) {
        $classes[] = 'has-text-align-' . $attributes['textAlign'];
    }
    if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
        $classes[] = 'has-link-color';
    }
    $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
    $thumbnail = get_the_post_thumbnail($post->ID, 'thumbnail');
    $content               = '<div>' . $thumbnail . '</div><p class="wp-block-post-excerpt__excerpt">'. $excerpt;
    $show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];
    if ( $show_more_on_new_line && ! empty( $more_text ) ) {
        $content .= '</p><p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';
    } else {
        $content .= " $more_text</p>";
    }
    remove_filter( 'excerpt_more', $filter_excerpt_more );
    return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );
}

推荐的主题钩子方案 #

使用WordPress的render_block过滤器，将代码添加到当前主题的functions.php文件中即可，无需修改核心文件，WordPress更新或主题更新（子主题/自定义主题）都不会影响代码生效：

function my_custom_render( $block_content, $block ) {
    if ( $block['blockName'] === 'core/post-excerpt' ) {
        global $post; // 全局调用当前文章对象，确保能获取到文章ID
        $thumbnail = get_the_post_thumbnail( $post->ID, 'thumbnail' );
        return '<div>'. $thumbnail .'</div>' . $block_content;
    }
    return $block_content;
}
add_filter( 'render_block', 'my_custom_render', 10, 2 );

代码说明

• 钩子render_block用于拦截区块的渲染内容，判断当前区块是否为core/post-excerpt（文章摘要区块）
• 通过global $post获取当前文章对象，确保能正确获取文章特色图片
• 将特色图片的HTML代码添加到摘要内容的前方，实现需求

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