WordPress 上一篇／下一篇加上縮圖：區塊佈景主題、傳統佈景主題都適用的寫法

大部分 WordPress 佈景主題，文章最下面都有「上一篇／下一篇」，但只顯示文章標題，很容易被略過。

讀者看完一篇，如果下面有一張圖、一個看起來有趣的標題，就比較願意再點一篇。這篇用一段程式碼，替上一篇／下一篇的連結加上精選圖片的縮圖，不用裝外掛。

程式碼

放在子佈景主題的 functions.php，或用 Code Snippets 這類外掛新增：

// 上一篇／下一篇的連結加上縮圖
// 區塊佈景主題的「文章導覽連結」區塊、傳統佈景主題的 the_post_navigation() 都會經過這兩個篩選器
function zw_adjacent_link_thumb( $output, $format, $link, $post ) {
	if ( ! $output || ! $post || ! has_post_thumbnail( $post ) || false !== strpos( $output, 'zw-nav-thumb' ) ) {
		return $output; // 沒有相鄰文章、那篇沒有精選圖片，就維持原樣
	}
	$img = get_the_post_thumbnail( $post, 'thumbnail', array(
		'class'   => 'zw-nav-thumb',
		'alt'     => '', // 旁邊就是文章標題，圖片不用再念一次
		'loading' => 'lazy',
		// 尺寸直接寫在 style：有些佈景主題（例如 Twenty Twenty-One）會替圖片加上 width:100% 的行內樣式
		'style'   => 'width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0',
	) );
	return preg_replace_callback( '/<a\b[^>]*>/', function ( $m ) use ( $img ) {
		return $m[0] . $img;
	}, $output, 1 );
}
add_filter( 'previous_post_link', 'zw_adjacent_link_thumb', 10, 4 );
add_filter( 'next_post_link', 'zw_adjacent_link_thumb', 10, 4 );

為什麼兩種佈景主題都能用

• previous_post_link、next_post_link 是上一篇、下一篇的連結 HTML 輸出前會經過的兩個篩選器。
• 區塊佈景主題的「文章導覽連結」區塊，和傳統佈景主題常用的 the_post_navigation()，最後都會經過這兩個篩選器，所以同一段程式碼兩邊都有效。

程式碼做了什麼

• $post：相鄰的那一篇文章（上一篇或下一篇）。用它取得那一篇的精選圖片。
• 沒有相鄰文章、那篇沒有精選圖片：直接回傳原本的內容，不會出現破圖或空白框。
• 用 thumbnail 尺寸：WordPress 預設 150×150 的裁切小圖，檔案小，顯示成 64×64 也很清楚。
• alt 留空：圖片旁邊就是文章標題，用螢幕閱讀器的訪客不用聽兩次一樣的內容。
• loading="lazy"：在文章最下面，等讀者捲到附近才下載。
• 尺寸寫在 style 裡：有些佈景主題會用 CSS 讓文章裡的圖片寬度 100%，寫在圖片自己的 style 才不會被撐大。
• 把圖片放進 <a> 裡面：點圖片、點標題都會到那一篇文章。
• 檢查 zw-nav-thumb：同一個連結被處理兩次時，不會出現兩張圖。

區塊佈景主題：讓縮圖和標題排在同一行

區塊佈景主題的連結預設是一般文字，圖片會排在標題上面。加上這段 CSS，縮圖和標題就會並排：

/* 區塊佈景主題：縮圖和標題排同一行 */
.wp-block-post-navigation-link a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	vertical-align: middle;
}

CSS 放在「外觀 → 編輯器 → 樣式 → 額外 CSS」，或子佈景主題的 style.css。

傳統佈景主題的 HTML 結構每個都不一樣。以 Twenty Twenty-One 為例，縮圖會排在「上一篇」文字和標題的上面，看起來也很整齊，不一定要改。

實際測試的結果

測試站：WordPress 7.1.3。準備兩篇相鄰的文章：

• 上一篇「昨天的文章（有縮圖）」：有精選圖片
• 下一篇「Hello world!」：沒有精選圖片

Twenty Twenty-Five（區塊佈景主題）

• 沒有程式碼：上一篇、下一篇都只有箭頭和標題。
• 加上程式碼和 CSS：上一篇的標題左邊出現 64×64 的圓角縮圖，用的是 150×150 那張小圖；下一篇沒有精選圖片，維持原樣。
• 手機 390 寬：縮圖和標題一樣並排，標題太長會自動換行。

Twenty Twenty-One（傳統佈景主題）

• 加上程式碼：上一篇的縮圖出現在「上一篇」文字和標題的上方，大小一樣是 64×64，沒有被佈景主題撐大；下一篇維持原樣。
• 電腦和手機的結果一樣。

點縮圖和點標題，都會到上一篇文章。

延伸閱讀

• WordPress 顯示相關文章：不用外掛，依分類與標籤撈出相關文章
• WordPress 自動把文章第一張圖設為精選圖片（沒有圖用預設圖），再加一個自訂縮圖尺寸
• WordPress 內部連結怎麼做？SEO 觀念與自動關鍵字連結的正確寫法

讓讀者多看一篇，網站的內容才會被看見。正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站管家年費包含每年 12 次小修改，像這樣的小調整都可以交給我們，台北與全台客戶也歡迎來聊聊。