Willin大师前几天就捣鼓出了《Mini Pagenavi》,与之前《实现 WordPress 分页导航》内代码一比较,还真迷你不少,我喜欢!

nav.jpg

为配合《WordPress 原生评论分页导航》的函数,对两者样式做了个统一定义:

.pagenavi{text-align:center;margin:1em 0 1.5em;}
 
.page-numbers{border-bottom:5px solid #ccc;padding:5px 8px 4px;margin:0 5px;}
 
.page-numbers:hover,.current{color:#000;border-bottom:5px solid #000;}

对Willin的Mini版动了几处的class名称,使CSS定义更统一:

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
 
function pagenavi( $p = 2 ) {
 
if ( is_singular() ) return;
 
global $wp_query, $paged;
 
$max_page = $wp_query->max_num_pages;
 
if ( $max_page == 1 ) return;
 
if ( empty( $paged ) ) $paged = 1;
 
echo '<span class="page-numbers">' . $paged . ' / ' . $max_page . ' </span> '; //原为class="pages"
 
if ( $paged > $p + 1 ) p_link( 1, '最前页' );
 
if ( $paged > $p + 2 ) echo '<span class="page-numbers">...</span>';//原为echo '...'
 
for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
 
if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
 
}
 
if ( $paged < $max_page - $p - 1 ) echo '<span class="page-numbers">...</span>'; //原为echo '...'
 
if ( $paged < $max_page - $p ) p_link( $max_page, '最末页' );
 
}
 
function p_link( $i, $title = '' ) {
 
if ( $title == '' ) $title = "第 {$i} 页";
 
echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
 
}

调用代码为:

 
<div class="pagenavi"><?php pagenavi(); ?></div>

当然如果你有用评论分页函数,把调用代码改为:

<div class="pagenavi"><?php paginate_comments_links('prev_text=上一页&next_text=下一页');?></div>

这样一来,三行CSS搞定文章列表分页和评论分页导航样式!