1. 程式人生 > >WordPress首頁文章摘要旁邊顯示縮圖的方法

WordPress首頁文章摘要旁邊顯示縮圖的方法

如今wordpress主題極力提倡簡潔,但是我認為這個簡潔也應該有個度,太過簡潔,那就不叫簡潔了,該叫單調了,試想,當一個使用者無意間點開你的網站,發現你的網站只有黑灰白三色,除非你的內容十分經典,否則,使用者對你的網站絕對不會有好的感覺,今天我從自己的現用主題裡面把這個顯示縮圖的功能提取出來,分享給大家!再次感謝作者weisay!
首先貼出所需的css程式碼,放到你的主題檔案style.css裡面,要顯示的圖片的大小可以通過下面的width和height設定:

/* =Content
----以下是首頁縮圖---------------------------------------------------------- */
.thumbnail_box {  
   float:left;  
   width:160px;  
   height:120px;  
   margin:17px10px8px15px;_margin:17px10px8px7px;  
   padding:4px;  
   border:1pxsolid#ccc;}  
.thumbnail img{  
   position:absolute;  
   z-index:3;} 
/* =Content
-------------------------------------------------------------- */

顯示縮圖方式:先從文章中讀取圖片作為縮圖,如果文章中沒有縮圖,再使用上一種方法裡面建立的random資料夾裡面的圖片!
分兩步:首先往主題檔案functions.php新增如下程式碼:
 

//縮圖180702

//輸出縮圖地址

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 '/img/pic/'.$random.'.jpg';
			//如果日誌中沒有圖片,則顯示預設圖片
			//echo '/img/thumbnail.png';
		}
	};
	echo $post_thumbnail_src;
}


然後在往主題檔案index.php裡面新增如下程式碼:

                <div class="thumbnail_box"><div class="thumbnail">  
                  <img class="home-thumb" src="<?php echo post_thumbnail_src(); ?>" alt="孕婦裝夏裝" height="100px" width="140px"/>
                 </div></div>  


         
沒了。
注意事項:
1.呼叫縮圖的程式碼要放在和文章摘要同一級的層了,然後編輯比這一級層更高階的層屬性css程式碼要新增這樣一句話:float:right;   當然如果你新增完程式碼顯示一切正常,可以略去這一步。

不是隨機圖,可以是這一段

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 
//»ñÈ¡ÎÄÕÂÖеÚÒ»ÕÅͼƬµÄ·¾¶²¢Êä³ö
$first_img = $matches [1] [0];
 
//Èç¹ûÎÄÕÂÎÞͼƬ£¬»ñÈ¡×Ô¶¨ÒåͼƬ
 
if(empty($first_img)){ //Defines a default image
$first_img = "/wordpress/default.jpg";
 
//Çë×ÔÐÐÉèÖÃÒ»ÕÅdefault.jpgͼƬ
}
 
return $first_img;
}