什么是WordPress中的上下篇文章链接？
上下篇文章链接是由WordPress主题添加的动态链接，允许用户轻松导航到下一篇或上一篇文章。这有助于增加页面浏览量并降低跳出率。默认情况下，WordPress博客文章按时间倒序显示（最新文章在前）。这意味着下一篇文章是用户当前查看的文章之后发布的文章，上一篇文章是该文章之前发布的文章。
通过上下篇文章链接，用户可以轻松导航单个文章和博客存档页面。这也有助于增加博客的页面浏览量。大多数WordPress主题在每篇文章的底部都会自动显示内置的上下篇文章链接。然而，某些主题并不显示它们，或者你可能想自定义它们在WordPress网站上的显示位置和方式。话不多说，让我们看看如何在WordPress中轻松添加上下篇文章链接。
使用插件为WordPress添加上下篇文章链接
这种方法更简单，推荐给不熟悉向网站添加代码的初学者。首先，您需要安装和激活CBX Next Previous Article插件。激活后，您需要访问“设置 » CBX Next Previous”页面。从这里，您可以选择在网站的哪个位置显示上下篇链接。该插件允许您在单篇文章、页面、存档页面等地方显示上下篇链接箭头。为了使上下篇链接更相关，您还可以选择显示同一类别或标签的上下篇文章。
将上下篇文章链接添加到WordPress主题
这种方法需要编辑WordPress主题文件。如果您以前没有这样做过，可以看看我们的指南，了解如何在WordPress中复制和粘贴代码。然后，您需要使用FTP客户端或主机控制面板中的文件管理器app连接到您的WordPress网站。连接后，需要导航到/wp-content/themes/您的当前主题/文件夹。找到并打开single.php文件，这是显示单篇文章项的文件。一些WordPress主题可能在single.php文件中引用其他文件，这些文件位于主题的template-parts文件夹中。
简单地在模板文件中希望显示上下篇链接的位置粘贴以下代码：
您现在可以保存更改并访问您的网站，查看上下篇文章链接的效果。
现让我们增加更多参数，使上下篇文章链接提供更多上下文。将代码替换为以下内容：
__( '上一篇文章：%title' ), 'next_text' => __( '下一篇文章：%title' ), ) ); ?>
您可以保存更改并预览网站。此代码将显示带有文章标题的上下篇文章链接。
在WordPress中为上下篇文章链接添加样式
现在我们已学会如何在WordPress中添加上下篇链接，让我们看看如何适当地为它们添加样式。默认情况下，WordPress会自动为文章导航链接添加一些默认的CSS类。您可以使用这些CSS类在主题中为这些链接添加样式。以下是一些基本CSS可以添加到主题：
.nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; } .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; } .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; }
此基本CSS将上下篇链接显示在同一行的不同侧。您也可以添加背景颜色，悬停效果等，使导航链接更显眼。
为WordPress页面添加上下篇文章链接
通常，文章导航链接用于WordPress中的博客文章，因为这些项目按时间倒序发布。另一方面，WordPress页面一般不会按时间顺序发布。然而，有些用户可能需要显示页面导航，让用户更方便地找到下一页。幸运的是，您可以在page.php模板中使用与文章相同的代码。
__( '← %title' ), 'next_text' => __( '%title →' ), ) ); ?>
添加代码后，您可以保存更改并预览网站。这样，您可以在页面间轻松导航。
在WordPress中添加带缩略图的上下篇文章链接
想让上下篇文章链接更明显吗？图像是吸引用户注意力并使这些链接更具参与性的最简单方式。首先，您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中：
function wpb_posts_nav(){ $next_post = get_next_post(); $prev_post = get_previous_post(); if ( $next_post || $prev_post ) : ?>
<?php endif; }
此代码创建了一个带特色图片或文章缩略图的自定义上下篇文章链接。接下来，您需要将wpb_posts_nav()函数添加到主题的single.php文件中显示链接的位置。如果您的主题已经有上下篇文章链接，可能需要查找包含the_post_navigation()函数的行并删除它。添加以下代码以显示您的自定义上下篇文章链接：
添加代码后，不要忘记保存更改并访问您的网站以查看链接效果。您可能会注意到这些链接看起来不太整洁。通过添加一些自定义CSS来改变这种情况。
.wpb-posts-nav { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; align-items: center; max-width: 1200px; margin: 100px auto; } .wpb-posts-nav a { display: grid; grid-gap: 20px; align-items: center; } .wpb-posts-nav h4, .wpb-posts-nav strong { margin: 0; } .wpb-posts-nav a svg { display: inline-block; margin: 0; vertical-align: middle; } .wpb-posts-nav > div:nth-child(1) a { grid-template-columns: 100px 1fr; text-align: left; } .wpb-posts-nav > div:nth-child(2) a { grid-template-columns: 1fr 100px; text-align: right; } .wpb-posts-nav__thumbnail { display: block; margin: 0; } .wpb-posts-nav__thumbnail img { border-radius: 10px; }
保存更改后，访问您的网站查看带缩略图的上下篇链接的效果。想了解更多详情，请参阅我们关于如何在上下篇文章链接中添加缩略图的指南。
增强功能：在WordPress中删除上下篇文章链接
某些用户可能希望在WordPress中删除上下篇文章链接。例如，有些用户可能会觉得这些链接不太有用，而另一些用户可能希望显示相关文章或热门文章。通过两种方法可以删除上下篇文章链接：
方法1：删除WordPress主题中的代码
要删除WordPress中的上下篇文章链接，您需要移除主题中负责显示链接的代码。这种方法的问题在于，一旦您更新主题，删除的代码将恢复原状。为避免这种情况，您需要创建一个子主题。接下来，您需要找到上级主题中负责显示上下篇链接的代码。通常，这些代码在single.php或content-single.php模板中。基本上，您需要查找包含以下函数的代码：
这些代码的格式和参数可能有所不同。例如，在我们的测试站点，主题使用以下代码来显示链接：
the_post_navigation( array( 'prev_text' => ' ', 'next_text' => ' ', ) );
如果使用子主题，则需要在子主题中复制此特定模板，然后删除用于显示上下篇链接的行。如果您宁愿在父主题中删除它，也可以这样做。删除代码将阻止WordPress显示上下篇文章链接。
方法2：隐藏上下篇文章链接
此方法不会真正删除上下篇链接，而是使它们对人类读者不可见。简单地将以下自定义CSS添加到WordPress主题中：
nav.navigation.post-navigation { display: none; }
保存更改后访问您的网站，查看导航链接是否消失。希望这篇文章能帮您学习如何轻松在WordPress中添加上下篇文章链接。您可能还想看看我们的关于如何选择最佳网页设计软件的指南，或专家对最佳域名注册商的比较。如果喜欢这篇文章，请订阅我们的YouTube频道获取WordPress视频教程。您还可以在Twitter和Facebook上找到我们。
