两个使用WordPress缩略图的方法

在博客上用到缩略图的机会很多,它们出现在文章列表页面,文章下方的相关文章,分类页面的类目图片,甚至有些博客很新潮地淡化文字以图片瀑布流作为文章索引。

站长们知道缩略图可以吸引眼球,一直在寻找更好的使用方法。本文将会介绍WordPress上常用的两个调用缩略图的方法,以及他们的适用场景。

调用文章第一个图片

WordPress Media一直支持上传图片生成包括缩略图,中等尺寸,大尺寸和原图4个规格的图片,而这恐怕是为了方便我们在文章内调用不同尺寸的图片。

凭文章ID就可以找到第一个图片。这里可以写成方法如下,用户获取第一个缩略图,如果没有上传过图片,返回空字符串。

function getFirstImage($postId) {
$args = array(
‘numberposts’ => 1,
‘order’=> ‘ASC’,
‘post_mime_type’ => ‘image’,
‘post_parent’ => $postId,
‘post_status’ => null,
‘post_type’ => ‘attachment’
);
$attachments = get_children($args);

// 如果没有上传图片, 返回空字符串
if(!$attachments) {
return ”;
}

// 获取缩略图中的第一个图片, 并组装成 HTML 节点返回
$image = array_pop($attachments);
$imageSrc = wp_get_attachment_image_src($image->ID, ‘thumbnail’);
$imageUrl = $imageSrc[0];
$html = ‘<img src=”‘ . $imageUrl . ‘” alt=”‘ . the_title(”, ”, false) . ‘” />’;
return $html;
}

调用的代码如下。

$thumb = getFirstImage($post->ID);
if(strlen($thumb) > 0) {
echo $thumb;
} else {
// 显示默认图片或者不做任何事情
}

文章特征图片(Featured Image)功能

WordPress 2.9之后,WordPress 提供了文章特征图片功能,可以为文章设定一个上传的图片作为特征图片,并可以给图片设定多个尺寸以便在不同的环境使用。可按一下步骤调用:

1. 为WordPress主题添加特征图片支持,并设定特征图片的尺寸和别名。

add_theme_support(‘post-thumbnails’); // 支持特征图片功能

add_image_size(‘thumb’, 180, 180); // 别名为 thumb, 尺寸为 150×150 的设定

add_image_size(‘recommend’, 120, 120); // 别名为 recommend, 尺寸为 120×120 的设定

我们可以将以上代码加到 functions.php 文件, 为主题添加添加了Featured Image 支持, 并设定了 180×180 和 120×120 两种尺寸的图片。

其中 add_image_size 用于定义一种特征图片尺寸, 参考 WordPress Codex, 实际上它有 4 个参数。

第 1 个参数: 特征图片的尺寸别名, 用于调用不同尺寸的缩略图。

第 2 个参数: 图片的宽度

第 3 个参数: 图片的高度

第 4 个参数: 参数是个布尔值, 用于指定图片的裁切方式。 默认为 false.

如果为 true, 图片会按较大的压缩比例处理, 多余部分裁剪掉。 比如现在有图片 900×600, 要求压缩成 150×150 的图片, 那么会先将图片压缩成 225×150 的图片, 才裁剪成 150×150.

如果为 false, 图片会按较小的压缩比例处理。 比如现在有图片 900×600, 要求压缩成 150×150 的图片, 那么会将图片压缩成 150×100 的图片。

下图是两个缩略图, 原图 1024×768, 左缩略图是 add_image_size(‘xxx’, 120, 120, true);, 而右图使用的是 add_image_size(‘xxx’, 120, 120, false);。