WordPress 调用特色图片生成缩略图完整方案

一、前置开启特色图片功能

很多主题默认关闭文章特色图片支持，首先在主题 functions.php开启支持：

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

// 可选：自定义新增缩略图尺寸（名称,宽,高,是否强制裁剪true/false）
add_image_size( 'list-thumb', 320, 180, true );
add_image_size( 'home-thumb', 420, 240, true );

代码放入 functions.php，新增尺寸后，旧图片需要使用「重新生成缩略图」插件生成对应尺寸。

参数说明： true = 居中强制裁剪（无黑边，适合列表封面） false = 等比例缩放，不裁切

二、基础调用语法（循环内使用，index.php/archive.php/home.php）

1. 最简调用（自动使用主题默认缩略图尺寸）

<?php if ( has_post_thumbnail() ) : ?>
    <?php the_post_thumbnail(); ?>
<?php endif; ?>

2. 指定自定义尺寸（推荐，统一列表封面大小）

<?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('list-thumb', ['alt' => get_the_title()]); ?>
    </a>
<?php endif; ?>

三、进阶：无特色图片时显示默认占位图（高频需求）

方案 1：模板内直接判断（最常用）

<?php
if ( has_post_thumbnail() ) {
    // 存在特色图片
    the_post_thumbnail('list-thumb', ['alt' => get_the_title()]);
} else {
    // 无图输出默认缩略图
    echo '<img src="'.get_template_directory_uri().'/skin/images/nopic.jpg" alt="默认图片">';
}
?>

方案 2：封装函数，全局复用（推荐写到 functions.php）

/**
 * 获取文章缩略图，无图返回默认图
 * @param string $size 图片尺寸标识
 */
function aliz_get_post_thumb($size = 'list-thumb'){
    if( has_post_thumbnail() ){
        return get_the_post_thumbnail(get_the_ID(), $size, ['alt' => get_the_title()]);
    }else{
        $default_img = get_template_directory_uri().'/skin/images/nopic.jpg';
        return '<img src="'.$default_img.'" alt="默认封面">';
    }
}

模板调用方式：

<?php echo aliz_get_post_thumb('list-thumb'); ?>

四、只获取图片地址，自由拼接 HTML（高度自定义场景）

the_post_thumbnail() 直接输出完整<img>标签；如果你只想拿到图片 URL 自行布局：

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

五、常用循环完整示例（首页列表模板标准代码）

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="item">
    <?php
    if( has_post_thumbnail() ){
        $imgurl = get_the_post_thumbnail_url(get_the_ID(),'list-thumb');
    }else{
        $imgurl = get_template_directory_uri().'/skin/nopic.jpg';
    }
    ?>
    <a href="<?php the_permalink(); ?>">
        <img src="<?php echo $imgurl; ?>" alt="<?php the_title(); ?>">
    </a>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <p><?php echo wp_trim_words(get_the_excerpt(),18); ?></p>
</div>
<?php endwhile; endif; ?>

六、关键函数对照表

表格

函数	作用
has_post_thumbnail()	判断文章是否存在特色图片
the_post_thumbnail($size,$attr)	直接输出 img 标签
get_the_post_thumbnail_url(ID,size)	获取缩略图 URL 地址
get_the_post_thumbnail()	获取完整 img 字符串，不直接输出

七、常见踩坑问题

1、新增图片尺寸，旧文章不生成缩略图

WP 不会自动对旧图片生成新尺寸，安装插件：Regenerate Thumbnails，一键重建。

2、特色图片不裁剪，留白很大

添加尺寸时第三个参数设置为 true：

add_image_size( 'list-thumb', 320, 180, true );

3、CDN 站点图片路径不对

不要硬编码域名，统一使用 get_template_directory_uri()、wp_get_attachment_image_src()，WP 自动适配站点域名。

4、alt 为空，不利于 SEO

调用时手动传入 alt 标题，不要使用系统默认空 alt。

八、拓展：获取特色图片原图地址

<?php
$full_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
if($full_img){
    echo $full_img[0]; //原图url
}
?>

总结

1. 先 add_theme_support( 'post-thumbnails' ); 开启功能；
2. has_post_thumbnail() 判断是否存在封面；
3. the_post_thumbnail() 快速输出，get_the_post_thumbnail_url() 获取图片链接自由布局；
4. 封装函数统一处理「无图默认占位图」，减少模板重复代码。

本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载