post_thumbnail_html,WordPress 文章特色图片（Post Thumbnail）详细介绍和使用

很多 WordPress 主题，特别是那些杂志型的主题，会给每篇文章加上一张缩略图，一般会在首页使用这种展现方式，缩略图可能单独出现，或者和文章摘要一起。

在 WordPress 2.9 之前，WordPress 没有提供一个标准的方法去实现文章缩略图，很多主题都是使用 WordPress 自定义字段来实现文章缩略图功能，这样的设置比较复杂。

从 WordPress 2.9 开始，WordPress 开始内置了文章缩略图的功能，后面又改成了特色图片(Featured Image，这里为了统计叫法，还是使用文章缩略图的名称)并且提供了详细的接口让主题的作者设置和调用文章的缩略图。

开启文章缩略图功能

要使用文章缩略图功能，首先需要通过函数 functions.php 文件中添加以下代码：

add_theme_support( 'post-thumbnails' );

上面的代码会在 WordPress 后台编辑文章的界面开启设置文章缩略图的窗体，并且同时给文章和页面开启缩略图功能，如果想单独开启的话，使用以下代码：

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给文章启用文章缩略图功能

add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用文章缩略图功能

设置文章缩略图大小

开启了 WordPress 文章缩略图功能之后，我们可以通过函数

盒大小模式(box-resize)按照比例缩小图片直到适合指定的盒子，所以不会扭曲图片。盒大小模式可以指定长度和宽度，比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。

这种模式的好处是可以显示整张图片，缺点是生成的图片并不是一样大的，它是按照最长边来设置的，所以有时候是长度一样，有时候是高度一样。如果我们想限制缩略图到一定的宽度，而不在乎它的高度，这时候我们可以指定缩略图的宽度，然后设置它的高度为 9999 或者其他任何认为够大的一个数字。代码如下：

set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高，盒大小模式

第二种是硬裁剪模式(hard-crop)，这种模式下，图片会被裁剪为指定的大小，这种方式的好处就是得到我们所希望的，比如我们希望得到一张 50X50 的缩略图，就会得到 50X50 的缩略图，缺点就是图片会被裁减，缩略图中只会显示图片的一部分。这种方式的代码是：

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

在主题中显示文章缩略图

现在我们要在主题中使用模板函数来显示文章缩略图，下面这些函数应该在 WordPress 的主循环中使用。

//当前文章有缩略图

} else {

//当前文章没有设置缩略图

} ?>

一个文章缩略图的具体例子

假设我们想在首页使用一个比较小的 50X50 裁剪模式的缩略图，并且想在文章页面使用 400 像素宽(高度不限制)的图片？我们可以设置额外的自定义尺寸缩略图，代码如下：

在 functions.php 中添加如下代码：

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图

add_image_size( 'single-post-thumbnail', 400, 9999 ); // 定义文章页面的缩略图大小

在当前主题的 index.php 或者 home.php(取决主题的结构)中的主循环添加如下代码：

the_post_thumbnail();

} else {

//当前文章没有设置缩略图

} ?>

在当前主题的 single.php (也是主循环中)添加如下代码：

除此之外，我们还可以通过调用

WPJAM Basic 对文章缩略图的增强

如果没有缩略图怎么办？或者之前的版本把缩略图设置到了自定义字段怎么处理？

WPJAM Basic 针对这些情况都做了处理，首先我们可以选择是否将缩略图的设置应用到主题的文章缩略图。

然后可以设置默认文章缩略图，在各种情况都找不到缩略图之后默认的缩略图，可以填本地或者云存储的地址，这样文章缩略图就不会为空了。

最后就是定义文章缩略图顺序，首先使用文章特色图片，如果没有设置文章特色图片，可以定义获取文章缩略图的顺序：

比如上图中，我就首先定义从标签缩略图中获取，如果没有，再从第一张图片，最后从分类缩略图中获取。

关于 WPJAM Basic 的缩略图设置更详细设置请点击这里。

其他文章缩略图相关的函数

作为一篇完整的教程，我们将其他文章缩略图相关函数也一起介绍一下：

有时候我们想获取缩略图的 ID，文章缩略图的 ID 是存在 meta_key 为 _thumbnail_id 的值中，但是我们只需要使用下面简单的函数就可以获取文章的缩略图 ID：

$image_id = get_post_thumbnail_id();

wp_get_attachment_image_url 函数获取图的链接，但是 WordPress 已经提供了现成的函数一步到位：

$thumbnail_url = get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail' );

有时候，我们可能在 PHP 代码中返回文章缩略图，而不是输出它，可以使用下面简单的代码：

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

©我爱水煮鱼，本站推荐使用的主机：

本站长期承接 WordPress 优化和建站业务，请联系微信：「chenduopapa」。