不靠插件实现Wordpress的分页

Yxhds YW| 2013-07-10 WordPress, 教程, , 评论数( 0 )

很奇怪为什么Wordpress没有提供一个默认支持分页的功能,难到是因为觉得实现起来太简单,所以就留给用户自己去做了?不过话说回来,自己来实现一个分页确实不算件难事,完全可以抛弃那些插件,自己动手,丰衣足食嘛。下面我就来教用户如何来自己实现一个wordpress的分页功能。

首先说明我们要实现的页面效果:

  • 当只有一页时,不显示分页。
  • 当总页数小于等于给定变量$range时。显示1到总页码数。
  • 当总页数大于给定变量$range时,只当前页码左右$range/2长度的页码。

举个例子更容易说明,当$range为4时,显示效果如下:

page

首先在主题的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; } 你也可以根据你的风格配置自己喜欢的样式。不多说了,剩下的就留给您了。^_^

聚焦云计算,扫描二维码,关注HostUCan云计算

有好的文章希望站长之间帮助分享推广,猛戳这里我要投稿

您需要登录后才可以评论登录|注冊

暂无评论