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

时间：2023-06-07 02:57:02 | 来源：网站运营

时间：2023-06-07 02:57:02 来源：网站运营

如何在您的 WordPress 主题中添加数字分页：您想在您的 WordPress 主题中添加数字分页吗？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 方法一、如何使用WP-PageNavi在WordPress中添加数字分页
• 方法 2. 如何在您的 WordPress 主题中手动添加数字分页

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

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

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

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

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

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

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

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

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

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

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

默认情况下，插件会显示几个较大的数字。这使访问者只需单击一下即可向前移动多个页面。

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

想要使用不同的间隔，例如 5 或 20？然后只需将新间隔键入“以倍数显示更大的页码”字段。

每个 WordPress 站点都是不同的，因此最好尝试不同的设置以查看哪种分页设置最适合您。

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

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

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

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

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

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

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

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

1	<?php wp_pagenavi(); ?>

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

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

1	<?php /*twenty_twenty_one_the_posts_navigation();*/

然后您可以继续将这一行替换为以下代码片段：

1	<?php wp_pagenavi(); ?>

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

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

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

您可以通过编辑插件的代码来完成此操作。

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

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

不要忘记单击“保存更改”按钮来保存您的更改。

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

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

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

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

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

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

您现在可以将 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 网站上看起来最好。

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

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

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

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

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

要手动添加数字分页，请打开主题的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 '<div class="navigation"><ul>' . "/n"; /** Previous Post Link */ if ( get_previous_posts_link() ) printf( '<li>%s</li>' . "/n", get_previous_posts_link() ); /** Link to first page, plus ellipses if necessary */ if ( ! in_array( 1, $links ) ) { $class = 1 == $paged ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "/n", $class, esc_url( get_pagenum_link( 1 ) ), '1' ); if ( ! in_array( 2, $links ) ) echo '<li>…</li>'; } /** Link to current page, plus 2 pages in either direction if necessary */ sort( $links ); foreach ( (array) $links as $link ) { $class = $paged == $link ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "/n", $class, esc_url( get_pagenum_link( $link ) ), $link ); } /** Link to last page, plus ellipses if necessary */ if ( ! in_array( $max, $links ) ) { if ( ! in_array( $max - 1, $links ) ) echo '<li>…</li>' . "/n"; $class = $paged == $max ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "/n", $class, esc_url( get_pagenum_link( $max ) ), $max ); } /** Next Post Link */ if ( get_next_posts_link() ) printf( '<li>%s</li>' . "/n", get_next_posts_link() ); echo '</ul></div>' . "/n"; }

此代码获取页数，准备好在您的 WordPress 主题中显示。

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

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

1	<?php wpbeginner_numeric_posts_nav(); ?>

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

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

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

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

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

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

在每个文件中，只需找到以下部分：

1	<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>

然后您可以继续将这一行替换为以下代码片段：

1	<?php wpbeginner_numeric_posts_nav(); ?>

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

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

为了帮助访问者浏览档案，我们将用不同的颜色突出显示当前页码。为此，请打开主题的 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;}

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

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