縮圖出現在文章列表頁面, 文章下方的相關文章, 分類頁面的類目圖片, 甚至有些部落格很新潮地淡化文字以圖片瀑布流作為文章索引， 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