WordPress带缩略图上一篇下一篇文章导航教程

需求说明

在WordPress中，默认的 previous_post_link() 和 next_post_link() 调用的是纯文本超链接。如果想调用上一篇、下一篇文章的特色图像，可以通过获取上一篇、下一篇文章的ID，然后传递给获取缩略图的函数 get_the_post_thumbnail() 来调用对应的特色图像。

实现步骤

以下代码放置在需要调用上一篇、下一篇文章链接的位置，比如 single.php 模板文件中。

代码实现

<?php 
// 调用上一篇文章
$prevPost = get_previous_post(true);
if($prevPost) {
    $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(100, 100));
    previous_post_link('%link', "$prevThumbnail %title", true);
}

// 调用下一篇文章
$nextPost = get_next_post(true);
if($nextPost) {
    $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(100, 100));
    next_post_link('%link', "$nextThumbnail %title", true);
}
?>

代码解释

1. 获取上一篇文章的ID

   $prevPost = get_previous_post(true);

   get_previous_post(true) 获取同一分类下的上一篇文章的对象。

2. 获取上一篇文章的缩略图

   if($prevPost) {
       $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(100, 100));
   }

   get_the_post_thumbnail($prevPost->ID, array(100, 100)) 获取上一篇文章的缩略图，缩略图大小设置为100x100像素。

3. 调用 previous_post_link 函数显示带有缩略图和标题的链接

   previous_post_link('%link', "$prevThumbnail %title", true);

   previous_post_link('%link', "$prevThumbnail %title", true) 显示上一篇文章的链接，链接内容包括缩略图和标题。

4. 获取下一篇文章的ID

   $nextPost = get_next_post(true);

   get_next_post(true) 获取同一分类下的下一篇文章的对象。

5. 获取下一篇文章的缩略图

   if($nextPost) {
       $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(100, 100));
   }

   get_the_post_thumbnail($nextPost->ID, array(100, 100)) 获取下一篇文章的缩略图，缩略图大小设置为100x100像素。

6. 调用 next_post_link 函数显示带有缩略图和标题的链接

   next_post_link('%link', "$nextThumbnail %title", true);

   next_post_link('%link', "$nextThumbnail %title", true) 显示下一篇文章的链接，链接内容包括缩略图和标题。

完整代码

<?php 
// 调用上一篇文章
$prevPost = get_previous_post(true);
if($prevPost) {
    $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(100, 100));
    previous_post_link('%link', "$prevThumbnail %title", true);
}

// 调用下一篇文章
$nextPost = get_next_post(true);
if($nextPost) {
    $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(100, 100));
    next_post_link('%link', "$nextThumbnail %title", true);
}
?>

通过上述代码，你可以在WordPress的文章页面中显示带有特色图像的上一篇和下一篇文章链接。