兩個使用WordPress縮略圖的方法
來源:解決方案 2012-10-16
在博客上用到縮略圖的機會很多,它們出現(xiàn)在文章列表頁面,文章下方的相關(guān)文章,分類頁面的類目圖片,甚至有些博客很新潮地淡化文字以圖片瀑布流作為文章索引
站長們知道縮略圖可以吸引眼球,一直在尋找更好的使用方法本文將會介紹WordPress上常用的兩個調(diào)用縮略圖的方法,以及他們的適用場景
調(diào)用文章第一個圖片
WordPress Media一直支持上傳圖片生成包括縮略圖,中等尺寸,大尺寸和原圖4個規(guī)格的圖片,而這恐怕是為了方便我們在文章內(nèi)調(diào)用不同尺寸的圖片
憑文章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 節(jié)點返回
$image = array_pop($attachments);
$imageSrc = wp_get_attachment_image_src($image->ID, ‘thumbnail’);
$imageUrl = $imageSrc[0];
$html = ”;
return $html;
}
調(diào)用的代碼如下
$thumb = getFirstImage($post->ID);
if(strlen($thumb) > 0) {
echo $thumb;
} else {
// 顯示默認圖片或者不做任何事情
}
文章特征圖片(Featured Image)功能
WordPress 2.9之后,WordPress 提供了文章特征圖片功能,可以為文章設定一個上傳的圖片作為特征圖片,并可以給圖片設定多個尺寸以便在不同的環(huán)境使用可按一下步驟調(diào)用:
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 個參數(shù)
第 1 個參數(shù): 特征圖片的尺寸別名, 用于調(diào)用不同尺寸的縮略圖
第 2 個參數(shù): 圖片的寬度
第 3 個參數(shù): 圖片的高度
第 4 個參數(shù): 參數(shù)是個布爾值, 用于指定圖片的裁切方式 默認為 false.
如果為 true, 圖片會按較大的壓縮比例處理, 多余部分裁剪掉 比如現(xiàn)在有圖片 900×600, 要求壓縮成 150×150 的圖片, 那么會先將圖片壓縮成 225×150 的圖片, 才裁剪成 150×150.
如果為 false, 圖片會按較小的壓縮比例處理 比如現(xiàn)在有圖片 900×600, 要求壓縮成 150×150 的圖片, 那么會將圖片壓縮成 150×100 的圖片
下圖是兩個縮略圖, 原圖 1024×768, 左縮略圖是 add_image_size(‘xxx’, 120, 120, true);, 而右圖使用的是 add_image_size(‘xxx’, 120, 120, false);
2. 判斷是否存在特征圖片和顯示縮略圖
if(has_post_thumbnail()) {
the_post_thumbnail(‘thumb’);
} else {
// 顯示默認圖片或者不做任何事情
}
上述代碼判斷文章中是否存在特征圖片,如果存在則顯示別名為 thumb 的縮略圖,如果沒有可以顯示默認圖片或者留空我們在前面還設定了別名為recommend的縮略圖,那么我們可以在不同的場合使用不同的縮略圖比如:在文章列表頁面使用 the_post_thumbnail(‘thumb’); 展示 180×180 的縮略圖, 而在文章底部的相關(guān)文章區(qū)域通過the_post_thumbnail(‘recommend’); 展示 120×120 的縮略圖
3. 在編寫文章的時候設定特征圖片
如果我們?yōu)橹黝}添加了特征圖片支持,在編輯文章頁面上傳圖片后,在Insert into Post按鈕的旁邊可以找到Use as featured image鏈接將圖片設為特征圖片
總結(jié)
WordPress 2.9 之前不存在特征圖片(Featured Image)的概念,必須通過第一種方式找到圖片附件 用這種方式獲取縮略圖的好處是一勞永逸,以后你不用關(guān)心要文章的使用什么縮略圖,是否存在縮略圖 但這同樣也是它的缺點,不能指定特定圖片為縮略圖如果某文章第一個圖片是縮略圖,但因為文章更新, 將第一個圖片刪除了,再上傳那本來第二個圖片就成為了新的縮略圖,但有可能第二個圖片效果不好, 不適合作為縮略圖也沒是沒有辦法的,因為你根本沒有辦法使用特定圖片
Featured Image功能很強大,除了可以指定圖片作為特征圖片,還能夠使用多個尺寸的圖片以適合不同的場合,你要做的僅僅是每次寫文章時別忘了設定特征圖片當你想去除所有縮略圖時,也僅是將 functions.php 文件的add_theme_support(‘post-thumbnails’); 即可
我現(xiàn)在沒有用Featured Image, 一直用的是取第一個圖片的方法,因為我的圖片質(zhì)量不高,一直沒指定圖片需求,懶得去改了
文章來源:
注:相關(guān)網(wǎng)站建設技巧閱讀請移步到建站教程頻道
收藏本文
文章編輯: 365webcall網(wǎng)頁客服(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
