WordPress調整Tag標簽頁文章列表縮略圖優化小記

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-03-07 閱讀： 4,505 次 搶個沙發 百度已收錄

最近開始工作了，但是工作目前比較閑，所以又開始研究WordPress了。

目前本站的所有文章列表中，只有標簽頁設置了縮略圖，但是本站的縮略圖一直是先森心中的一個心病，因為覺得沒有做好。比如，有些圖片比較寬，就會導致縮略圖的下半部分是空的，就像下面這樣：

縮略圖過寬導致下半部分為空

所以，先森就想對這種情況做一個優化。當前想到的優化方法有兩種，一種是先森的友鏈kouss博客中的“用CSS3使圖片在容器內垂直水平居中”提到的CSS優化方法。第二種是著名博客我愛水煮魚提到的七牛云儲存插件中帶的日志說略圖功能。

CSS優化方法嘗試

首先進行了比較簡單的嘗試，通過修改CSS來改良。這個簡單，不用修改文件，直接審查元素就可以測試了。這種方法是：

div容器的css樣式

width: 80px;
height: 80px;
overflow: hidden;

img標簽的css樣式

width: auto;
height: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

下面做一個對比：

CSS修改之前的效果

CSS修改之后的效果

通過對比可以看到，雖然修改CSS之后，縮略圖不會留空了，但是卻顯得很隨意，沒有顯示出想要的部分，所以也有些不盡人意。當然，先森是直接按照上面的代碼改的，如果修改下CSS代碼，肯定可以讓效果更好，但是今天不想調試CSS代碼，以后有空再研究。

七牛縮略圖方法嘗試

這種方法來自我愛水煮魚博客中的“七牛鏡像存儲 WordPress 插件：一鍵實現 WordPress 博客靜態文件 CDN 加速”一文，其中提到了七牛云儲存插件中wpjam_post_thumbnail 函數幫你通過使用七牛的縮略圖 API 直接生成縮略圖的方法：

<?php  if(wpjam_has_post_thumbnail()){?>
<div class="entry-thumb">
	<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php wpjam_post_thumbnail(array(150,150),$crop=1);?></a>
</div>
<?php } ?>

其中有兩個參數：

• $size：設置縮略圖的大小，它是一個數組，比如上面例子中就是設置縮略圖大小為：寬是 150px，高也是 150px。

• $crop：設置是否裁剪縮略圖，1為裁剪，如果為0，則只是按照最大邊進行縮放，不進行裁剪。

上面的代碼放的位置是你放he_post_thumbnail()函數的位置。

這個函數會調用你為文章設置的縮略圖，當你沒有設置縮略圖的時候，會調用文章的第一張圖片。這個功能在發布文章的時候比較新穎（2013年），但到了現在就有點不夠用了。

先森對這種方式進行了一波嘗試，來看看效果：

使用七牛云儲存插件的函數之后圖片出現了拉伸

當文章內沒有插入圖片時

通過上面兩圖，可以看到，使用七牛云儲存插件的函數之后，圖片出現了拉伸的問題。以及，當圖片內沒有圖片時，就會顯示空白。因此也讓先森不滿意，但當先森要放棄時，又想起七牛本身提供的圖片處理——裁剪。雖然并不能達到想要的目標，但是裁剪之后卻可以加快網頁的加載速度。

七牛裁剪功能的應用

進入七牛網站，選擇空間后點進數據處理，點擊“新建圖片樣式”：

七牛-新建圖片樣式

點擊后，進行設置。本站的縮略圖是240*160的，所以只需要設置下寬高就行了：

七牛-設置處理縮放方式

設置好之后點擊完成，會出現下面的結果：

裁剪設置成功后的結果

關于設置成功后要如何使用，很簡單，在圖片鏈接后面加上一個問號，再加上上圖中紅框中的內容即可。如：

http://img.capjsj.cn/ueditor/php/upload/image/20150831/1441015508862148.jpg?imageView2/1/w/240/h/160/q/75

再來檢查一下有沒有得到優化：

使用七牛裁剪之前

使用七牛裁剪之后

可以看到的是，原本的縮略圖只是將圖片縮小了而圖片的尺寸沒有更改，共61.2KB。使用七牛裁剪之后，圖片的尺寸變成了240*160，大小也縮減至12.1KB。

值得一提的是，本站縮略圖使用的是博客WordPress大學中“WORDPRESS添加相關文章功能（標題/縮略圖樣式）”一文輸出縮略圖地址的代碼：

//添加特色縮略圖支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');
 
//輸出縮略圖地址 From wpdaxue.com
function post_thumbnail_src(){
    global $post;
	if( $values = get_post_custom_values("thumb") ) {	//輸出自定義域圖片地址
		$values = get_post_custom_values("thumb");
		$post_thumbnail_src = $values [0];
	} elseif( has_post_thumbnail() ){    //如果有特色縮略圖，則輸出縮略圖地址
        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
		$post_thumbnail_src = $thumbnail_src [0];
    } else {
		$post_thumbnail_src = '';
		ob_start();
		ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$post_thumbnail_src = $matches [1] [0];   //獲取該圖片 src
		if(empty($post_thumbnail_src)){	//如果日志中沒有圖片，則顯示隨機圖片
			$random = mt_rand(1, 10);
			echo get_bloginfo('template_url');
			echo '/images/pic/'.$random.'.jpg';
			//如果日志中沒有圖片，則顯示默認圖片
			//echo '/images/default_thumb.jpg';
		}
	};
	echo $post_thumbnail_src;
}

以上代碼放置于主題中functions.php中。

調用的時候是直接使用函數post_thumbnail_src()，所以本站在縮略圖中添加七牛裁剪的方式就是之間在函數后面加裁剪代碼即可：

<img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/240/h/160/q/75" alt="<?php the_title(); ?>" />

本文就算是對今天的鼓搗做一個記錄，若能幫到大家那也是極好的。