在博客上用到縮略圖的機(jī)會(huì)很多, 它們出現(xiàn)在文章列表頁(yè)面, 文章下方的相關(guān)文章, 分類(lèi)頁(yè)面的類(lèi)目圖片, 甚至有些博客很新潮地淡化文字以圖片瀑布流作為文章索引.

站長(zhǎng)們知道縮略圖可以吸引眼球, 一直在尋找更好的使用方法. 本文將會(huì)介紹 WordPress 上常用的兩個(gè)調(diào)用縮略圖的方法, 以及他們的適用場(chǎng)景.

調(diào)用文章第一個(gè)圖片

WordPress Media 一直支持上傳圖片生成包括縮略圖, 中等尺寸, 大尺寸和原圖 4 個(gè)規(guī)格的圖片, 而這恐怕是為了方便我們?cè)谖恼聝?nèi)調(diào)用不同尺寸的圖片. 雖然沒(méi)有直接調(diào)用縮略圖的方法, 但我們可以找到文章的第一個(gè)圖片作為縮略圖.
憑文章 ID 就可以找到第一個(gè)圖片. 這里可以寫(xiě)成方法如下, 用戶獲取第一個(gè)縮略圖, 如果沒(méi)有上傳過(guò)圖片, 返回空字符串.

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);
 
 // 如果沒(méi)有上傳圖片, 返回空字符串
 if(!$attachments) {
 return '';
 }
 
 // 獲取縮略圖中的第一個(gè)圖片, 并組裝成 HTML 節(jié)點(diǎn)返回
 $image = array_pop($attachments);
 $imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
 $imageUrl = $imageSrc[0];
 $html = '<img src="' . $imageUrl . '" alt="' . the_title('', '', false) . '" />';
 return $html;
}

調(diào)用的代碼如下.

$thumb = getFirstImage($post->ID);
if(strlen($thumb) > 0) {
 echo $thumb;
} else {
 // 顯示默認(rèn)圖片或者不做任何事情
}

文章特征圖片 (Featured Image) 功能

WordPress 2.9 之后, WordPress 提供了文章特征圖片功能, 可以為文章設(shè)定一個(gè)上傳的圖片作為特征圖片, 并可以給圖片設(shè)定多個(gè)尺寸以便在不同的環(huán)境使用. 可按一下步驟調(diào)用:

1. 為 WordPress 主題添加特征圖片支持, 并設(shè)定特征圖片的尺寸和別名.

add_theme_support('post-thumbnails'); // 支持特征圖片功能
 
add_image_size('thumb', 180, 180); // 別名為 thumb, 尺寸為 150x150 的設(shè)定
add_image_size('recommend', 120, 120); // 別名為 recommend, 尺寸為 120x120 的設(shè)定

我們可以將以上代碼加到 functions.php 文件, 為主題添加添加了 Featured Image 支持, 并設(shè)定了 180x180 和 120x120 兩種尺寸的圖片.

其中 add_image_size 用于定義一種特征圖片尺寸, 參考 WordPress Codex, 實(shí)際上它有 4 個(gè)參數(shù).

1. 第 1 個(gè)參數(shù): 特征圖片的尺寸別名, 用于調(diào)用不同尺寸的縮略圖.
2. 第 2 個(gè)參數(shù): 圖片的寬度
3. 第 3 個(gè)參數(shù): 圖片的高度
4. 第 4 個(gè)參數(shù): 參數(shù)是個(gè)布爾值, 用于指定圖片的裁切方式. 默認(rèn)為 false.

如果為 true, 圖片會(huì)按較大的壓縮比例處理, 多余部分裁剪掉. 比如現(xiàn)在有圖片 900x600, 要求壓縮成 150x150 的圖片, 那么會(huì)先將圖片壓縮成 225x150 的圖片, 才裁剪成 150x150.

如果為 false, 圖片會(huì)按較小的壓縮比例處理. 比如現(xiàn)在有圖片 900x600, 要求壓縮成 150x150 的圖片, 那么會(huì)將圖片壓縮成 150x100 的圖片.
下圖是兩個(gè)縮略圖, 原圖 1024x768, 左縮略圖是 add_image_size('xxx', 120, 120, true);, 而右圖使用的是 add_image_size('xxx', 120, 120, false);.

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

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

上述代碼判斷文章中是否存在特征圖片, 如果存在則顯示別名為 thumb 的縮略圖, 如果沒(méi)有可以顯示默認(rèn)圖片或者留空. 我們?cè)谇懊孢€設(shè)定了別名為 recommend 的縮略圖, 那么我們可以在不同的場(chǎng)合使用不同的縮略圖. 比如: 在文章列表頁(yè)面使用 the_post_thumbnail('thumb'); 展示 180x180 的縮略圖, 而在文章底部的相關(guān)文章區(qū)域通過(guò) the_post_thumbnail('recommend'); 展示 120x120 的縮略圖.

