如何在您的 WordPress 主题中添加数字分页

您想在您的 WordPress 主题中添加数字分页吗?

默认情况下,WordPress 主题在存档页面的底部添加下一个/上一个链接。挑战在于这些不是非常用户友好的。这就是为什么许多流行的博客使用数字分页来使访问者更容易浏览他们的存档页面。

在本文中,我们将向您展示如何在您的 WordPress 主题中添加数字分页。

如何在您的 WordPress 主题中添加数字分页

为什么在您的 WordPress 主题中添加数字分页?

大多数主题都有一个显示帖子列表的存档页面。随着您发布更多WordPress 博客文章,您的存档页面将跨越多个页面。

分页链接帮助访问者在存档页面之间移动,通常出现在您的WordPress 网站的底部。

一些WordPress 主题使用“旧帖子”和“新帖子”链接进行分页。但是,这只允许访问者前后移动一页。

它也不会显示访问者在存档中的当前位置。这会使访问者更难浏览您的博客存档。

这就是数字分页的用武之地。

数字分页不是显示“旧”和“新”链接,而是显示一系列数字,让访问者可以跳转到存档中的特定页面。

数字分页也可以使用突出显示或不同的颜色来显示当前页码,因此访问者总是知道他们在档案中的确切位置。

在 WPBeginner,我们使用数字分页并以橙色突出显示当前页码。我们还提供指向访问者当前页面周围 4 个页面的直接链接。

我们甚至还有一个指向存档最后一页的链接,因此访问者可以快速轻松地查看我们最早的帖子,如下图所示。

WPBeginner 网站上的数字分页链接

根据我们的经验,与默认的“旧帖子”和“新帖子”链接相比,这种数字分页使您的网站更易于浏览。

如果您的 WordPress 主题具有“旧”和“新”分页,那么我们始终建议将其替换为数字分页。

在本指南中,我们将介绍在 WordPress 主题中添加数字分页的两种不同方法。如果您更喜欢直接跳到特定方法,那么您可以使用下面的链接。

方法 1. 如何使用 WP-PageNavi 在 WordPress 中添加数字分页

方法 2. 如何在您的 WordPress 主题中手动添加数字分页

方法 1. 如何使用 WP-PageNavi 在 WordPress 中添加数字分页

在 WordPress 中添加数字分页的最简单方法是使用WP-PageNavi插件。

要使用此插件,您仍然需要对主题代码进行一些更改,但它比完整代码方法容易得多,因为 WP-PageNavi 让您可以完全控制网站的分页。

您需要做的第一件事是安装并激活WP-PageNavi 插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。

激活插件后,转到设置»PageNavi配置插件设置。

如何在WordPress中添加数字分页

在这里,您可以用自己的措辞替换任何默认的分页文本。例如,您可以更改网站用于其“首页”和“最后一页”链接的文本。

您还可以自定义数字分页链接。

在“要显示的页数”部分中,您可以选择插件将在您网站的分页部分中显示多少页。

WP-PageNavi WordPress 插件

默认设置为 5,这意味着 WP-PageNavi 将显示指向 5 个页面的直接链接。

正如您在下面的屏幕截图中看到的那样,如果您在第 4 页,那么您将看到指向第 2、3、4、5 和 6 页的链接。

WordPress中数字分页的示例

您可能希望显示更多页面或更少页面。要进行此更改,只需在“要显示的页数”字段中输入新数字。

默认情况下,插件会显示几个更大的数字。这使访问者只需单击一下即可通过多个页面前进。

默认情况下,插件显示三个较大的数字,每次增加 10。例如,10、20 和 30。

想要使用不同的间隔,例如 5 或 20?然后只需在“以倍数显示更大的页码”字段中输入新的间隔。

自定义 WordPress 分页设置

每个 WordPress 网站都不同,因此最好尝试不同的设置,看看哪些分页设置最适合您。

如果您对 WP-PageNavi 设置进行了任何更改,请不要忘记滚动到页面底部并单击“保存更改”按钮。

接下来,您需要在 WordPress 主题中添加模板标签。为此,我们建议创建一个子主题,然后编辑子主题的代码。

通过创建子主题,您仍然可以安全地更新您的 WordPress 主题,而不会丢失您的自定义数字分页。要了解更多信息,请参阅我们关于如何创建 WordPress 子主题的分步指南。

无论您选择编辑父主题还是子主题,都需要一个FTP 客户端。如果这是您第一次使用 FTP,那么您可以查看我们关于如何使用 FTP 连接到您的站点的完整指南。

当您通过 FTP 连接到您的WordPress 主机帐户时,您就可以编辑您的 WordPress 主题代码了。

这些步骤将根据您的 WordPress 主题而有所不同。但是,您通常需要编辑 index.php 或 archive.php 文件中的代码,以及 WordPress 主题中的任何其他存档模板文件。

只需打开这些文件,然后搜索 previous_posts_link 和 next_posts_link 标签。

如果您找到这些标签,请将它们替换为以下代码片段:

某些主题可能没有 previous_posts_link 或 next_posts_link 标签。

如果您在主题中找不到这些标签,请改为查找 the_posts_navigation。例如,您会在二十一二十一主题的 archive.php 文件中找到以下内容:

然后,您可以继续将此行替换为以下代码片段:

进行这些更改后,保存并关闭所有打开的 WordPress 主题文件。

现在,如果您访问WordPress 存档页面,您应该会在您的网站上看到新的数字分页。

此时,您可能想要更改数字分页的颜色和样式,以便更好地补充您的主题或网站品牌。

