很奇怪为什么Wordpress没有提供一个默认支持分页的功能,难到是因为觉得实现起来太简单,所以就留给用户自己去做了?不过话说回来,自己来实现一个分页确实不算件难事,完全可以抛弃那些插件,自己动手,丰衣足食嘛。下面我就来教用户如何来自己实现一个wordpress的分页功能。
首先说明我们要实现的页面效果:
- 当只有一页时,不显示分页。
- 当总页数小于等于给定变量$range时。显示1到总页码数。
- 当总页数大于给定变量$range时,只当前页码左右$range/2长度的页码。
举个例子更容易说明,当$range为4时,显示效果如下:
首先在主题的functions.php中加入如下代码:
/* $range 为分页部分所要显示的页码数。*/
function par_pagenavi($range = 10){
global $paged, $wp_query;
if(!$max_page) {
$max_page = $wp_query->max_num_pages;
}
// 只有一页,不需要分页 if($max_page <= 1) { return; }
echo '<div id="my-pager" >';
if(!$paged) {$paged = 1;}
// 不是首页时,显示一个返回首页的链接 if($paged != 1){ echo '<a href="' . get_pagenum_link(1) . '" class="first_page" title="跳转到首页">返回首页</a>'; }
previous_posts_link('上一页');
if($max_page <= $range){ // 总页数小于要显示的页数。 for($i = 1; $i <= $max_page; $i++){ if($i!= $paged) { echo '<a href="' . get_pagenum_link($i) .'"'; echo '>' . $i . '</a>'; } else { echo '<span>' . $i . '</span>'; } } } else { // 当总页数大于给定变量$range时 if($paged < $range){ // 起始页面为第一页时 for($i = 1; $i <= ($range + 1); $i++) { if($i!= $paged) { echo '<a href="' . get_pagenum_link($i) .'"'; echo '>' . $i . '</a>'; } else { echo '<span>' . $i . '</span>'; } } } elseif ($paged >= ($max_page - ceil(($range/2)))) { // 起始页面不为第一页时,且当前页面后有足够的页面数显示$range/2长度的分页 for($i = $max_page - $range; $i <= $max_page; $i++){ if($i!= $paged) { echo '<a href="' . get_pagenum_link($i) .'"'; echo '>' . $i . '</a>'; } else { echo '<span>' . $i . '</span>'; } } } elseif ($paged >= $range && $paged < ($max_page - ceil(($range/2)))){ for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++) { if($i!= $paged) { echo '<a href="' . get_pagenum_link($i) .'"'; echo '>' . $i . '</a>'; } else { echo '<span>' . $i . '</span>'; } } } } next_posts_link('下一页');
// 不是最后一页时,显示一个跳转到最后一页的链接 if($paged != $max_page){ echo '<a href="' . get_pagenum_link($max_page) . '" class="last_page" title="跳转到最后一页">最后一页</a>'; }
echo '</div>'; } 因为已经在代码里写好了注释,就不再对代码解释了。
之后在要显示分页的地方,加入如下代码即可:
par_pagenavi();
当然,如果要达到上面的图片中的显示效果,可能还需要加些css。
#my-pager {
display: block;
overflow: hidden;
text-align: center;
margin: 6px 0;
}
#my-pager a, #my-pager span { display: inline-block; min-width: 14px; height: 20px; border: 1px solid #CCC; margin: 0 3px; padding: 0 3px; line-height: 20px; text-decoration: none; color: #333; }
#my-pager a:hover { background: #CCC; }
#my-pager span { background: #888; border: 1px solid #888; color: white; } 你也可以根据你的风格配置自己喜欢的样式。不多说了,剩下的就留给您了。^_^