如何在 WordPress 主题中添加数字分页
您想在 WordPress 主题中添加数字分页吗？
默认情况下，WordPress 主题在存档页面底部添加下一个/上一个链接。挑战在于这些对于用户来说不是很友好。这就是为什么许多流行博客使用数字分页来使访问者更轻松地导航其存档页面。
在本文中，我们将向您展示如何在 WordPress 主题中添加数字分页。
为什么要在 WordPress 主题中添加数字分页？
大多数主题都有一个显示帖子列表的存档页面。当您发布更多 WordPress 博客文章时，您的存档页面将跨越多个页面。
分页链接可帮助访问者在存档页面之间移动，通常出现在 WordPress 网站的底部。
一些 WordPress 主题使用“旧帖子”和“新帖子”链接进行分页。然而，这只允许访问者向前和向后移动一页。
它也不会显示访问者在档案中的当前位置。这可能会使访问者更难以浏览您博客的存档。
这就是数字分页的用武之地。
数字分页不是显示“旧”和“新”链接，而是显示一系列数字，让访问者跳转到存档中的特定页面。
数字分页还可以使用突出显示或不同的颜色来显示当前页码，以便访问者始终准确地知道他们在档案中的位置。
在 WPBeginner，我们使用数字分页并以橙色突出显示当前页码。我们还提供访问者当前页面周围 4 个页面的直接链接。
我们甚至有一个指向我们档案中最后一页的链接，因此访问者可以快速轻松地查看我们最早的帖子，如下图所示。
根据我们的经验，与默认的“旧帖子”和“新帖子”链接相比，这种数字分页使您的网站更易于导航。
如果您的 WordPress 主题有“旧”和“新”分页，那么我们始终建议将其替换为数字分页。
在本指南中，我们将介绍在 WordPress 主题中添加数字分页的两种不同方法。如果您喜欢直接跳转到特定方法，那么您可以使用下面的链接。
方法1.如何使用WP-PageNavi在WordPress中添加数字分页
方法 2. 如何在 WordPress 主题中手动添加数字分页
方法1.如何使用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 标签即可。
如果您找到这些标签，请将它们替换为以下代码片段：
<?php wp_pagenavi(); ?>
某些主题可能没有 previous_posts_link 或 next_posts_link 标签。
如果您在主题中找不到这些标签，请查找 the_posts_navigation。例如，您将在二十二十一主题的 archive.php 文件中找到以下内容：
<?php /*twenty_twenty_one_the_posts_navigation();*/
然后您可以继续将此行替换为以下代码片段：
<?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 或您想要显示数字分页的任何其他页面中添加以下模板标记即可。
<?php wpbeginner_numeric_posts_nav(); ?>
请注意，添加此代码的位置将影响数字分页在网站上的显示位置。
通常，您需要在存档页面的底部显示分页，因此您通常需要将模板标记添加到页脚代码中。
您的主题是否已经具有某种形式的分页，例如“旧帖子”和“新帖子”链接？
在这种情况下，您需要找到分页代码并将其替换为上面的代码片段。
例如，Ashe 是最好的免费 WordPress 博客主题之一，并且已经将“第一页”和“最后一页”分页链接添加到您的存档页面。
要将这些内置链接替换为数字分页，您需要编辑主题的 templates/grid.php 和 templates/blog-pagination.php 文件。
在每个文件中，只需找到以下部分：
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
然后您可以继续将此行替换为以下代码片段：
<?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;
}
之后，只需单击“更新文件”按钮即可保存更改。
现在，如果您访问存档页面，您将在网站上看到数字分页。
我们希望本文能帮助您了解如何在 WordPress 主题中添加数字分页。您还可以阅读我们的指南，了解如何使用 WordPress 在线博客赚钱以及如何在不编写任何代码的情况下创建自定义 WordPress 主题。
如果您喜欢这篇文章，请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。