为WordPress主题添加文章分页功能：提升多文章浏览体验

本文是《WordPress主题开发从入门到精通》系列教程的第七篇。我们将学习如何为文章列表添加分页导航，让用户能够轻松浏览大量内容。

如果你的网站只有几篇文章，那么所有文章都显示在一页上可能没问题。但当你的内容越来越多时，一个包含几十上百篇文章的页面会变得非常长，加载缓慢，用户体验也很差。

这时候就需要分页功能了。就像书本分页一样，我们将文章分成多个页面显示，每页只展示固定数量的内容。今天我们就来学习如何在主题中实现这个重要功能。

为什么需要分页？不仅仅是美观问题

分页不仅仅是为了让页面看起来更整洁，它有多个实际的好处：

性能优化：一次性加载50篇文章和加载10篇文章，对服务器压力和页面加载速度的影响完全不同。分页可以显著提升网站性能。

用户体验：用户可以通过分页导航快速跳转到自己想看的内容区域，而不需要在一个超长的页面中不断滚动。

SEO优化：搜索引擎更喜欢内容结构清晰的网站。合理的分页有助于搜索引擎爬虫更好地索引你的内容。

内容组织：分页让相关内容更加集中，用户可以更专注于当前页面显示的内容。

在WordPress中，我们可以在"设置"→"阅读"中设置"博客页面至多显示"多少篇文章。这个设置会全局控制每页显示的文章数量。

理解WordPress的分页机制

WordPress的分页系统其实很智能。当你访问不同页面时，WordPress会自动计算应该显示哪些文章：

首页：yoursite.com/ 显示最新的文章
第二页：yoursite.com/page/2/ 显示稍早一些的文章
第三页：yoursite.com/page/3/ 显示更早的文章

这个分页信息通过URL参数传递，WordPress的WP_Query类（也就是我们之前学过的主循环的基础）会自动处理这些逻辑。

我们的任务就是在模板中添加分页导航链接，让用户能够在不同页面之间跳转。

最简单的分页方式是只提供"上一页"和"下一页"链接。这种方式适用于大多数博客网站。

在index.php的主循环结束之后，添加以下代码：

<?php get_header(); ?>

<div class="content-wrapper">
    <main class="main-content">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article class="article-item">
                    <h2 class="article-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                    <div class="article-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>

            <!-- 简单分页导航 -->
            <nav class="post-navigation">
                <div class="nav-previous">
                    <?php previous_posts_link( '&laquo; 较新的文章' ); ?>
                </div>
                <div class="nav-next">
                    <?php next_posts_link( '较早的文章 &raquo;' ); ?>
                </div>
            </nav>

        <?php else : ?>
            <p>还没有发布任何文章。</p>
        <?php endif; ?>
    </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

代码说明：

previous_posts_link()：显示指向"较新文章"（也就是更靠前的页面）的链接
next_posts_link()：显示指向"较早文章"（更靠后的页面）的链接
这两个函数会自动判断当前页面位置，只在适当时机显示链接

这种方式的优点是简单直接，缺点是用户无法直接跳转到特定页码，只能一页一页地浏览。

方法二：使用数字分页导航

对于文章数量很多的网站，数字分页导航更加实用。它显示页码列表，让用户能够快速跳转到任意页面。

我们将创建一个自定义函数来生成数字分页。在functions.php文件中添加以下代码：

/**
 * 自定义数字分页函数
 */
function mft_pagination() {
    global $wp_query;

    $big = 999999999; // 需要一个不太可能的整数

    $pages = paginate_links( array(
        'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'    => '?paged=%#%',
        'current'   => max( 1, get_query_var( 'paged' ) ),
        'total'     => $wp_query->max_num_pages,
        'type'      => 'array',
        'prev_text' => '&laquo;',
        'next_text' => '&raquo;',
    ) );

    if ( is_array( $pages ) ) {
        echo '<nav class="pagination-nav"><ul class="pagination">';

        foreach ( $pages as $page ) {
            // 为当前页面添加active类
            if ( strpos( $page, 'current' ) !== false ) {
                echo '<li class="page-item active">' . $page . '</li>';
            } else {
                echo '<li class="page-item">' . $page . '</li>';
            }
        }

        echo '</ul></nav>';
    }
}

现在在index.php中使用这个自定义分页函数：

<?php get_header(); ?>

<div class="content-wrapper">
    <main class="main-content">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article class="article-item">
                    <h2 class="article-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                    <div class="article-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>

            <!-- 使用数字分页 -->
            <?php mft_pagination(); ?>

        <?php else : ?>
            <p>还没有发布任何文章。</p>
        <?php endif; ?>
    </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

方法三：使用WordPress内置的the_posts_pagination()函数

WordPress 4.1之后提供了一个内置函数the_posts_pagination()，它可以自动生成符合当前主题样式的分页导航。

