如何在 WordPress 中添加下一个/上一个链接(终极指南)



您想在 WordPress 中添加下一个/上一个链接吗?

下一个和上一个链接是允许用户查看下一个或上一个帖子的动态链接。

在本文中,我们将向您展示如何在 WordPress 中轻松添加下一个/上一个链接,以及如何充分利用它们。

WordPress中的下一个/上一个链接是什么?

下一个/上一个链接是由 WordPress 主题,允许用户轻松导航到下一篇或上一篇文章。这有助于增加浏览量并降低跳出率。

默认情况下,WordPress 博客 帖子按时间倒序显示(较新的帖子优先)。

这意味着下一个帖子是在用户正在查看的当前帖子之后发布的帖子,而上一个帖子是在当前帖子之前发布的帖子。

下一个/previous 链接允许用户轻松浏览单个文章和博客存档页面。它还可以帮助您 为您的博客获得更多浏览量

大多数 WordPress 主题都带有内置的下一篇和上一篇文章链接,这些链接会自动显示在每篇文章的底部。但是,有些主题不会显示它们,或者您可能希望自定义它们在您的 WordPress 网站上的显示位置和方式。

话虽如此,让我们看看如何轻松添加下一个和上一个链接在 WordPress 中。

以下是我们将在本文中介绍的主题列表。

使用插件添加到 WordPress 的下一个/上一个链接

这种方法更简单,推荐给不习惯向其网站添加代码的初学者。

首先,你需要安装并激活CBX 下一篇上一篇 插件。有关更多详细信息,请参阅我们的分步指南 如何安装 WordPress 插件

激活后,您需要访问设置 » CBX 下一个上一页。从这里,您可以选择在您的网站上显示下一个和上一个链接的位置。

插件允许您在单个帖子、页面、存档页面等上显示下一个和上一个链接箭头。

为了使您的下一个和上一个链接更相关,您还可以选择显示同一 类别或标签

插件的免费版本只允许您显示下一篇和上一篇文章的箭头。您可以升级到专业版以解锁其他显示选项,例如滑入式弹出窗口。

如果你选择显示来自同一 分类法 的下一篇/上一篇文章,然后您需要切换到按分类法导航选项卡。

从这里,您需要选择要使用的分类法来选择下一个和上一个链接。

插件(可选)还允许您使用 Google Analytics 跟踪点击次数。要使用此功能,您需要先 在 WordPress 中安装 Google Analytics

之后,切换到插件设置中的 Google Analytics 选项卡并启用点击跟踪选项。

一旦你完成后,不要忘记单击“保存设置”按钮来存储您的更改。

您现在可以访问您的 WordPress 网站 查看下一个/上一个链接的运行情况。

这个方法更容易,但它并没有给你太大的灵活性。例如,免费版本不显示下一个或上一个帖子标题。

如果您需要更大的灵活性,请继续阅读。

将下一个/上一个链接添加到 WordPress 主题

对于这种方法,您需要编辑 WordPress 主题文件。如果您以前没有这样做过,请查看我们关于 如何在 WordPress 中复制和粘贴代码

接下来,您需要连接到您的 WordPress 网站 使用 FTP 客户端 或使用 WordPress 托管 控制面板。

连接后,您需要导航到 /wp-content/themes/your-current-theme/ 文件夹。

现在,您需要找到 single.php 文件。这是负责在您的网站上显示单个帖子项目的文件。

一些 WordPress 主题可能会引用 single.php 文件中的其他文件。这些文件称为模板部分,位于 WordPress 主题的 template-parts 文件夹中。

有关更多详细信息,请参阅我们的文章 要在 WordPress 主题中编辑的文件

之后,只需将以下代码复制并粘贴到模板文件中要显示下一个和上一个链接的位置即可。

您现在可以保存更改并访问你的网站看Next / 以前的链接在行动。

以上模板标签将简单地显示下一个和上一个帖子的链接,并将帖子标题作为锚文本。并不是说这些是下一篇和上一篇文章的链接。

让我们稍微改变一下,并为用户提供有关这些链接的一些上下文。我们将通过为 the_post_navigationtemplate 标签添加可用参数来做到这一点。

只需将上面的代码替换为以下代码:

您现在可以保存更改并预览您的网站。

这是它在我们的测试网站上的样子:

您还可以使用特殊字符和箭头以及下一个和上一个帖子标题。

只需将代码替换为以下代码:

这是该代码在我们的测试网站上的外观:

现在假设您想让下一个和上一个链接与文章更相关用户当前正在查看。

您可以通过显示来自同一类别或标签的下一个和上一个链接来做到这一点。

此代码告诉 WordPress 显示同一类别中的下一篇和上一篇文章。如果需要,您可以将分类参数更改为标签或任何其他自定义分类。

