WordPress 自定义分页导航实现方法

为什么需要自定义分页导航？

WordPress默认的分页样式往往与网站设计风格不匹配，且功能较为基础。通过自定义分页导航可以实现：

• 统一视觉风格与网站UI设计
• 添加额外功能（如AJAX加载）
• 优化移动端触控体验
• 提升SEO效果（避免重复内容问题）

方法一：使用paginate_links()原生函数

这是WordPress核心提供的标准方法，适合大多数主题开发场景：

global $wp_query;
$big = 999999999; // 需要一个大数字

echo 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,
    'prev_text' => __('« 上一页'),
    'next_text' => __('下一页 »'),
    'mid_size' => 2 // 当前页两侧显示的页码数
) );

参数说明：

• base：分页链接的基础URL结构
• format：页码在URL中的呈现方式
• mid_size：控制分页数字按钮的数量
• prev_next：是否显示上一页/下一页按钮

方法二：自定义WP_Query分页

当使用自定义查询时，需要单独处理分页逻辑：

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$custom_query = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 6,
    'paged' => $paged
) );

if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();
        // 循环内容
    }
    
    $total_pages = $custom_query->max_num_pages;
    if ($total_pages > 1) {
        echo '<div class="custom-pagination">';
        echo paginate_links(array(
            'base' => get_pagenum_link(1) . '%_%',
            'format' => 'page/%%',
            'current' => $paged,
            'total' => $total_pages
        ));
        echo '</div>';
    }
    wp_reset_postdata();
}

方法三：AJAX无刷新分页

提升用户体验的现代解决方案：

// functions.php中添加AJAX处理
add_action('wp_ajax_ajax_pagination', 'my_ajax_pagination');
add_action('wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination');

function my_ajax_pagination() {
    $paged = $_POST['page'];
    $query = new WP_Query( array(
        'post_type' => 'post',
        'paged' => $paged
    ));
    
    // 返回内容
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            get_template_part('content', get_post_format());
        }
    }
    wp_reset_postdata();
    die();
}

// 前端JS代码
jQuery(document).on('click', '.pagination a', function(e){
    e.preventDefault();
    var page = jQuery(this).data('page');
    
    jQuery.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'ajax_pagination',
            page: page
        },
        success: function(response) {
            jQuery('posts-container').(response);
            history.pushState(null, null, '?page='+page);
        }
    });
});

方法四：使用分页插件（高级方案）

推荐插件及其特点：

1. WP-PageNavi：最流行的分页插件，支持样式自定义
2. Advanced AJAX Page Loader：专业级AJAX分页解决方案
3. Load More Posts：无限滚动+分页按钮混合模式

SEO优化注意事项

• 确保分页链接使用rel="prev"和rel="next"属性
• 避免在分页URL中使用会话ID或无关参数
• 为第一页设置规范URL（canonical）
• 移动端分页按钮大小不小于48×48像素

样式定制技巧

通过CSS实现美观的分页样式：

.pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.pagination a, 
.pagination span.current {
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid ddd;
    border-radius: 4px;
}
.pagination a:hover {
    background: f5f5f5;
}
.pagination span.current {
    background: 2271b1;
    color: white;
    border-color: 2271b1;
}