兩個使用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 提供了文章特征圖片功能,可以為文章設(shè)定一個上傳的圖片作為特征圖片,并可以給圖片設(shè)定多個尺寸以便在不同的環(huán)境使用可按一下步驟調(diào)用:
1. 為WordPress主題添加特征圖片支持,并設(shè)定特征圖片的尺寸和別名
add_theme_support(‘post-thumbnails’); // 支持特征圖片功能
add_image_size(‘thumb’, 180, 180); // 別名為 thumb, 尺寸為 150×150 的設(shè)定
add_image_size(‘recommend’, 120, 120); // 別名為 recommend, 尺寸為 120×120 的設(shè)定
我們可以將以上代碼加到 functions.php 文件, 為主題添加添加了Featured Image 支持, 并設(shè)定了 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 的縮略圖,如果沒有可以顯示默認圖片或者留空我們在前面還設(shè)定了別名為recommend的縮略圖,那么我們可以在不同的場合使用不同的縮略圖比如:在文章列表頁面使用 the_post_thumbnail(‘thumb’); 展示 180×180 的縮略圖, 而在文章底部的相關(guān)文章區(qū)域通過the_post_thumbnail(‘recommend’); 展示 120×120 的縮略圖
3. 在編寫文章的時候設(shè)定特征圖片
如果我們?yōu)橹黝}添加了特征圖片支持,在編輯文章頁面上傳圖片后,在Insert into Post按鈕的旁邊可以找到Use as featured image鏈接將圖片設(shè)為特征圖片
總結(jié)
WordPress 2.9 之前不存在特征圖片(Featured Image)的概念,必須通過第一種方式找到圖片附件 用這種方式獲取縮略圖的好處是一勞永逸,以后你不用關(guān)心要文章的使用什么縮略圖,是否存在縮略圖 但這同樣也是它的缺點,不能指定特定圖片為縮略圖如果某文章第一個圖片是縮略圖,但因為文章更新, 將第一個圖片刪除了,再上傳那本來第二個圖片就成為了新的縮略圖,但有可能第二個圖片效果不好, 不適合作為縮略圖也沒是沒有辦法的,因為你根本沒有辦法使用特定圖片
Featured Image功能很強大,除了可以指定圖片作為特征圖片,還能夠使用多個尺寸的圖片以適合不同的場合,你要做的僅僅是每次寫文章時別忘了設(shè)定特征圖片當你想去除所有縮略圖時,也僅是將 functions.php 文件的add_theme_support(‘post-thumbnails’); 即可
我現(xiàn)在沒有用Featured Image, 一直用的是取第一個圖片的方法,因為我的圖片質(zhì)量不高,一直沒指定圖片需求,懶得去改了
文章來源:
注:相關(guān)網(wǎng)站建設(shè)技巧閱讀請移步到建站教程頻道
收藏本文
文章編輯: 365webcall網(wǎng)頁客服(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