您可以通过编辑插件的代码来做到这一点。

但是,我们建议将 WP-PageNavi 代码粘贴到主题的 style.css 文件中,然后在主题文件中进行更改。这意味着您在更新 WP-PageNavi 插件时不会丢失您的自定义设置。

要复制您的插件代码,请转到Settings » PageNavi。然后,您可以找到“使用 pagenavi-css.css”部分并单击它旁边的“否”单选按钮。

不要忘记单击“保存更改”按钮以保存更改。

更改您的 WordPress 分页样式

接下来,转到插件»插件文件编辑器。

然后,您可以打开“选择要编辑的插件”下拉菜单并选择“WP-Page Navi”。之后,您就可以点击“选择”了。

WordPress 代码编辑器

在右侧菜单中,单击 pagenavi-css.css 文件。

然后,继续复制此文件中的所有代码。

WordPress 插件编辑器

接下来,只需转到外观»主题文件编辑器。

在右侧菜单中,单击主题的 style.css 文件。

WordPress 主题编辑器

您现在可以将 pagenavi-css.css 代码粘贴到主题的 style.css 文件中,然后开始进行更改。

让我们看一个例子。这是数字分页代码的修改版本,您可以将其添加到主题的 style.css 文件中:

wp-pagenavi {    clear: both;}  .wp-pagenavi a, .wp-pagenavi span {    color: #FFF;    text-decoration: none;    background-color:#6FB7E9;    border: 1px solid #B2D1E5;    padding: 5px 5px;    margin: 2px;}  .wp-pagenavi a:hover, .wp-pagenavi span.current {    border-color: #E9F2F9;    background-color:#6FB7E9;}  .wp-pagenavi span.current {    font-weight: bold;    background-color:#3C8DC5;}

在下图中,您可以看到此数字分页在您的网站上的外观。

WordPress主题中的自定义数字分页

值得尝试不同的样式,看看在您的 WordPress 网站上看起来最好的样式。

如果您对数字分页的外观感到满意,请单击“更新文件”按钮以保存更改。

方法 2. 如何在您的 WordPress 主题中手动添加数字分页

另一种选择是使用代码在 WordPress 主题中手动添加数字分页。

许多 WordPress 主题带有内置的“旧”和“新”链接,或默认数字分页。例如,流行的Astra 主题会自动将自己的数字分页添加到您的存档页面,如下图所示。

Astra WordPress 主题中的分页

您可以使用此方法自定义主题的内置分页。例如,您可能会更改样式以更好地适应您的网站。

要手动添加数字分页,请打开主题的functions.php 文件。在这里,您可以使用 FTP 客户端或WordPress 托管cPanel 的文件管理器。如果您使用的是 FTP,那么您可以查看我们关于如何使用 FTP 连接到您的站点的完整指南。

成功连接到站点后,打开 functions.php 文件并添加以下代码:

function wpbeginner_numeric_posts_nav() {      if( is_singular() )        return;      global $wp_query;      /** Stop execution if there’s only 1 page */    if( $wp_query->max_num_pages <= 1 )        return;      $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;    $max   = intval( $wp_query->max_num_pages );      /** Add current page to the array */    if ( $paged >= 1 )        $links[] = $paged;      /** Add the pages around the current page to the array */    if ( $paged >= 3 ) {        $links[] = $paged – 1;        $links[] = $paged – 2;    }      if ( ( $paged + 2 ) <= $max ) {        $links[] = $paged + 2;        $links[] = $paged + 1;    }      echo '

‘ . “\n”;  }

此代码获取页面数,准备好在 WordPress 主题中显示。

接下来的步骤将根据您的主题而有所不同。

如果您的主题没有内置某种形式的默认分页,那么您只需在 index.php、archive.php、category.php 或您想要显示数字分页的任何其他页面中添加以下模板标签.

请注意,添加此代码的位置将影响数字分页在您网站上的显示位置。

通常,您会希望在存档页面的底部显示分页,因此您通常需要将模板标签添加到页脚代码中。

您的主题是否已经有某种形式的分页,例如“旧帖子”和“新帖子”链接?

在这种情况下,您需要找到分页代码并将其替换为上述代码段。

例如,Ashe 是最好的免费 WordPress 博客主题之一,并且已经在您的存档页面中添加了“第一页”和“最后一页”分页链接。

要将这些内置链接替换为数字分页,您需要编辑主题的 templates/grid.php 和 templates/blog-pagination.php 文件。

在每个文件中,只需找到以下部分:

然后,您可以继续将此行替换为以下代码片段:

添加代码后,不要忘记保存更改。

下一步是为您的自定义数字分页设置样式。

为了帮助访问者浏览存档,我们将用不同的颜色突出显示当前页码。为此,请打开主题的 style.css 文件,然后将以下代码粘贴到此文件中:

.navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled {    color: #fff;    text-decoration:none;}  .navigation li {    display: inline;}  .navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled {    background-color: #6FB7E9;    border-radius: 3px;    cursor: pointer;    padding: 12px;    padding: 0.75rem;}  .navigation li a:hover,.navigation li.active a {    background-color: #3C8DC5;}

毕竟,只需单击“更新文件”按钮即可保存更改。

现在,如果您访问存档页面,您将在您的网站上实时看到数字分页。

在 WordPress 中手动添加数字分页

我们希望本文能帮助您了解如何在 WordPress 主题中添加数字分页。您还可以阅读我们的指南,了解使用 WordPress 在线博客赚钱的方法以及如何在不编写任何代码的情况下创建自定义 WordPress 主题。