7折
减价出售
¥799
WordPress自定义分页实现全攻略
一、基础分页方法
1. 使用paginate_links()函数
function custom_pagination() {
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,
'type' => 'list',
'prev_text' => __('« 上一页'),
'next_text' => __('下一页 »')
) );
}2. 在模板中使用
<div class="pagination">
<?php custom_pagination(); ?>
</div>二、高级分页控制
1. 自定义查询分页
$custom_query = new WP_Query( array(
'post_type' => 'product',
'posts_per_page' => 6,
'paged' => get_query_var('paged') ? get_query_var('paged') : 1
) );
while ( $custom_query->have_posts() ) : $custom_query->the_post();
// 显示内容
endwhile;
custom_pagination_for_query( $custom_query );
wp_reset_postdata();2. 自定义查询分页函数
function custom_pagination_for_query( $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' => $query->max_num_pages,
'prev_text' => __('« 上一页'),
'next_text' => __('下一页 »')
) );
}三、AJAX分页实现
1. 基本AJAX分页
// functions.php
add_action('wp_ajax_ajax_pagination', 'ajax_pagination');
add_action('wp_ajax_nopriv_ajax_pagination', 'ajax_pagination');
function ajax_pagination() {
$paged = $_POST['page'];
$query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 6,
'paged' => $paged
) );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
get_template_part('content', get_post_format());
endwhile;
endif;
wp_reset_postdata();
die();
}2. 前端AJAX调用
jQuery(document).ready(function($) {
$('.pagination a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href').split('paged=')[1];
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'ajax_pagination',
page: page
},
success: function(response) {
$('.posts-container').html(response);
}
});
});
});四、数字分页样式
1. 数字分页函数
function numeric_pagination() {
global $wp_query;
$total_pages = $wp_query->max_num_pages;
$current_page = max(1, get_query_var('paged'));
if ($total_pages > 1) {
echo '<div class="numeric-pagination">';
// 上一页
if ($current_page > 1) {
echo '<a href="' . get_pagenum_link($current_page - 1) . '">«</a>';
}
// 页码
for ($i = 1; $i <= $total_pages; $i++) {
if ($i == $current_page) {
echo '<span class="current">' . $i . '</span>';
} else {
echo '<a href="' . get_pagenum_link($i) . '">' . $i . '</a>';
}
}
// 下一页
if ($current_page < $total_pages) {
echo '<a href="' . get_pagenum_link($current_page + 1) . '">»</a>';
}
echo '</div>';
}
}2. CSS样式
.numeric-pagination {
display: flex;
justify-content: center;
margin: 30px 0;
}
.numeric-pagination a,
.numeric-pagination span {
display: inline-block;
padding: 8px 12px;
margin: 0 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
}
.numeric-pagination a:hover {
background: #f5f5f5;
}
.numeric-pagination .current {
background: #0073aa;
color: white;
border-color: #0073aa;
}五、自定义分页参数
1. 修改分页参数
function custom_pagination_args($args) {
$args['prev_text'] = __('« 上一页');
$args['next_text'] = __('下一页 »');
$args['end_size'] = 2;
$args['mid_size'] = 3;
return $args;
}
add_filter('paginate_links_args', 'custom_pagination_args');2. 分页参数说明
| 参数 | 说明 | 默认值 |
|---|---|---|
| base | 链接基础格式 | 根据当前URL自动生成 |
| format | 页码格式 | ?page=%#% |
| total | 总页数 | 1 |
| current | 当前页码 | 1 |
| show_all | 显示所有页码 | false |
| end_size | 开始和结束显示的页码数 | 1 |
| mid_size | 当前页码两侧显示的页码数 | 2 |
| prev_next | 是否显示上一页/下一页链接 | true |
| prev_text | 上一页链接文本 | « |
| next_text | 下一页链接文本 | » |
| type | 分页类型（list/array） | plain |
六、自定义分页样式
1. Bootstrap分页样式
function bootstrap_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_next' => true,
'prev_text' => __('«'),
'next_text' => __('»'),
) );
if ( is_array( $pages ) ) {
echo '<nav aria-label="Page navigation"><ul class="pagination">';
foreach ( $pages as $page ) {
$active = strpos($page, 'current') !== false ? ' active' : '';
echo '<li class="page-item'.$active.'">'.str_replace('page-numbers', 'page-link', $page).'</li>';
}
echo '</ul></nav>';
}
}2. 使用示例
<div class="container">
<?php bootstrap_pagination(); ?>
</div>七、性能优化分页
1. 缓存分页结果
function cached_pagination($query) {
$cache_key = 'pagination_' . md5(serialize($query->query));
$output = get_transient($cache_key);
if (false === $output) {
ob_start();
custom_pagination_for_query($query);
$output = ob_get_clean();
set_transient($cache_key, $output, HOUR_IN_SECONDS);
}
echo $output;
}2. 清除分页缓存
add_action('save_post', 'clear_pagination_cache');
add_action('delete_post', 'clear_pagination_cache');
function clear_pagination_cache() {
global $wpdb;
$wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE '_transient_pagination_%'");
}通过以上方法，可以灵活实现各种WordPress分页需求，从基础分页到高级AJAX分页，从简单样式到复杂样式定制。根据wordpress主题项目需求选择合适的分页方案，并注意性能优化和缓存策略，可以升网站的用户体验和性能表现。
