在部落格上用到縮圖的機會很多,它們出現在文章列表頁面,文章下方的相關文章,分類頁面的類目圖片,甚至有些部落格很新潮地淡化文字以圖片瀑布流作為文章索引。

站長們知道縮圖可以吸引眼球,一直在尋找更好的使用方法。本文將會介紹 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 支援, 並設定了 180x180 和 120x120 兩種尺寸的圖片。

其中 add_image_size 用於定義一種特徵圖片尺寸, 參考 WordPress Codex, 實際上它有 4 個引數。

第 1 個引數: 特徵圖片的尺寸別名, 用於呼叫不同尺寸的縮圖。

第 2 個引數: 圖片的寬度

第 3 個引數: 圖片的高度

第 4 個引數: 引數是個布林值, 用於指定圖片的裁切方式。 預設為 false.

如果為 true, 圖片會按較大的壓縮比例處理, 多餘部分裁剪掉。 比如現在有圖片 900x600, 要求壓縮成 150x150 的圖片, 那麼會先將圖片壓縮成 225x150 的圖片, 才裁剪成 150x150.

如果為 false, 圖片會按較小的壓縮比例處理。 比如現在有圖片 900x600, 要求壓縮成 150x150 的圖片, 那麼會將圖片壓縮成 150x100 的圖片。

下圖是兩個縮圖, 原圖 1024x768, 左縮圖是 add_image_size('xxx', 120, 120, true);, 而右圖使用的是 add_image_size('xxx', 120, 120, false); 。

add_image_size 第四個引數效果對比

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

if(has_post_thumbnail()) {

the_post_thumbnail('thumb');

} else {

// 顯示預設圖片或者不做任何事情

}

上述程式碼判斷文章中是否存在特徵圖片,如果存在則顯示別名為 thumb 的縮圖,如果沒有可以顯示預設圖片或者留空。我們在前面還設定了別名為 recommend 的縮圖,那麼我們可以在不同的場合使用不同的縮圖。比如:在文章列表頁面使用 the_post_thumbnail('thumb'); 展示 180x180 的縮圖, 而在文章底部的相關文章區域透過 the_post_thumbnail('recommend'); 展示 120x120 的縮圖。

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

如果我們為主題新增了特徵圖片支援,在編輯文章頁面上傳圖片後,在 Insert into Post 按鈕的旁邊可以找到 Use as featured image 連結將圖片設為特徵圖片。

設定 Featured Image 的連結

總結

WordPress 2.9 之前不存在特徵圖片 (Featured Image) 的概念,必須透過第一種方式找到圖片附件。 用這種方式獲取縮圖的好處是一勞永逸,以後你不用關心要文章的使用什麼縮圖,是否存在縮圖。 但這同樣也是它的缺點,不能指定特定圖片為縮圖。如果某文章第一個圖片是縮圖,但因為文章更新, 將第一個圖片刪除了,再上傳。那本來第二個圖片就成為了新的縮圖,但有可能第二個圖片效果不好, 不適合作為縮圖也沒是沒有辦法的,因為你根本沒有辦法使用特定圖片。

Featured Image 功能很強大,除了可以指定圖片作為特徵圖片,還能夠使用多個尺寸的圖片以適合不同的場合,你要做的僅僅是每次寫文章時別忘了設定特徵圖片。當你想去除所有縮圖時,也僅是將 functions.php 檔案的 add_theme_support('post-thumbnails'); 即可。

我現在沒有用 Featured Image, 一直用的是取第一個圖片的方法,因為我的圖片質量不高,一直沒指定圖片需求,懶得去改了。