縮略圖出現在文章列表頁面, 文章下方的相關文章, 分類頁面的類目圖片, 甚至有些博客很新潮地淡化文字以圖片瀑布流作為文章索引， 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="'%20.%20$imageUrl%20.%20'" 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, 尺寸為 150x150 的設定
add_image_size('recommend', 120, 120); // 別名為 recommend, 尺寸為 120x120 的設定

我們可以將以上代碼加到 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, <strong>true</strong>);

, 而右圖使用的是

add_image_size('xxx', 120, 120, <strong>false</strong>);

.

add_image_size 第四個參數效果對比 1

2. 判斷是否存在特徵圖片和顯示縮略圖.

if(has_post_thumbnail()) {
	the_post_thumbnail('thumb');
} else {
	// 顯示默認圖片或者不做任何事情
}

上述代碼判斷文章中是否存在特徵圖片, 如果存在則顯示別名為 thumb 的縮略圖, 如果沒有可以顯示默認圖片或者留空. 我們在前面還設定了別名為 recommend 的縮略圖, 那麼我們可以在不同的場合使用不同的縮略圖. 比如: 在文章列表頁面使用

the_post_thumbnail('thumb');

展示 180×180 的縮略圖, 而在文章底部的相關文章區域通過

the_post_thumbnail('recommend');

展示 120×120 的縮略圖.

3. 在編寫文章的時候設定特徵圖片.

如果我們為主題添加了特徵圖片支持, 在編輯文章頁面上傳圖片後, 在 Insert into Post 按鈕的旁邊可以找到 Use as featured image 鏈接將圖片設為特徵圖片.

設置 Featured Image 的鏈接 2