WordPress 開啓日誌縮略圖 以及不用插件的程序使用方法

不少 WordPress 主題，特別是那些雜誌型的主題，會給每篇日誌加上一張縮略圖，這種展示方式通常用在首頁，可能單獨出現，或者和日誌摘要一塊兒。可是目前位置沒有一個標準的方法去實現日誌縮略圖，不少主題是使用 WordPress 自定義字段來實現日誌縮略圖功能，這樣的設置比較複雜，雖然我在製做的不少 WordPress 項目中都是用這個方法，而且設置了直接上傳縮略圖的方法，可是仍是略顯麻煩。

　　從 WordPress 2.9 開始，WordPress 開始內置了日誌縮略圖的功能，而且提供了詳細的接口讓主題的做者設置和調用日誌的縮略圖。

WordPress 日誌縮略圖功能

開啓 WordPress 日誌縮略圖功能

       首頁你要看下你所用的主題有沒有開啓文章縮略圖功能，若是看起的話，會在wordpress後臺編輯頁面或者文章時在右下角的地方看到一個特點圖像的設置，以下圖：

      若是沒有說明你尚未激活這功能。咱們須要在你主題functions.php裏面加一段代碼。

　　在當前 WordPress 主題的 functions.php 添加如下函數，這個函數會在 WordPress 後臺編輯日誌的界面開啓設置日誌縮略圖的窗體。

add_theme_support( 'post-thumbnails' );

上面的代碼會同時給日誌和頁面開啓縮略圖功能，若是你想單獨開啓該功能，使用如下代碼：

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 給日誌啓用日誌縮略圖 add_theme_support( 'post-thumbnails', array( 'page' ) ); // 給頁面啓用日誌縮略圖

設置日誌縮略圖大小

　　開啓了 WordPress 日誌縮略圖功能以後，咱們應該縮略圖的大小，這裏有兩種方式：box-resize（盒大小模式）和 hard-crop（裁剪模式）。

　　盒大小模式按照比例縮小圖片直到適合指定的盒子，因此不會扭曲圖片。盒大小模式能夠指定長度和寬度，好比一張 100X50 的圖片在指定的 50X50 的盒子中會被縮小爲 50X25。這種模式的好處是能夠顯示整張圖片，缺點是生成的圖片並非同樣大的，有時候是長度同樣，有時候是高度同樣，若是你想限制縮略圖到必定的寬度，而不在意它的高度，你能夠指定你的寬度，而後設置它的高度爲 9999 或者任何你認爲夠大的一個數字。設置盒模式的代碼以下：

set_post_thumbnail_size( 50, 50 ); // 50 像素寬和 50 像素高，盒大小模式（box resize mode）。

　　第二種是硬裁剪模式（hard-crop），這種模式下，圖片會被裁剪爲指定的大小，這種方式的好處就是獲得咱們所但願的，好比你但願的到一張 50X50 的縮略圖，咱們就會獲得 50X50 的縮略圖，缺點就是你的圖片會被裁減，而且在縮略圖中只會顯示圖片的一部分。這種方式的代碼是：

set_post_thumbnail_size( 50, 50, true ); // 50 像素寬和 50 像素高，裁剪模式（hard crop mode）

在主題中顯示日誌縮略圖

　　如今咱們要在主題中使用模板函數來顯示日誌縮略圖，這些函數應該在 WordPress 的主循環中使用。

has_post_thumbnail() 這個模板函數判斷當前日誌是否有縮略圖，若是有返回 true，不然爲 false：

<?php if ( has_post_thumbnail() ) { //當前日誌有縮略圖 } else { //當前日誌沒有設置縮略圖 } ?>

the_post_thumbnail() 這個模板函數輸出日誌縮略圖，若是縮略圖存在的話。

<?php the_post_thumbnail(); ?>

WordPress 日誌縮略圖具體使用案例

　　假設你想在首頁使用一個比較小的 50X50 裁剪模式的縮略圖，而且想在日誌頁面使用 400 像素寬（高度不限制）的圖片，那麼怎麼辦？你能夠置頂額外的自定義尺寸，代碼以下：

在 functions.php 中添加以下代碼：

add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true ); // 普通的縮略圖 add_image_size( 'single-post-thumbnail', 400, 9999 ); // 永久鏈接縮略圖大小

在 index.php 或者 home.php（取決你的主題的結構）中的主循環添加以下代碼：

<?php the_post_thumbnail(); ?>

在主題的 single.php （也是主循環中）添加以下代碼：

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

　　這樣就好了，set_post_thumbnail_size() 調用 add_image_size( 'post-thumbnail' ) — 默認的日誌縮略圖「handle」（處理函數）。可是咱們能夠經過調用 add_image_size( $handle, $width, $height, {$hard_crop_switch} ); 來增長額外的日誌縮略圖處理函數，而後經過傳遞 handle 給 the_post_thumbnail( $handle ); 來使用新的縮略圖尺寸。

其餘 WordPress 日誌縮略圖相關的函數

獲取日誌縮略圖 ID

　　有時候你想自定義腳本，這個時候你可能獲取縮略圖的 ID，日誌縮略圖的 ID 是存在 meta key 爲_thumbnail_id 的值中，可是咱們只須要使用下面簡單的函數就能夠獲取日誌的縮略圖 ID：

$image_id = get_post_thumbnail_id();

獲取日誌縮略圖而不是輸出它

　　有時候，你可能在 PHP 代碼中返回日誌縮略圖，而不是輸出它，可使用下面簡單的代碼：

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );  

WordPress簡單三步自動顯示縮略圖(無插件)

步入正題，開始添加首頁縮略圖，分簡單3步便可實現：

第一步：找到使用的主題模板的functions.php文件在<?php和?>之間添加以下代碼

function thumb_img($soContent) {     $soImages = '~<img [^\>]*\ />~';      preg_match_all( $soImages, $soContent, $thePics );     $allPics = count($thePics[0]);      if( $allPics > 0 )     {         echo "<span id='thumb'>";         echo $thePics[0][0];         echo '</span>';      } else {         echo "<span id='thumb'>";         echo "<img src='"; echo bloginfo('template_url');         echo "/images/thumb.gif'></span>";      }  }

　　這是一個顯示縮略圖的方法，自動檢索文章的第一張圖片，若是沒有顯示當前主題/images/thumb.gif 因此你要把這個thumb.gif圖片準備好~

第二步：找到index.php文件即首頁文件，找到the_content();或類似的代碼在它以前添加以下代碼：

thumb_img($post->post_content);

　　這樣就調用了剛纔的方法，實際上縮略圖已經完成了！可是你看到的效果必定很意外，應爲圖片的大小沒有控制，會很難看…好了，第三步

第三步：添加縮略圖樣式CSS代碼：

　　這是浮雲站使用的的縮略圖樣式，你能夠先湊合着用，再另行修改

#thumb{margin:5px 15px 5px 5px;width:145px;height:120px;border:3px solid 
#eee;float:left;overflow:hidden;} #thumb img{max-height:186px;max-width:186px}

　　好了，這樣縮略圖就有模有樣的顯示出來啦！三步搞定！