WordPress 佈景：如何擷取文章內第一張圖片作為縮圖？
WordPress 佈景教學系列來瞜，
第一篇是要教大家如何在首頁、文章列表處加上縮圖，
而這個縮圖會從文章內的第一張圖擷取出來，並且顯示，
至於要如何達成呢？趕快來看看吧～
這個方法是需要添加代碼到 functions.php 內，再呼叫出圖片網址就行了。
添加代碼
首先請先將下方代碼放進 functions.php ，注意若頭尾沒有 <?php / ?> 包起來請自行加上。
感謝小逢提供錯誤回報，代碼修正！
//取得文章內第一張圖片網址
function get_first_img(){
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)){
$first_img = "預設圖片網址";
}
return $first_img;
}
函數說明：
這個方法會截取出每篇文章內第一張圖片的「網址」，若是該文章內完全沒有圖片，
則會使用 $first_img 所設定的圖片，因此 $first_img 後的圖片網址就是當沒有圖片時所顯示的預設圖片。
添加完之後接著就是要呼叫了。
呼叫圖片網址
請將以下代碼放製在欲呈現圖片的位置即可（通常是 index.php 、 archive.php ）
<img src="<?php echo get_first_img(); ?>" />
沒錯，
<?php echo get_first_img(); ?>
就是輸出圖片的網址，因此需要加上 img 來完成圖片顯示，
若是要順道加上文章連結，則可以使用以下代碼
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_first_img(); ?>"></a>
這樣就可以完成了添加喔！
![[下載]打電話、傳簡訊完全免費的即時通訊APP - Line](https://blog.brownsugar.tw/wp-content/uploads/2016/02/line-app.jpg "[下載]打電話、傳簡訊完全免費的即時通訊APP - Line")
![[筆記] 用 Javascript/PHP 從字串中提取 hashtag](https://blog.brownsugar.tw/wp-content/uploads/2017/05/f3e27f4ad330336354f25b2aadcd7246_extract-hashtags-from-content.png "[筆記] 用 Javascript/PHP 從字串中提取 hashtag")
仔仔
如果又不想用預設圖又沒有圖片應該如何修改啊? :thinking: :heart_eyes:
Brownsugar
請問是指沒圖片就不顯示嗎？
仔仔
是...
因為現在是如果文章沒圖片就會出現死圖或者預設圖....
就是如果沒有圖片就什麼都沒有....
如果有圖片就想要第一張圖...應該怎麼做? :frown:
Brownsugar
你可以試試看：
if(empty($first_img)){ $first_img = ""; }整段移除
接著呼叫時
<?php if(get_first_img()){ ?> <a href="<?php the_permalink(); ?>"><img src="<?php echo get_first_img(); ?>" /></a> <?php } ?>或是直接顯示圖片不要連結
<?php if(get_first_img()){ ?> <img src="<?php echo get_first_img(); ?>" /> <?php } ?>仔仔
那這樣不是都有東西在圖片位置嗎?
我的意思是，當文章只有文字沒有圖片又不想有任何死圖或連結...只出現文字....@@ :thinking:
Brownsugar
你好，剛剛回覆 code 有問題，我重新編輯過了。
移除那段主要目的是，當沒有圖片時，$first_img 為空白，
呼叫時，判斷 get_first_img() 有沒有東西，如果沒有就不顯示，
如果有（if(get_first_img())），才執行圖片輸出，所以如果沒有圖片那邊就等於沒作用。
仔仔
謝謝你的幫助.......我現在試試看先~...
不過之前加入時見到你的CODE...多了「」一行東西那~是不是打多了?
仔仔
因為加了最尾這個...「」有錯誤用不了... :sleeping:
Brownsugar
是 } 後面 img 那串嗎，那個不知道為什麼常常跑出來...
仔仔
YEAH~ :thumbsup: ，弄好了... :heart_eyes: :heart_eyes:
我又多一個地方可以常上來啦 :laughing:
朱小逢
請問一下黑糖大大
$first_img = "預設圖片網址";
這段圖片網址如果不要使用固定位置
如果要調用佈景內的圖片要如何改寫呢?
謝謝 :laughing:
Brownsugar
為啥要我回兩次 XDD
設定成這樣就行了：
$first_img = get_bloginfo('template_directory') . '/path/hi.jpg'; // 佈景目錄下的圖片