WordPress特色图片PC与移动端输出不同尺寸 srcset响应式完整教程

时间：2026-08-13 22:37:13 来源：aliz.cn 作者：SKY 阅读：

原创实测｜适用于 WordPress6.x。普通直接调用the_post_thumbnail()虽然自带 srcset，但自由度低；很多开发场景希望：大屏加载大图，手机加载小图，减少移动端图片体积。本文使用 WordPress 原生srcset + sizes实现，不需要 JavaScript，浏览器根据屏幕宽度自动选择最合适的图片资源。同时提供封装函数，模板一行调用。

一、先注册多套自定义图片尺寸

打开主题 functions.php，注册 2 套尺寸：移动端小图、PC 端大图
php
运行

//开启特色图片支持
add_theme_support( 'post-thumbnails' );

//移动端缩略图 360*220 裁剪
add_image_size( 'thumb_mobile', 360, 220, true );
//PC端列表缩略图 520*320 裁剪
add_image_size( 'thumb_pc', 520, 320, true );

⚠️已经上传的旧图片不会自动生成新尺寸，安装插件 Regenerate Thumbnails 重新生成图片规格。

二、封装函数：输出带 srcset 响应式特色图片

放到functions.php末尾，模板直接调用，无图自动输出默认占位图。
php
运行

/**
 * aliz.cn 响应式特色图片 srcset
 * @param int $postid 文章ID
 * @return string img html
 */
function aliz_get_responsive_thumb($postid=0){
    if(empty($postid)) $postid = get_the_ID();
    $default_img = get_template_directory_uri().'/images/default-thumb.jpg';

    if(!has_post_thumbnail($postid)){
        return '<img src="'.esc_url($default_img).'" class="resp-thumb" alt="'.esc_attr(get_the_title($postid)).'">';
    }

    $thumb_id = get_post_thumbnail_id($postid);
    //获取两套尺寸图片url
    $img_mobile = wp_get_attachment_image_src($thumb_id,'thumb_mobile')[0];
    $img_pc = wp_get_attachment_image_src($thumb_id,'thumb_pc')[0];

    $alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
    if(empty($alt)) $alt = get_the_title($postid);

    $html = '<img
        src="'.esc_url($img_pc).'"
        srcset="'.esc_url($img_mobile).' 480w, '.esc_url($img_pc).' 800w"
        sizes="(max-width:480px) 360px, 520px"
        class="resp-thumb"
        alt="'.esc_attr($alt).'">';

    return $html;
}

srcset 与 sizes 参数解释

srcset：图片地址 + 图片宽度标识
- 480w：屏幕宽度≤480px，使用移动端小图
- 800w：大于 480px 使用 PC 大图
sizes：告诉浏览器图片在页面上实际显示多大
- (max-width:480px) 360px：手机端图片显示宽度 360px
- 520px：桌面端图片显示宽度 520px

三、模板里面调用

在文章循环while ( have_posts() ) : the_post();内部直接调用
php
运行

<?php echo aliz_get_responsive_thumb(); ?>

循环外部调用，传入文章 ID：
php
运行

<?php echo aliz_get_responsive_thumb(123); ?>

四、配套 CSS 样式

加到主题 style.css，防止图片溢出容器
css

.resp-thumb{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}

五、WP_Query 自定义循环完整示例

php
运行

<?php
$myquery = new WP_Query([
    'post_type'=>'post',
    'posts_per_page'=>10
]);
if($myquery->have_posts()){
    while($myquery->have_posts()){
        $myquery->the_post();
?>
<div class="list-item">
    <div class="pic-box">
        <?php echo aliz_get_responsive_thumb(); ?>
    </div>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php
    }
    wp_reset_postdata();
}
?>

六、浏览器如何验证是否生效

Chrome F12 开发者工具 → Network 面板，过滤 img：

手机模拟器（宽度＜480px）加载thumb_mobile小图；
切换到桌面尺寸，加载thumb_pc大图；

注意：浏览器会缓存图片，测试时勾选「Disable cache」禁用缓存。

七、常见问题排查

srcset 不生效，永远加载一张图

清除浏览器缓存；
sizes 属性必须和图片实际展示宽度匹配，如果写错，浏览器不会切换图片；
图片必须已经生成thumb_mobile、thumb_pc尺寸，使用 Regenerate Thumbnails 重建。

图片地址返回 false 特色图片 ID 存在，但是没有生成对应尺寸，重建缩略图。
不想新增图片尺寸，直接使用系统自带尺寸 把thumb_mobile替换系统medium，thumb_pc替换large即可，不用 add_image_size。
CDN 环境 srcset 图片路径错误 大部分国内 CDN 兼容 srcset；如果路径异常，开启 CDN 的 WordPress 适配插件。

八、备选方案：CSS 媒体查询两套图片（不推荐）

不推荐，会一次性加载两张图片，浪费流量，仅做了解。

php
运行

<?php
$m = wp_get_attachment_image_src(get_post_thumbnail_id(),'thumb_mobile')[0];
$pc = wp_get_attachment_image_src(get_post_thumbnail_id(),'thumb_pc')[0];
?>
<picture>
    <source media="(max-width:480px)" srcset="<?php echo $m; ?>">
    <img src="<?php echo $pc; ?>" alt="">
</picture>