什么是“特色图像”（Featured Image）？
特色图像是 WordPress 为每篇文章、页面或自定义文章类型设置的一个特定图片，它就像文章的“封面图”或“海报”,可以在网站的各个地方被调用和显示。
如何设置特色图像？（基础步骤）
设置过程非常简单,只需要几个步骤。
第1步：确保你的主题支持特色图像
绝大多数现代 WordPress 主题都默认支持特色图像功能，你可以在你的主题文件中找到类似 add_theme_support('post-thumbnails'); 的代码来确认。
如果你的主题不支持，你可以通过在当前主题的 functions.php 文件中添加以下代码来启用它：
// 启用文章和页面的特色图像功能
add_theme_support('post-thumbnails', array('post', 'page'));
注意： 修改 functions.php 文件有风险，建议在修改前先备份,或者使用子主题来添加。
第2步：为文章设置特色图像
-
进入文章编辑页面：登录你的 WordPress 后台，点击“文章” -> “写文章”（或编辑一篇已有的文章）。
-
找到“特色图像”模块：在文章编辑界面的右侧边栏，你会看到一个名为“特色图像”的模块，如果看不到右侧边栏，可以点击编辑器右上角的三个点图标，然后选择“右侧边栏”。
-
设置图像：
- 设置已有图像：点击“设置特色图像”，会弹出你的媒体库，从列表中选择一张合适的图片，然后点击“使用特色图像”按钮。
- 上传新图像：在弹出的媒体库窗口中，点击“上传文件”选项卡，然后拖拽图片到上传区域，或点击“选择文件”按钮来上传一张新图片，上传后，同样点击“使用特色图像”。
-
完成设置：设置成功后，你会看到右侧的“特色图像”模块中已经显示了你选择的图片缩略图，并显示“已设置”字样,发布或更新你的文章即可。
（图片来源网络，侵删）
如何在前端显示特色图像？（代码部分）
设置好特色图像后，你需要在你的主题模板文件中调用它，才能让访客看到，这需要一些基础的 PHP 和 HTML 知识。
在文章列表（首页、分类页、归档页）中显示
你需要修改主题的循环（Loop）中的模板文件，通常是 content.php 或 archive.php 等文件。
在 the_title() 或 the_excerpt() 等函数附近,添加以下代码：
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
代码解释：
<?php if ( has_post_thumbnail() ) : ?>：检查当前文章是否设置了特色图像，如果设置了，就执行下面的代码；如果没有，则跳过,这样可以避免在没有图片的地方显示一个丑陋的占位符。<a href="<?php the_permalink(); ?>">：将特色图像包裹在一个链接中,链接指向文章的完整页面。<?php the_post_thumbnail(); ?>：这是核心函数，用于输出特色图像，它会自动生成<img><?php endif; ?>：if语句的结束。
在文章单页（single.php）中显示
在文章详情页，你可能想在文章标题上方或下方显示一张大图，可以在 single.php 文件中的 the_content() 函数前后添加代码。
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'large' ); // 使用 'large' 尺寸 ?>
<?php endif; ?>
<?php the_content(); ?>
控制特色图像的尺寸
the_post_thumbnail() 函数可以接受一个参数来指定显示的尺寸，WordPress 默认会生成三种尺寸：
thumbnail：缩略图（通常在列表中使用）medium：中等尺寸large：大尺寸（通常在文章详情页使用）full：原始尺寸
你也可以自定义尺寸。
// 显示默认的缩略图尺寸 <?php the_post_thumbnail(); ?> // 显示中等尺寸 <?php the_post_thumbnail( 'medium' ); ?> // 显示大尺寸 <?php the_post_thumbnail( 'large' ); ?> // 显示原始尺寸 <?php the_post_thumbnail( 'full' ); ?>
高级技巧与常见问题
为不同文章类型设置不同的尺寸
你可以在 functions.php 中为“文章”和“页面”设置不同的缩略图尺寸。
add_theme_support('post-thumbnails');
// 为文章设置缩略图尺寸
set_post_thumbnail_size( 640, 360, true ); // 宽640px，高360px，强制裁剪
// 为“页面”添加一个额外的缩略图尺寸
add_image_size( 'page-header-image', 1200, 400, true ); // 宽1200px，高400px，强制裁剪
然后在调用页面特色图像时使用：
<?php the_post_thumbnail( 'page-header-image' ); ?>
中自动插入特色图像
如果你希望特色图像自动显示在文章内容的开头，可以在 functions.php 中添加以下代码：
function auto_featured_image() {
global $post;
// 如果文章没有内容，则不执行
if ( ! has_post_thumbnail( $post->ID ) ) {
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ( $attached_image ) {
foreach ( $attached_image as $attachment_id => $attachment ) {
set_post_thumbnail( $post->ID, $attachment_id );
}
}
}
}
// 在保存文章时触发此函数
add_action( 'save_post', 'auto_featured_image' );
注意：这个功能会将文章上传的第一张图片自动设为特色图像,但可能会让你失去手动选择的灵活性。
为什么我的特色图像不显示？
这是最常见的问题,原因通常有以下几点：
- 主题不支持：你的主题没有启用
post-thumbnails功能。 - 模板文件未调用：你修改了模板文件，但忘记添加
the_post_thumbnail()函数。 - CSS 样式问题：图片代码已经存在，但被 CSS 隐藏了（
display: none;或opacity: 0;），或者图片尺寸和容器尺寸不匹配导致被“挤”出去了，检查你的主题 CSS 文件。 - 缓存问题：如果你使用了缓存插件（如 WP Rocket, W3 Total Cache）,清除缓存后可能会恢复正常。
- 权限问题：确保你上传图片的目录（
/wp-content/uploads/）有正确的读写权限。
使用插件管理特色图像
如果你觉得手动修改代码很麻烦，或者需要更强大的功能,可以考虑使用插件。
- SEO 插件：像 Yoast SEO 和 Rank Math 这类流行的 SEO 插件，它们在设置 SEO 标题和描述时，会同时提供一个选项来设置“分享图片”（Share Image），这张图片通常就是用于 Facebook、Twitter 等社交媒体分享时的缩略图，它和 WordPress 的“特色图像”可以是同一张,也可以单独设置。
- 缩略图生成器插件：像 Regenerate Thumbnails 这样的插件，可以在你修改了缩略图尺寸后，重新生成所有已上传图片的新尺寸,以避免图片被拉伸或模糊。
- 设置：在文章编辑页面的右侧边栏，“特色图像”模块中设置。
- 显示：在主题模板文件（如
archive.php,single.php）中，使用has_post_thumbnail()和the_post_thumbnail()函数来调用。 - 进阶：通过
functions.php自定义尺寸,或使用插件增强功能。
掌握特色图像的设置，是优化 WordPress 网站视觉效果和用户体验的关键一步,希望这份指南能帮到你！