3. 在編寫(xiě)文章的時(shí)候設(shè)定特征圖片.

如果我們?yōu)橹黝}添加了特征圖片支持, 在編輯文章頁(yè)面上傳圖片后, 在 Insert into Post 按鈕的旁邊可以找到 Use as featured image 鏈接將圖片設(shè)為特征圖片.

PS：巧用 WordPress 縮略圖
WordPress 不僅是博客, 很多時(shí)候 WordPress 還被用作為 CMS (內(nèi)容管理系統(tǒng)). 博主們喜歡為每個(gè)文章加上統(tǒng)一大小的縮略圖, 尤其是信息類(lèi)平臺(tái). 其中比較常用的處理辦法是用 custom field 向文章插入圖片, 通過(guò)上傳大小一致的小圖或者使用 phpThumb 等工具生成縮略圖.

2.7 開(kāi)始, WordPress 大幅提升多媒體功能, 越來(lái)越多人使用 WP 的內(nèi)置圖片倉(cāng)庫(kù). 對(duì)這些用戶來(lái)說(shuō), 制作縮略圖變得并不那么困難, 在上傳圖片的時(shí)候就會(huì)默認(rèn)生成 150x150 規(guī)格的小圖 (如果圖片高度/寬度不足 150px, 使用原高度/寬度). 那我們可以充分利用這個(gè)功能, 在文章列表上加上這個(gè)圖片作為縮略圖. 這樣處理各有利弊, 好處是簡(jiǎn)單, 智能 (不用每次輸入縮略圖), 壞處是消耗服務(wù)器流量.

Okay, 現(xiàn)在要做的就是提取上傳生成的小圖片, 并放置在文章的適當(dāng)位置. 我創(chuàng)建了一個(gè)文件 thumb.php, 圖片獲取和調(diào)用一起處理, 文件內(nèi)容如下.

<?php
 $args = array(
 'numberposts' => 1,
 'order'=> 'ASC',
 'post_mime_type' => 'image',
 'post_parent' => $post->ID,
 'post_status' => null,
 'post_type' => 'attachment'
 );
 
 $attachments = get_children($args);
 $imageUrl = '';
 
 if($attachments) {
 $image = array_pop($attachments);
 $imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
 $imageUrl = $imageSrc[0];
 } else {
 $imageUrl = get_bloginfo('template_url') . '/img/default.gif';
 }
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php echo $imageUrl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a>

這段代碼會(huì)去找第一個(gè)上傳的圖片縮略圖 (如果第一個(gè)圖片被刪除, 則找第二個(gè)的, 如此類(lèi)推...),然后在文章列表 index.php, 存檔頁(yè)面 archive.php 和搜索頁(yè)面 search.php 中調(diào)用, 調(diào)用代碼如下.

<?php include('thumb.php'); the_content('Read More...'); ?>

這段代碼是把圖片放在文章內(nèi)容前面, 圖片如何擺放需要用 CSS 調(diào)整一下布局, 這里就不多說(shuō)了.

總結(jié)

WordPress 2.9 之前不存在特征圖片 (Featured Image) 的概念, 必須通過(guò)第一種方式找到圖片附件. 用這種方式獲取縮略圖的好處是一勞永逸, 以后你不用關(guān)心要文章的使用什么縮略圖, 是否存在縮略圖. 但這同樣也是它的缺點(diǎn), 不能指定特定圖片為縮略圖. 如果某文章第一個(gè)圖片是縮略圖, 但因?yàn)槲恼赂? 將第一個(gè)圖片刪除了, 再上傳. 那本來(lái)第二個(gè)圖片就成為了新的縮略圖, 但有可能第二個(gè)圖片效果不好, 不適合作為縮略圖也沒(méi)是沒(méi)有辦法的, 因?yàn)槟愀緵](méi)有辦法使用特定圖片.

Featured Image 功能很強(qiáng)大, 除了可以指定圖片作為特征圖片, 還能夠使用多個(gè)尺寸的圖片以適合不同的場(chǎng)合, 你要做的僅僅是每次寫(xiě)文章時(shí)別忘了設(shè)定特征圖片. 當(dāng)你想去除所有縮略圖時(shí), 也僅是將 functions.php 文件的 add_theme_support('post-thumbnails'); 即可.

我現(xiàn)在沒(méi)有用 Featured Image, 一直用的是取第一個(gè)圖片的方法, 因?yàn)槲业膱D片質(zhì)量不高, 一直沒(méi)指定圖片需求, 懶得去改了.

最新評(píng)論