1. 程式人生 > >WordPress簡單三步自動顯示縮圖(無外掛)

WordPress簡單三步自動顯示縮圖(無外掛)

喜歡折騰修改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}

  好了,這樣縮圖就有模有樣的顯示出來啦!三步搞定!