如何使用缩略图添加 WordPress Next Previous Post
已发表: 2019-09-12
向您的 WordPress 网站添加分页应该不是一个复杂的过程。 实际上，只需很少的编程知识，您就可以轻松地将默认帖子分页更改为编号 WordPress 分页，如我之前关于数字 WordPress 分页的教程中所示。 今天，我希望我们专注于为单个帖子创建分页，其中包含您可能在多个杂志 WordPress 主题中遇到的特色图像。
根据主题的设计，通常会在 WordPress 下一篇文章中看到带有缩略图和标题的单个文章下方或顶部的标题。
WordPress Next Previous Post with Thumbnail Example
例如，在最畅销的 WordPress 杂志主题之一 -报纸中，您可以看到单个帖子有一个带有缩略图的分页，如下图所示：
上图是 WordPress 单篇文章的一个很好的例子，其中下一个页面有缩略图。
在本 WordPress 开发教程结束时，您应该轻松地将我们创建的代码添加到您的 WordPress 插件或主题中，并显示 WordPress 下一篇上一篇文章的缩略图，如报纸 WordPress 主题中所示。
下一页 上一页 WordPress 分页代码
简而言之，您需要拥有的两个重要代码片段是一个获取上一个或下一个帖子，另一个是检索特定帖子的特色图像（下一个或上一个）
为了在本教程中进行说明，我们将使用27 个默认的 WordPress 主题，这是我最喜欢的主题，原因有很多； 原因之一是它的简单性。
此代码肯定适用于所有其他 WordPress 主题或插件。 因此，首先，我们安装并激活了主题，并发布了一个示例单篇文章。
入门
正如您在下图中如箭头所示看到的那样，帖子下方没有下一个先前帖子的分页。 在本节中，我们将在下一篇文章中添加带有缩略图分页的 WordPress。
第一步是在您的主题中找到文件single.php ，因为这是我们将在 the_content() 下方和循环内添加代码的文件。
找到 single.php 文件后，下一步是创建两个变量$next和$prev分配给两个 WordPress 核心函数； get_next_post() 和 get_previous_post() 分别如下面的代码片段所示：
<?php $prev = get_previous_post(); $next = get_next_post(); ?>
这两个功能的工作方式相似； 上一个函数检索上一篇文章，而下一个函数将下一篇文章作为objects检索。
为了演示，我发布了三个帖子，如下图所示：
现在我们需要获取上一篇文章的标题和缩略图，并确保我们将它们包装在带有相应永久链接a href tag中，这有助于使链接可点击：
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters('the_title', $prev->post_title); ?>
<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
</a>接下来，我们获取下一篇文章的标题和缩略图，并使用 href 标签和下一篇文章的永久链接作为 href 标签值进行包装：
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo apply_filters('the_title', $next->post_title); ?>
<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
</a>到目前为止，我们已经有了可以使用缩略图显示 WordPress 下一篇上一篇文章的代码。 到此步骤的完整代码应如下所示：
<?php
$prev = get_previous_post();
$next = get_next_post();
// 上一篇文章的标题和缩略图
?>
<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters('the_title', $prev->post_title); ?>
</a>
<?php
// 下一篇文章的标题和缩略图
?>
<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo apply_filters('the_title', $next->post_title); ?>
</a>
<?php 将此代码添加到single.php文件并确保使用适当的 PHP 开始和结束标记转义 HTML并更新文件，然后检查前端中的更改。
您应该会看到上一篇文章和下一篇文章的缩略图，其标题如下图所示：
样式化 WordPress 上一篇 下一篇
现在我们需要引入两个divs并添加适当的样式以确保我们在每一侧浮动每个帖子。 我们可以通过用两个divs包装代码来实现这一点，如下所示：
<div class="clearfix">
<?php
$prev = get_previous_post();
$next = get_next_post();
// 上一篇文章的标题和缩略图
?>
<div class="post-box prevPost">
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters('the_title', $prev->post_title); ?>
<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
</a>
</div>
<?php
// 下一篇文章的标题和缩略图
?>
<div class="post-box nextPost">
<a href="<?php echo get_permalink( $next->ID ); ?>">
<?php echo apply_filters('the_title', $next->post_title); ?>
<?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
</a>
</div>
</div>
<?php添加 div 的类后，我们现在可以使用 CSS 应用样式，如下所示：
* {
box-sizing：边框框；
}
.邮箱{
向左飘浮;
宽度：50%；
}
.clearfix::之后{
内容： ””;
明确：两者；
显示：表格；
}
.post-box.prevPost img {
最大宽度：40%；
高度：自动；
}
.post-box.nextPost img {
最大宽度：40%；
高度：自动；
}结论
使用此代码，您可以使用缩略图轻松添加 WordPress 下一个上一个帖子分页。 您还可以添加更好的样式来改善单个帖子分页的视觉呈现。 添加 CSS 代码后，您应该会看到两个帖子的布局如下图所示
通过添加条件语句来检查缩略图或帖子是否存在也很重要。 例如，您可以使用如下所示的条件包装$prev部分：
<?php
$prev_ = get_previous_post();
if ( !empty( $prev ) ): ?>
<a href="<?php echo get_permalink( $prev->ID ); ?>">
<?php echo apply_filters( 'the_title', $prev_post->post_title ); ?>
</a>
<?php endif; ?>代码验证是WordPress 开发的重要组成部分，不容忽视。 我希望这篇文章能给您一些见解，您现在可以在您的网站或主题上添加带有缩略图的单个帖子分页。 如果您想学习如何创建 WordPress 博客分页，可以查看之前的教程——如何在 WordPress 中创建数字分页。
如果您需要更多帮助，您可以从WordPress 主题开发人员那里获得帮助，特别是对于那些不了解代码如何工作的用户。 您也可以联系我寻求帮助。