在 WordPress 中设置下一个/上一个链接的样式

现在我们已经学习了如何在 WordPress 中添加下一个/上一个链接,让我们看看如何正确设置它们的样式。

默认情况下,WordPress会自动添加几个默认 CSS 类 到文章导航链接。您可以在 WordPress 主题中使用这些 CSS 类来设置这些链接的样式。

这里有一些基本的 CSS,你可以添加到你的主题中。

这个基本的 CSS 简单地显示下一个和上一个链接,它们彼此相邻,但在同一行的不同侧。

您还可以通过添加背景颜色、悬停效果等来使您的导航链接脱颖而出。

这里有一些示例 CSS 代码,您可以将其用作起点。

这段代码为链接文本设置样式,并添加一些背景颜色和悬停效果,使下一个和上一个链接更加突出。

将下一个/上一个链接添加到 WordPress 页面

通常,帖子导航链接用于 WordPress 中的博客文章。那是因为这些项目是按时间倒序发布的。

另一方面,WordPress 页面通常不按时间顺序发布。有关更多详细信息,请参阅我们的指南 WordPress 中的帖子和页面之间的区别

但是,有些用户可能需要显示页面导航,以便用户可以轻松找到下一页。

幸运的是,您可以使用我们之前用于页面的相同代码。但是,您需要在 page.php 模板中添加代码。

这是它在我们的演示网站上的样子:

在 WordPress 中使用缩略图添加下一个/上一个链接

想让您的下一个和上一个链接更加引人注目吗?图片是吸引用户注意力并使这些链接更具吸引力的最简单方法。

让我们用 post 旁边的缩略图或特色图片

首先,您需要将以下代码添加到主题的 functions.php 文件中或一个 站点特定插件.

此代码只是创建一个函数,该函数显示下一个和上一个帖子以及特色图片或帖子缩略图。

接下来,您需要将 wpb_posts_nav() 函数添加到您要显示链接的主题的 single.php 文件中。

如果您的主题已经有下一个和上一个链接,那么您可能需要找到包含 the_post_navigation() 函数的行并将其删除。

现在将以下代码添加到显示您的自定义下一个和上一个链接。

添加代码后,不要忘记保存更改并访问您的网站以查看正在运行的链接。

现在,您可能会注意到这些链接看起来不是很干净。

让我们通过添加一些 自定义 CSS 以设置它们的样式。

您现在可以保存您的更改并访问您的网站以查看带有缩略图的下一个和上一个链接。

这是它在我们的测试网站上的样子:

有关详细信息,您可以在 如何将缩略图添加到上一个和下一个帖子链接

奖励:删除 WordPress 中的下一个和上一个链接< /h4>

有些用户可能想要删除 WordPress 中的下一个和上一个链接。

例如,一些用户可能会发现这些链接的帮助不大。有些人可能想要显示 相关帖子热门帖子

有两种方法可以删除 WordPress 中的下一个和上一个链接。

方法 1. 删除 WordPress 主题中的代码

要删除 WordPress 中的下一个和上一个链接,您需要删除负责在 WordPress 中显示链接的代码主题。

这种方法的问题是,一旦你更新了你的主题,被删除的代码就会回来。

为避免这种情况,您需要 创建子主题

接下来,您需要找到负责在您的父主题中显示下一个和上一个链接的代码。

通常,它位于 single.php 或 content-single.php 模板中。

基本上,您将寻找包含以下函数的代码。

此代码的格式和参数可能略有不同。例如,在我们的测试站点上,主题使用此代码来显示链接:

如果您使用的是子主题,则需要在子主题中复制此特定模板,然后删除使用的行显示下一个或上一个链接。

如果您只想在父主题中删除它,那么您也可以这样做。

删除代码将阻止 WordPress 显示下一个和上一个链接。

方法2.隐藏下一个和上一个Posts Links

这个方法并没有真正删除下一个和上一个链接。相反,它只是让它们对人类读者不可见。

只需将以下自定义 CSS 添加到您的 WordPress 主题。

不要忘记保存您的更改并访问您的网站以查看导航链接消失。

我们希望本文帮助您了解如何在 WordPress 中轻松添加下一个和上一个链接。您可能还想在 如何选择最好的网页设计软件,或者我们的专家最佳域名注册商的比较

如果您喜欢这篇文章,请订阅我们的 YouTube 频道 用于 WordPress 视频教程。您还可以在 Twitter 上找到我们href="https://facebook.com/wpbeginner" target="_blank" rel="noreferrer noopener nofollow" title="在 Facebook">Facebook 上加入 WPBeginner 社区



No comments:

Powered by Blogger.