如何根据容器类动态调整WordPress文章缩略图尺寸？

最优方案：后端循环时直接判断位置输出对应类和尺寸 #

因为前端jQuery添加类的时机在PHP渲染之后，此时默认的medium缩略图已经加载完成，所以最靠谱的方式是在后端循环时直接根据帖子位置，给容器添加对应类并输出匹配的缩略图尺寸，完全不需要前端额外操作：

代码实现 #

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php
    // 初始化类名和缩略图尺寸
    $container_class = '';
    $thumb_size = 'medium';

    // 处理第一个帖子（full类 + large尺寸）
    if ( $wp_query->current_post === 0 ) {
        $container_class = 'full';
        $thumb_size = 'large';
    } 
    // 处理第8n+2、8n+3位的帖子（half类 + custom_medium_large尺寸）
    else {
        // 转为从1开始的帖子序号
        $post_position = $wp_query->current_post + 1;
        if ( ($post_position - 2) % 8 === 0 || ($post_position - 3) % 8 === 0 ) {
            $container_class = 'half';
            $thumb_size = 'custom_medium_large';
        }
    }
    ?>
    <div class="<?php echo esc_attr( $container_class ); ?>">
        <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
            <?php the_post_thumbnail( $thumb_size ); ?>
        </a>
    </div>
<?php endwhile; endif; ?>

注意事项 #

1. 确保custom_medium_large尺寸已在主题中注册，在functions.php添加：

add_action( 'after_setup_theme', 'register_custom_image_size' );
function register_custom_image_size() {
    // 可根据需求调整宽高和裁剪模式
    add_image_size( 'custom_medium_large', 800, 600, true );
}

2. 旧文章需要使用「Regenerate Thumbnails」插件重新生成该尺寸的缩略图。

备选方案：前端替换图片资源（不推荐） #

如果必须保留前端动态加类的逻辑，可以通过JS替换图片的src和srcset属性，但会导致图片二次加载，影响性能：

代码实现 #

jQuery(document).ready(function($) {
    // 先执行原有的加类逻辑
    $(".home .grid div:first").addClass("full");
    $('.home div:not(:first-child):nth-child(8n+2), .home div:not(:first-child):nth-child(8n+3)').addClass('half');

    // 替换full类容器的图片为large尺寸
    $(".home .grid div.full img").each(function() {
        const $img = $(this);
        // 替换文件名中的尺寸后缀（需确保WP缩略图命名符合默认规则）
        const largeSrc = $img.attr('src').replace('-medium.', '-large.');
        const largeSrcset = $img.attr('srcset')?.replace('-medium.', '-large.');
        
        $img.attr('src', largeSrc);
        if (largeSrcset) $img.attr('srcset', largeSrcset);
        $img.attr('sizes', '100vw'); // 根据full布局调整sizes值
    });

    // 替换half类容器的图片为custom_medium_large尺寸
    $(".home .grid div.half img").each(function() {
        const $img = $(this);
        const customSrc = $img.attr('src').replace('-medium.', '-custom_medium_large.');
        const customSrcset = $img.attr('srcset')?.replace('-medium.', '-custom_medium_large.');
        
        $img.attr('src', customSrc);
        if (customSrcset) $img.attr('srcset', customSrcset);
        $img.attr('sizes', '50vw'); // 根据half布局调整sizes值
    });
});

局限性 #

• 仅适用于WP默认命名规则的缩略图（文件名包含-尺寸名后缀）；
• 会先加载medium尺寸图片，再替换为目标尺寸，造成带宽浪费；
• 若图片使用CDN或自定义命名规则，此方法失效。

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