看過(guò)時(shí)美網(wǎng)的朋友,應(yīng)該看到首面的圖片集和側(cè)邊的圖片展示,對(duì)整個(gè)頁(yè)面美觀的貢獻(xiàn)是非常大的,美中不足的是,它是通過(guò)圖片插件來(lái)實(shí)現(xiàn)的,那么,怎樣不通過(guò)插件來(lái)實(shí)現(xiàn)縮略圖的調(diào)用呢？

在首頁(yè)需要顯示的地方插入下面的這段代碼:

1. <div class=”slideshow-2″> 
2.     <ul> 
3.     <?php query_posts(‘posts_per_page=18&caller_get_posts=1&orderby=rand’); ?> 
4.     <?php while (have_posts()) : the_post(); ?> 
5.     <?php $content=$post->post_content; if(preg_match(“/<img.*>/”,$content)): ?> 
6.     <li> 
7.     <a target=”_blank” href=”<?php the_permalink(); ?>”> 
8.     <img atl=”<?php the_title(); ?>” title=”<?php the_title(); ?>” src=”<?php echo catch_that_image()?>” width=”102″ height=”110″> 
9.     </a> 
10.     </li> 
11.     <?php endif; endwhile; ?> 
12.     </ul> 
13.     </div> 

代碼詳解:

posts_per_page=18:表示調(diào)用18篇文章；

orderby=rand:表示隨機(jī)顯示文章；

調(diào)用的代碼如下:<?php echo catch_that_image()?>： 

這是調(diào)用function.php中的一個(gè)圖片函數(shù),好了,這樣,我們就給首頁(yè)添加了隨機(jī)展示的圖片集代碼.

再附一方法

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

1. function thumb_img($soContent){ 
2.    $soImages = ‘~<img [^>]* />~’; 
3.    preg_match_all( $soImages, $soContent, $thePics ); 
4.    $allPics = count($thePics[0]); 
5.    if( $allPics > 0 ){ 
6.    echo “<span id=’thumb’>”; 
7.    echo $thePics[0][0]; 
8.    echo ‘</span>’; 
9.    } 
10.    else { 
11.    echo “<span id=’thumb’>”; 
12.    echo “<img src=’”; 
13.    echo bloginfo(‘template_url’); 
14.    echo “/images/thumb.gif’></span>”; 
15.    } 
16.    } 

這是一個(gè)顯示縮略圖的方法,自動(dòng)檢索文章的第一張圖片,如果沒(méi)有顯示當(dāng)前主題/images/thumb.gif  所以你要把這個(gè)thumb.gif圖片準(zhǔn)備好.

第二步:找到index.php文件即首頁(yè)文件,找到the_content();或相似的代碼在它之前添加如下代碼:

thumb_img($post->post_content); 

這樣就調(diào)用了剛才的方法,實(shí)際上縮略圖已經(jīng)完成了,但是你看到的效果一定很意外,應(yīng)為圖片的大小沒(méi)有控制,會(huì)很難看.

第三步:添加縮略圖樣式CSS代碼,這是浮云站使用的的縮略圖樣式,你可以先湊合著用,再另行修改,代碼如下:

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

好了,這樣縮略圖就有模有樣的顯示出來(lái)啦,三步搞定.