WordPress 特色图片调用代码实现 PC 与移动端加载不同尺寸缩略图

时间：2026-07-21 21:34:27 来源：aliz.cn 作者：SKY 阅读：

前言

搭建 WordPress 资讯站、资源站，首页与栏目列表文章封面图如果共用一套尺寸，很容易出现两种问题：PC 端图片拉伸难看，移动端图片过大加载缓慢。

最佳解决方案：PC、移动端分别使用独立尺寸缩略图。很多新手会采用 JS 切换图片，存在延迟、不利于 SEO；本文提供两套原生方案：HTML srcset 响应式（首选）、PHP 判断 UA 适配，全部原生 WP 函数，无需额外插件，同时整合「无特色图片自动显示默认图」逻辑。

一、基础前置：开启特色图片支持 + 自定义缩略图尺寸

将代码添加到主题 functions.php

// 开启特色图片功能
add_theme_support( 'post-thumbnails' );

// PC端列表缩略图 宽360 高202 true=居中强制裁剪
add_image_size( 'thumb-pc', 360, 202, true );
// 移动端列表缩略图 宽750 高420 true=居中强制裁剪
add_image_size( 'thumb-mobile', 750, 420, true );

⚠️重要提醒：新增图片尺寸后，旧上传图片不会自动生成新尺寸，安装插件 Regenerate Thumbnails 一键重建缩略图；新上传图片会自动生成两套尺寸。

参数说明： true：居中裁剪，不会产生黑边，适合列表封面； false：等比例完整缩放，保留原图全部内容。

方案一：srcset 原生响应式（强烈推荐，静态缓存站点首选）

原理：利用浏览器屏幕宽度自动选择对应图片，不依靠 PHP 判断访问设备，不受页面缓存、CDN 影响，SEO 友好，现代浏览器全部兼容。

列表循环完整调用代码

<?php
if ( has_post_thumbnail() ) {
    // 存在特色图片，读取两套尺寸地址
    $img_pc = get_the_post_thumbnail_url( get_the_ID(), 'thumb-pc' );
    $img_mobile = get_the_post_thumbnail_url( get_the_ID(), 'thumb-mobile' );
} else {
    // 没有特色图片，加载两套默认占位图
    $img_pc = get_template_directory_uri() . '/skin/images/nopic_pc.jpg';
    $img_mobile = get_template_directory_uri() . '/skin/images/nopic_m.jpg';
}
$alt_text = esc_attr( get_the_title() );
?>
<a href="<?php the_permalink(); ?>">
    <img 
        srcset="<?php echo $img_mobile; ?> 750w, <?php echo $img_pc; ?> 360w"
        sizes="(max-width:768px) 750px, 360px"
        src="<?php echo $img_pc; ?>" 
        alt="<?php echo $alt_text; ?>"
        loading="lazy"
    >
</a>

代码说明：

loading="lazy" 开启图片懒加载，优化页面加载速度；
sizes 设置分界：768px 作为移动端与 PC 断点；
esc_attr() 转义标题，防止特殊符号引发 HTML 报错。

封装全局函数（推荐，模板一行调用）

放入 functions.php，全站任意位置直接调用，便于统一维护图片路径：

function aliz_get_post_thumb_responsive(){
    $size_pc = 'thumb-pc';
    $size_mob = 'thumb-mobile';
    // 默认图片路径根据自己主题修改
    $default_pc = get_template_directory_uri().'/skin/images/nopic_pc.jpg';
    $default_mob = get_template_directory_uri().'/skin/images/nopic_m.jpg';

    if(has_post_thumbnail()){
        $url_pc = get_the_post_thumbnail_url(get_the_ID(),$size_pc);
        $url_mob = get_the_post_thumbnail_url(get_the_ID(),$size_mob);
    }else{
        $url_pc = $default_pc;
        $url_mob = $default_mob;
    }
    $title = esc_attr(get_the_title());
    $html = '<img srcset="'.$url_mob.' 750w, '.$url_pc.' 360w" sizes="(max-width:768px)750px,360px" src="'.$url_pc.'" alt="'.$title.'" loading="lazy">';
    return $html;
}

模板调用方式：

<?php echo aliz_get_post_thumb_responsive(); ?>

方案二：PHP 判断 UA 输出不同图片（兼容老旧浏览器）

适用场景：需要严格区分设备，必须输出单一图片地址；缺点：开启页面静态缓存、CDN 缓存环境容易判断失效，缓存站点优先使用 srcset 方案。

1、functions.php 添加移动端判断函数

function aliz_is_mobile() {
    $ua = $_SERVER['HTTP_USER_AGENT'];
    $mobile_words = ['android','iphone','ipad','ipod','windows phone','mobile'];
    foreach ($mobile_words as $word) {
        if(stripos($ua,$word)!==false){
            return true;
        }
    }
    return false;
}

2、列表模板完整调用示例

<?php
$is_mobile = aliz_is_mobile();
if ( has_post_thumbnail() ) {
    if($is_mobile){
        $thumb_url = get_the_post_thumbnail_url(get_the_ID(),'thumb-mobile');
    }else{
        $thumb_url = get_the_post_thumbnail_url(get_the_ID(),'thumb-pc');
    }
}else{
    // 无图默认图
    if($is_mobile){
        $thumb_url = get_template_directory_uri().'/skin/images/nopic_m.jpg';
    }else{
        $thumb_url = get_template_directory_uri().'/skin/images/nopic_pc.jpg';
    }
}
?>
<a href="<?php the_permalink(); ?>">
    <img src="<?php echo $thumb_url; ?>" alt="<?php the_title(); ?>" loading="lazy">
</a>

补充：基础特色图片简易调用（新手备用）

只需要单一尺寸、不需要自适应可以直接使用这套基础代码：

<?php
if ( has_post_thumbnail() ) {
    $thumb = get_the_post_thumbnail_url(get_the_ID(),'thumb-pc');
}else{
    $thumb = get_template_directory_uri().'/skin/images/nopic.jpg';
}
?>
<img src="<?php echo $thumb; ?>" alt="<?php the_title(); ?>">