相关文章图片显示异常求助：如何实现图片完整正常展示

1. 修复不完整的PHP代码 #

你的PHP代码片段缺失了缩略图与标题的核心输出逻辑，替换为以下完整代码：

<?php
// 相关文章模块
if ( '1' === $schema_lite_relatedposts_section && empty( $disable_related_posts ) ) {
    $categories = get_the_category( $post->ID );

    if ( $categories ) {
        $category_ids = array();
        foreach ( $categories as $individual_category ) {
            $category_ids[] = $individual_category->term_id;
        }

        $args = array(
            'category__in' => $category_ids,
            'post__not_in' => array( $post->ID ),
            'ignore_sticky_posts' => 1,
            'showposts'    => 6,
            'orderby'      => 'rand',
        );

        $my_query = new wp_query( $args );

        if ( $my_query->have_posts() ) {
            echo '<div class="related-posts"><div class="postauthor-top"><h3>' . __('Related Downloads:', 'schema-lite') . '</h3></div>';

            $j = 0;
            while ( $my_query->have_posts() ) {
                $my_query->the_post();
                ?>
                <article class="post excerpt <?php echo ( ++$j % 3 == 0 ) ? 'last' : ''; ?>">
                    <?php if ( has_post_thumbnail() ) { ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="relatedfeatured-thumbnail">
                            <?php the_post_thumbnail( 'thumbnail', array( 'alt' => get_the_title() ) ); ?>
                        </a>
                    <?php } ?>
                    <header>
                        <h2 class="entry-title">
                            <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
                        </h2>
                    </header>
                </article>
                <?php
            }
            echo '</div>';
            wp_reset_postdata();
        }
    }
}
?>

关键修正点：

• 补全the_post_thumbnail()代码，正确输出特色图片
• 将relatedfeatured-thumbnail从ID改为class（避免重复ID导致的样式失效）
• 完善标题输出结构，确保每个文章都有可点击的标题
• 添加wp_reset_postdata()重置查询状态，避免影响后续内容

2. 调整CSS样式匹配目标布局 #

替换现有CSS为以下代码，实现图片与标题的对齐显示：

.related-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.related-posts .post.excerpt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
}

.relatedfeatured-thumbnail img {
    width: 60px;
    height: 60px;
    object-fit: cover; /* 保持图片比例，避免拉伸变形 */
    border-radius: 4px;
}

.related-posts .entry-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.related-posts .entry-title a {
    color: #333;
    text-decoration: none;
}

.related-posts .entry-title a:hover {
    color: #0073aa;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .related-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

样式说明：

• 使用Grid布局实现三列整齐排列
• Flex布局让图片与标题垂直居中对齐
• object-fit: cover确保图片完整显示且比例正确
• 调整间距与背景样式，匹配目标截图的视觉效果

3. 验证与调试 #

1. 保存修改后的PHP与CSS文件
2. 刷新文章页面查看效果
3. 若仍有样式冲突，可在CSS选择器前增加.related-posts前缀提高优先级

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