喜歡折騰修改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}
好了,這樣縮略圖就有模有樣的顯示出來啦。
新聞熱點
疑難解答