WordPress 文章特色图片（缩略图）功能

从 WordPress 2.9 开始，WordPress 开始内置了文章缩略图的功能，后面又把名称改为特色图片（Featured Image），这里为了统一叫法，还是使用「文章缩略图」的名称，并且 WordPrss 还提供了接口让主题的作者可以自定义设置和调用文章缩略图。

今天就讲解一下如何使用开启，自定义和使用文章缩略图。

🔓 开启文章缩略图功能

要使用文章缩略图功能，首先需要通过函数 add_theme_support() 来开启，具体是在当前 WordPress 主题的 functions.php 文件中添加以下代码：

add_theme_support( 'post-thumbnails' );

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

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

🔎 设置文章缩略图大小

开启了 WordPress 文章缩略图功能之后，我们可以通过函数 set_post_thumbnail_size() 来设置缩略图的大小，这里有两种方式：盒大小（box-resize）模式和裁剪（hard-crop）模式。

盒大小模式（box-resize）

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

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

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

硬裁剪模式（hard-crop）

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

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

🛠️ 一个具体的例子

假设我们想在首页使用一个比较小的 50×50 裁剪模式的缩略图，并且想在文章页面使用 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（取决主题的结构）中的主循环添加如下代码：

<?php if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} else {
	//当前文章没有设置缩略图
} ?>

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

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

通过函数 set_post_thumbnail_size() 可以生成默认的文章缩略图。

除此之外，我们还可以通过调用 add_image_size(); 来增加额外的文章缩略图尺寸，然后在文章页面通过 the_post_thumbnail(); 调用新的缩略图尺寸来显示新的缩略图。

🔗 参考资料

一文详解 WordPress 文章特色图片（缩略图）功能，by denishua

---