很多 WordPress 主題，特別是那些雜志型的主題，會給每篇日志加上一張縮略圖，這種展現方式一般用在首頁，可能單獨出現，或者和日志摘要一起。但是目前位置沒有一個標准的方法去實現日志縮略圖，很多主題是使用 WordPress 自定義字段來實現日志縮略圖功能，這樣的設置比較復雜，雖然我在制作的很多 WordPress 項目中都是用這個方法，並且設置了直接上傳縮略圖的方法，但是還是略顯麻煩。
從 WordPress 2.9 開始，WordPress 開始內置了日志縮略圖的功能，並且提供了詳細的接口讓主題的作者設置和調用日志的縮略圖。
第一步：讓主題支持縮略圖功能
首先確保你的wordpress版本在2.9之上，然后在你的當前主題文件夾中找到並編輯functions.php文件，加入下面這句代碼
|
1
2
3
4
|
<?php
if
( function_exists(
'add_theme_support'
) )
add_theme_support(
'post-thumbnails'
);
?>
|
(注：主題文件夾都保存在wp-content/themes/目錄下)
這樣當你在后台編輯文章的時候，右邊的分類目錄下面就會多出一個“文章縮略圖”模塊。
點擊“設置縮略圖”就可以該文章添加縮略圖了。
記得在添加圖片的時候要點擊下面的“用作縮略圖”。
第二步：使用縮略圖
在需要顯示縮略圖的地方調用the_post_thumbnail函數，比如你想在首頁為每篇文章顯示縮略圖，可以在index.php文件中加入下面這樣的代碼
|
1
2
3
4
|
<?
php
if
( function_exists(
'the_post_thumbnail'
) )
the_post_thumbnail(
'thumbnail'
);
?>
|
這樣就能顯示縮略圖了，其中參數”thumbnail”表示縮略圖顯示的大小。wordpress預置了4種大小，你可以使用下面的4個參數來替換’thumbnail’，當然不同的台數顯示的圖片大小也不同
Ø Thumbnail (縮略圖尺寸)
Ø Medium （中等尺寸）
Ø Large （大尺寸）
Ø Full （原始尺寸）
具體尺寸大小可以在后台“設置”中的“媒體”選項中進行設置
你可以設置3種不同的大小，以方便在不同的情況下使用。
至此你的主題已經支持縮略圖功能並可以靈活使用了。
下面我將介紹一下更高級的應用技巧。
自定義縮略圖尺寸的三種方法
方法一：后台設置
就是上面提到的方法，不過這種方法只設置3種大小。
方法二：自定義
在調用the_post_thumbnail函數的時候，可以直接指定縮略圖的大小
|
1
|
the_post_thumbnail(
array
(200,200));
// 顯示200X200尺寸的縮略圖
|
這種方法的優點的靈活，可以隨時通過代碼的調用顯示不同尺寸的圖片，缺點是修改有點麻煩，如果你有多處這樣的代碼，修改起來就要把每一處代碼都要修改掉。
方法三：增加預置尺寸
通過前面的介紹我們已經知道，wordpress為我們預置了三種可以設置的尺寸。可不可以再增加一些預置的尺寸呢？當然可以，我們要用到的函數是add_image_size。比如我們想在首頁和分類頁面使用不同的縮略圖大小，就可以先預置homepage-thumb和category-thumb這兩大小。方法是在functions.php文件中加入以下代碼
|
1
2
3
4
|
if
( function_exists(
'add_image_size'
) ){
add_image_size(
'category-thumb'
, 200, 200 );
// 預置一個名為’category-thumb’,200*200的縮略圖大小
add_image_size(
'homepage-thumb'
, 220, 180);
//預置一個名為’homepage-thumb’,220*180的縮略圖大小
}
|
之后就可以在首頁調用
|
1
|
the_post_thumbnail(‘homepage-thumb’);
|
顯示220*180的縮略圖
在分類頁面調用
|
1
|
the_post_thumbnail(‘category-thumb’);
|
則顯示200*200的縮略圖。
定義縮略圖的樣式
首先我們先來看一下the_post_thumbnail函數輸出的html是什么樣的
|
1
2
|
<img width=
"150"
height=
"150"
src=
"http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png"
class
=
"attachment-thumbnail wp-post-image"
alt=
""
title=
"screenshot"
/>
|
由此可以看出，我們可以用css定義類attachment-thumbnail的樣式就可以了。
但是如果我想分別為首頁和分類頁面定義不同的樣式，該怎么做呢？
方法一是增加一個div，針對不同的div定義不同的樣式，在此不多做介紹。
我要介紹的是另一種方法：給縮略圖添加屬性
你可以測試一下，如果把the_post_thumbnail(“thumbnail”)修改為下面這樣的代碼，看看輸出的html結果是什么？
|
1
|
the_post_thumbnail(‘thumbnail’,
array
(‘
class
’ => ‘homepage-thumb’));
|
我這邊輸出的html為
|
1
2
|
<img width=
"150"
height=
"150"
src=
"http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png"
class
=
"homepage-thumb wp-post-image"
alt=
""
title=
"screenshot"
/>
|
可以和之前的html對比一下，不難發現class屬性變成了我們設置的’homepage-thumb’。可以通過這種方法，把首頁縮略圖和分類頁面的縮略圖設置為不同的class屬性。
改變the_post_thumbnail的html輸出
我們可以使用filter來改變縮略圖的html輸出結果，下面的這段代碼為縮略圖加了一個文章鏈接
|
1
2
3
4
5
|
add_filter(
'post_thumbnail_html'
,
'my_post_image_html'
, 10, 3 );
function
my_post_image_html(
$html
,
$post_id
,
$post_image_id
) {
$html
=
'<a href="'
. get_permalink(
$post_id
) .
'" title="'
. esc_attr( get_post_field(
'post_title'
,
$post_id
) ) .
'">'
.
$html
.
'</a>'
;
return
$html
;
}
|
當你點擊縮略圖的時候就會跳轉到相應的文章內頁。
檢測文章是否有縮略圖
一個良好的習慣就是在調用the_post_thumbnail函數之前，先檢測一下該文章有沒有設置縮略圖，檢測的方法是調用has_post_thumbnail函數，代碼如下
|
1
2
|
<?php
if
( has_post_thumbnail() )
the_post_thumbnail(
'thumbnail'
);?>
|
結合本站之前的提取文章內圖片做為縮略圖的方法，現在可以合二為一：首先判斷文章有沒有設置縮略圖，如果有就直接顯示，如果沒有再提取文章內的圖片為縮略圖。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/*
* 縮略圖
*/
function
dm_the_thumbnail() {
global
$post
;
// 判斷該文章是否設置的縮略圖，如果有則直接顯示
if
( has_post_thumbnail() ) {
echo
'<a href="'
.get_permalink().
'" title="閱讀全文">'
;
the_post_thumbnail(
'thumbnail'
);
echo
'</a>'
;
}
else
{
//如果文章沒有設置縮略圖，則查找文章內是否包含圖片
$content
=
$post
->post_content;
preg_match_all(
'/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim'
,
$content
,
$strResult
, PREG_PATTERN_ORDER);
$n
=
count
(
$strResult
[1]);
if
(
$n
> 0){
// 如果文章內包含有圖片，就用第一張圖片做為縮略圖
echo
'<a href="'
.get_permalink().
'" title="閱讀全文"><img src="'
.
$strResult
[1][0].
'" alt="縮略圖" /></a>'
;
}
else
{
// 如果文章內沒有圖片，則用默認的圖片。
echo
'<a href="'
.get_permalink().
'" title="閱讀全文"><img src="'
.get_bloginfo(
'template_url'
).
'/imgs/default_thumbnail.jpg" alt="縮略圖" /></a>'
;
}
}
}
|
有興趣的朋友可以把以上代碼復制到functions.php文件中，然后調用dm_the_thumbnail()即可。