WordPress基于Bootstrap的分页

因为要用Bootstrap的分页,所以这个功能要自己写代码实现,不能用原有的函数。

与网络上搜索到的常规分页代码不太一样。

那些方法都是判断了所有情况,然后根据情况输出,看着太头疼。

我的这个方案是根据当前页码计算循环输出的起始和结束,然后在某些特殊情况进行补位和减位。

我的这个方案是计算当前页码应该显示多少个,然后基于当前页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?php
// --------------------------------分页功能--------------------------------

// 每页显示数量,当前页码
global $wp_query, $posts_per_page, $paged;

// 总页数
$max_page = $wp_query->max_num_pages;

//处理第一页默认值为0的问题
$paged = empty($paged) ? 1 : $paged;

// 非单页 && 总页数大于1页
if(!is_singular() && $max_page > 1){

// 显示的页码范围(不算当前页和上下页,最多显示这么多,要求是双数且整数)
$range = 6;

// 页码起始和长度
$page_start = $paged - ($range/2);
$page_end = $paged + ($range/2);
if($max_page > $range) {
// 总页数大于范围

// 取左侧显示不了的位数
$tl = $paged - (($range/2)+1);
if ($tl < 0) {
// echo '需要左减右补';
// L -
// R +
$page_start = $page_start + abs($tl);
$page_end = $page_end + abs($tl);
}

// 取右侧显示不的位数
$tr = $max_page - $paged - 3;
if ($tr < 0) {
// echo '需要右减左补';
// L +
// R -
$page_start = $page_start - abs($tr);
$page_end = $page_end - abs($tr);
}

$page_start = $page_start + 1;
$page_end = $page_end - 1;
} else {
// 总页数在范围内
$page_start = 2;
$page_end = ($max_page-1);
}
?>
<div class="row">
<div class="col-md-12 text-center">
<nav id="pagination" aria-label="Page navigation">
<ul class="pagination">
<?php
if($paged == 1){
// Prev
echo '<li class="disabled"><span data-toggle="tooltip" data-placement="top" title="上一页" aria-label="Previous" aria-hidden="true"><i class="fa fa-chevron-left"></i> Prev</span></li>';
// First
echo '<li class="active"><span data-toggle="tooltip" data-placement="top" title="第1页">First</span></li>';
} else {
// Prev
echo '<li>';
echo ' <a id="btn-prev" data-toggle="tooltip" data-placement="top" title="上一页" href="'.get_pagenum_link($paged-1).'" aria-label="Previous">';
echo ' <span aria-hidden="true"><i class="fa fa-chevron-left"></i> Prev</span>';
echo ' </a>';
echo '</li>';
// First
echo '<li><a data-toggle="tooltip" data-placement="top" title="第1页" href="'.get_pagenum_link(1).'">First</a></li>';
}

// 2, 3, 4 ... n
for($i = $page_start; $i <= $page_end; $i++) {
if ($i == $paged) {
echo '<li class="active"><span data-toggle="tooltip" data-placement="top" title="第'.$i.'页">'.$i.'</span></li>';
} else {
echo '<li><a data-toggle="tooltip" data-placement="top" title="第'.$i.'页" href="'.get_pagenum_link($i).'">'.$i.'</a></li>';
}
}

// Last & Next
if($paged == $max_page){
// Last
echo '<li class="active"><span data-toggle="tooltip" data-placement="top" title="第'.$max_page.'页">Last</span></li>';
// Next
echo '<li class="disabled"><span data-toggle="tooltip" data-placement="top" title="下一页" aria-label="Next" aria-hidden="true">Next <i class="fa fa-chevron-right"></i></span></li>';
} else {
// Last
echo '<li><a data-toggle="tooltip" data-placement="top" title="第'.$max_page.'页" href="'.get_pagenum_link($max_page).'">Last</a></li>';
// Next
echo '<li>';
echo ' <a id="btn-next" data-toggle="tooltip" data-placement="top" title="下一页" href="'.get_pagenum_link($paged+1).'" aria-label="Next">';
echo ' <span aria-hidden="true">Next <i class="fa fa-chevron-right"></i></span>';
echo ' </a>';
echo '</li>';
}
?>
</ul>
</nav>
</div>
</div>
<?php
}

在index.php中合适的位置引用

1
2
<!--分页-->
<?php get_template_part( 'template/pagination'); ?>
分享到