WordPress 自動把文章第一張圖設為精選圖片（沒有圖用預設圖），再加一個自訂縮圖尺寸

WordPress 的文章列表、相關文章、分享到 Facebook 的預覽圖，用的都是「精選圖片」。寫文章時忘了設，列表上就空一格，或整排卡片高高低低。

這篇整理兩種不用外掛的做法：

• 做法一：顯示的時候自動補。沒有精選圖片的文章，自動拿內文第一張圖來用；文章裡沒有圖，就用一張預設圖。不改資料庫，舊文章馬上生效。
• 做法二：存檔的時候存進去。發佈或更新文章時，如果還沒有精選圖片，就把內文第一張圖設成精選圖片，之後就是真的設定好了。

最後再說明怎麼新增一種自訂的縮圖尺寸。程式碼可以放在子佈景主題的 functions.php，或用 Code Snippets 這類外掛新增。

做法一：顯示時自動用第一張圖或預設圖

// 文章沒有設定精選圖片時：先用內文第一張圖，沒有圖就用預設圖
add_filter( 'post_thumbnail_id', function ( $thumbnail_id, $post ) {
	if ( $thumbnail_id || ! $post || 'post' !== $post->post_type ) {
		return $thumbnail_id;
	}
	// 用媒體庫插入的圖片，HTML 裡會有 wp-image-編號
	if ( preg_match( '/wp-image-(\d+)/', $post->post_content, $m ) && wp_attachment_is_image( (int) $m[1] ) ) {
		return (int) $m[1];
	}
	// 預設圖：換成你自己媒體庫裡那張圖的編號
	$default_id = 123;
	return wp_attachment_is_image( $default_id ) ? $default_id : $thumbnail_id;
}, 10, 2 );

這段在做什麼：

• WordPress 每次要拿一篇文章的精選圖片，都會經過 post_thumbnail_id 這個篩選器（WordPress 5.9 之後才有）。我們在這裡檢查：已經有精選圖片就不動，沒有才補。
• 從媒體庫插入文章的圖片，HTML 的 class 會帶 wp-image-編號，抓到第一個編號就知道是哪張圖。
• wp_attachment_is_image() 確認這個編號真的是媒體庫裡的圖片，圖片被刪掉也不會出錯。
• 只處理一般文章（post），頁面和商品不受影響。

預設圖的編號怎麼找：到 媒體 → 媒體庫，點開你要當預設圖的那張，網址列最後 item= 後面的數字就是編號，把 123 換掉。

實際在測試網站放了三篇文章：一篇內文有圖、一篇只有文字、一篇只有外站網址的圖片。加上這段之後，Twenty Twenty-Five 和 Twenty Twenty-One 的文章頁、首頁列表，第一篇顯示內文那張圖，另外兩篇顯示預設圖。

要知道的事：

• 資料庫裡沒有存。這是「顯示的時候補上」，所以編輯器右側的「精選圖片」也會顯示這張圖，但存檔後資料庫裡還是空的。
• 少數外掛會直接讀資料庫裡的設定，就看不到這張圖。遇到這種情況改用做法二。
• 外站網址的圖片（不是從媒體庫插入的）抓不到，只能用預設圖。

做法二：存檔時把第一張圖存成精選圖片

// 儲存文章時，如果還沒有精選圖片，就把內文第一張圖存成精選圖片
add_action( 'save_post_post', function ( $post_id, $post ) {
	if ( wp_is_post_revision( $post_id ) || wp_is_post_autosave( $post_id ) || has_post_thumbnail( $post_id ) ) {
		return;
	}
	if ( preg_match( '/wp-image-(\d+)/', $post->post_content, $m ) && wp_attachment_is_image( (int) $m[1] ) ) {
		set_post_thumbnail( $post_id, (int) $m[1] );
		return;
	}
	// 內文沒有用媒體庫插入的圖，就找上傳到這篇文章的第一張圖
	$images = get_attached_media( 'image', $post_id );
	if ( $images ) {
		set_post_thumbnail( $post_id, array_key_first( $images ) );
	}
}, 10, 2 );

• save_post_post 只在儲存「文章」時執行。修訂版本和自動儲存跳過，已經有精選圖片的也跳過。
• 找不到 wp-image-編號，就退一步找「上傳到這篇文章」的第一張圖。

我們在區塊編輯器實際測了幾種情況：

• 新文章放一段文字和一張圖片，按發佈：精選圖片自動設好，編輯器右側也馬上顯示出來。
• 之後只改標題再更新：精選圖片維持不變。
• 在編輯器裡手動移除精選圖片再存檔：這次會保持沒有。但下一次再存檔，又會被設回第一張圖。如果某篇文章真的不要精選圖片，做法二不適合，改用做法一比較好控制。

做法二只會處理之後存檔的文章，舊文章要一篇一篇打開更新才會補上。舊文章很多的話，做法一比較省事。兩種做法也可以一起用。

新增自訂縮圖尺寸

文章卡片想要固定 600×400 的比例，可以讓 WordPress 每次上傳圖片時多產生一個這種尺寸的檔案：

// 新增一種文章卡片用的縮圖尺寸：600×400，超出的部分裁掉
add_action( 'after_setup_theme', function () {
	add_image_size( 'zw-card', 600, 400, true );
} );

// 讓這個尺寸出現在編輯器的圖片尺寸選單
add_filter( 'image_size_names_choose', function ( $sizes ) {
	$sizes['zw-card'] = '文章卡片 600×400';
	return $sizes;
} );

• add_image_size 的最後一個參數 true 代表裁切：照片先縮小，再把超出 600×400 的部分切掉，每張縮圖大小一致。寫 false 則是等比例縮小到不超過 600×400，不裁切。
• 第二段讓這個尺寸出現在區塊編輯器裡。在圖片區塊的設定「解析度」選單，可以看到「文章卡片 600×400」。
• 傳統佈景主題的版型檔裡，可以用 the_post_thumbnail( 'zw-card' ); 輸出這個尺寸的精選圖片。

舊圖片沒有新尺寸，要重新產生

新尺寸只對之後上傳的圖片有效。測試時，加上這段之後新上傳的圖片多了一個 600×400 的檔案，之前上傳的圖片則沒有。舊圖片要補上，可以用 Regenerate Thumbnails 這類外掛，或有主機指令列的話用 WP-CLI：

wp media regenerate --only-missing

--only-missing 只補缺少的尺寸，不會把已經有的縮圖全部重做，比較快。

尺寸不要越加越多

每加一種尺寸，以後每上傳一張圖，主機就多存一個檔案。佈景主題、外掛常常也會自己加尺寸，久了一張圖可能變成十幾個檔案。新增之前先想想網站上真的有地方用到這個尺寸嗎。

延伸閱讀

• WordPress 插入圖片的預設對齊、連結與尺寸：用程式碼設定一次就好
• WordPress 刪除文章時一併刪除圖片：只刪沒被其他文章使用的安全寫法
• WordPress 顯示相關文章：不用外掛，依分類與標籤撈出相關文章

文章列表整齊、每篇都有圖，網站看起來就有持續在經營。正威網路行銷是 25 年經驗的基隆網頁設計工作室，這類細節都可以在建站時一起設定好，台北與全台客戶也歡迎來聊聊。