这是最简单且推荐的方法。在index.php中直接使用：

<?php get_header(); ?>

<div class="content-wrapper">
    <main class="main-content">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article class="article-item">
                    <h2 class="article-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                    <div class="article-meta">
                        发布于：<?php the_time( 'Y-m-d' ); ?> | 
                        分类：<?php the_category( ', ' ); ?>
                    </div>
                    <div class="article-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>

            <!-- 使用WordPress内置分页函数 -->
            <?php
            the_posts_pagination( array(
                'mid_size'  => 2,
                'prev_text' => __( '上一页', 'my-first-theme' ),
                'next_text' => __( '下一页', 'my-first-theme' ),
            ) );
            ?>

        <?php else : ?>
            <p>还没有发布任何文章。</p>
        <?php endif; ?>
    </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

参数说明：

mid_size：当前页码左右各显示多少个页码
prev_text：上一页链接的文本
next_text：下一页链接的文本
screen_reader_text：为屏幕阅读器提供的说明文本

为分页添加CSS样式

无论使用哪种方法，我们都需要为分页导航添加合适的样式。在style.css中添加：

/* 分页导航基础样式 */
.pagination-nav {
    margin: 3rem 0;
    text-align: center;
}

.pagination {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.page-item {
    margin: 0;
}

.page-item a,
.page-item span {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #555;
    transition: all 0.3s ease;
}

/* 当前页面样式 */
.page-item span.current {
    background-color: #007cba;
    color: white;
    border-color: #007cba;
}

/* 链接悬停效果 */
.page-item a:hover {
    background-color: #f8f9fa;
    color: #007cba;
}

/* 上一页/下一页按钮样式 */
.page-item .prev,
.page-item .next {
    font-weight: bold;
}

/* 简单的上一页/下一页样式 */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid #eee;
}

.nav-previous a,
.nav-next a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-previous a:hover,
.nav-next a:hover {
    background-color: #007cba;
    color: white;
}

/* 移动端分页适配 */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .post-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-previous,
    .nav-next {
        text-align: center;
    }
}

处理特殊情况的分页

有时候我们需要在不同的模板中使用分页，比如分类页面、搜索页面等。幸运的是，WordPress的分页函数在这些情况下都能正常工作。

但是，在某些自定义查询中，你可能需要特别处理。比如如果你创建了自定义循环：

// 自定义查询示例
$custom_query = new WP_Query( array(
    'category_name' => 'news',
    'posts_per_page' => 5,
) );

if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();
        // 显示文章内容
    }

    // 自定义查询的分页需要传递查询对象
    the_posts_pagination( array(
        'total' => $custom_query->max_num_pages
    ) );

    wp_reset_postdata();
}

分页的SEO最佳实践

为了更好的SEO效果，我们还需要考虑一些细节：

rel="prev"和rel="next"链接：WordPress的the_posts_pagination()会自动添加这些关系标签，有助于搜索引擎理解分页结构。
避免内容重复：确保每个分页的<title>和meta描述是不同的。
可访问性：为分页导航添加适当的ARIA属性：

<nav class="pagination-nav" aria-label="<?php esc_attr_e( '文章导航', 'my-first-theme' ); ?>">
    <!-- 分页内容 -->
</nav>

测试你的分页功能

现在可以测试分页功能了：

确保你的网站有超过10篇文章（可以在"设置"→"阅读"中调整每页显示数量）
访问网站首页，查看底部是否显示分页导航
点击不同的页码，测试是否能正常跳转
测试上一页/下一页功能
在移动设备上检查响应式效果

总结：选择合适的分页方案

今天我们学习了三种实现分页的方法：

简单上一页/下一页：适合文章量不大的博客
自定义数字分页：适合需要完全控制样式的场景
WordPress内置函数：最推荐的方法，简单且符合标准

对于大多数主题，我建议使用the_posts_pagination()函数，因为它：

自动处理所有复杂逻辑
生成符合无障碍访问标准的HTML
提供适当的SEO标记
易于自定义样式

现在你的主题已经具备了完整的内容展示能力。在下一篇文章中，我们将学习如何创建自定义页面模板，比如联系页面、产品展示页面等特殊布局的页面。

为WordPress主题添加文章分页功能：提升多文章浏览体验

为什么需要分页？不仅仅是美观问题

理解WordPress的分页机制

方法一：使用简单的上一页/下一页链接

方法二：使用数字分页导航

方法三：使用WordPress内置的the_posts_pagination()函数

为分页添加CSS样式

处理特殊情况的分页

分页的SEO最佳实践

测试你的分页功能

总结：选择合适的分页方案

扫码分享

社交平台

打赏作者

相关阅读

评论框

评论列表

搜索

热门搜索

登录账号

注册账号

找回账号