特色图片（有时也称为文章缩略图）是代表单个帖子、页面或自定义后类型的图片。当您创建主题时，可以在归档页面上、头部或帖子上方等多种方式输出特色图片。

启用对特色图片的支持

在出现编辑屏幕上的特色图片界面之前，主题必须声明支持特色图片功能。支持的声明是将以下内容放在主题的 functions.php 文件中：

add_theme_support( 'post-thumbnails' );
若要仅为特定的后类型启用特色图片，请参阅 add_theme_support()

设置特色图片

一旦您添加了对特色图片的支持，相应的内容项目的编辑屏幕上将显示“特色图片”元框。如果用户无法看到它，他们可以在屏幕选项中启用它。

默认情况下，“特色图片”元框显示在“编辑帖子”和“编辑页面”屏幕的侧边栏中。

devhbook-featured_image

函数参考

add_image_size() – 注册一个新的图片尺寸。
set_post_thumbnail_size() – 为帖子缩略图注册一个图片尺寸。

has_post_thumbnail() – 检查帖子是否有附件。
the_post_thumbnail() – 显示帖子缩略图。

get_the_post_thumbnail() – 检索帖子缩略图。
get_post_thumbnail_id() – 检索帖子缩略图的 ID。

图片尺寸

WordPress 的默认图片尺寸为“缩略图”、“中等”、“大”和“完整大小”（您上传的图片原始尺寸）。可以在 WordPress 管理媒体面板下的 >设置 > 媒体中配置这些图片尺寸。您可以通过传递一个包含图片尺寸的数组来定义自己的图片尺寸：

the_post_thumbnail(); // 无参数 ->; 缩略图
the_post_thumbnail( 'thumbnail' ); // 缩略图（默认最大 150px x 150px）
the_post_thumbnail( 'medium' ); // 中等分辨率（默认最大 300px x 300px）
the_post_thumbnail( 'medium_large' ); // 中大型分辨率（默认最大宽度 768px，无高度限制）
the_post_thumbnail( 'large' ); // 大尺寸分辨率（默认最大 1024px x 1024px）
the_post_thumbnail( 'full' ); // 原始图片分辨率（未修改）
the_post_thumbnail( array( 100, 100 ) ); // 其他分辨率（高度，宽度）

添加自定义特色图片尺寸

除了单独使用定义图片尺寸外

the_post_thumbnail( array( , ) );

您还可以在主题的函数文件中创建自定义特色图片尺寸，然后在主题模板文件中进行调用。

add_image_size( 'category-thumb', 300, 9999 ); // 宽度为 300 像素（高度无限制）

以下是在主题的 functions.php 文件中创建自定义特色图片尺寸的示例。

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // 默认特色图片尺寸（裁剪）

    // 其他图片尺寸
    // 如果您不需要额外的图片尺寸，请删除下一行
    add_image_size( 'category-thumb', 300, 9999 ); // 宽度为 300 像素（高度无限制）
}

设置特色图片输出尺寸

用于当前主题的 functions.php 文件中。
您可以使用 set_post_thumbnail_size() 通过按比例调整图像大小（即不扭曲它）来设置默认的特色图片尺寸：

set_post_thumbnail_size( 50, 50 ); // 宽 50 像素，高 50 像素，缩放模式

通过裁剪图像（从侧面或顶部和底部）来设置默认的特色图片尺寸：

set_post_thumbnail_size( 50, 50, true ); // 宽 50 像素，高 50 像素，裁剪模式

样式化特色图片

特色图片被赋予类名“wp-post-image”。它们还会根据显示的缩略图大小获得一个类。您可以使用这些 CSS 选择器对输出进行样式设置：

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

您也可以通过在 the_post_thumbnail() 中使用属性参数来为特色图片赋予自己的类。
使用“alignleft”类显示特色图片：

the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) );

示例

默认用法

// 检查帖子或页面是否分配了特色图片。
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
若要返回用于 PHP 代码的特色图片而不是显示它，请使用：get_the_post_thumbnail()
// 检查特色图片并将其分配给 PHP 变量以供以后使用
if ( has_post_thumbnail() ) {
    $featured_image = get_the_post_thumbnail();
}

链接到帖子永久链接或更大的图片

不要在同一主题中使用这两个示例。

示例 1.要在特定循环中将帖子缩略图链接到帖子永久链接，请在主题的模板文件中的以下内容：

<?php if ( has_post_thumbnail()) : ?>
    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
<?php endif; ?>

示例 2.要将网站上所有帖子缩略图链接到帖子永久链接，请将此内容放在当前主题的 functions.php 文件中：

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {

  $html = '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>';
  return $html;

}

此示例链接到“大”帖子缩略图尺寸，并且必须在循环中使用。

if ( has_post_thumbnail()) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
    echo '<a href="' . $large_image_url[0] . '">';
    the_post_thumbnail('thumbnail');
    echo '</a>';
}

源文件

外部资源