WordPress首頁文章摘要旁邊顯示縮圖的方法
阿新 • • 發佈:2019-01-06
如今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;
}