为WordPress 博客添加分页功能

参考:脱离插件,实现WordPress主题分页功能

一直觉得WordPress 默认的Older Entries 不太友善,想改成分页功能,google 的分页的插件,wp-pagenavi 还是比较流行,安装之后发现主页响应非常慢,过了十多分钟还是以没有分页的方式显示出来了,感觉可能是主题与插件的兼容性,更可能是之前修改了页面的布局,wp-pagenavi 插件与我修改的布局不太兼容,于是参考了网上的一些方法,自己添加了一些分页的功能。再次提醒广大站长:要么不要对源WP 或者主题进行修改,一旦修改了以后都要做好自己动手改代码的觉悟。

添加分页分为三部分:

  1. function.php  中添加分页函数
  2. index.php 里替换原来的页面导航代码
  3. 修改css 文件

1. 函数模板添加分页函数

对原来代码做了两点修改,$range 是页码显示范围,默认值2 太小了,其次在显示“第一页”有些问题,我改成了只要第一页在页码导航中看不见了就显示出来

 1: /**
 2: *
 3: *以下是添加的分页代码
 4: *
 5: *
 6: **/
 7: function kriesi_pagination($query_string){
 8: global $posts_per_page, $paged;
 9: $my_query = new WP_Query($query_string ."&posts_per_page=-1");
 10: $total_posts = $my_query->post_count;
 11: if(empty($paged))$paged = 1;
 12: $prev = $paged - 1;
 13: $next = $paged + 1;
 14: $range = 5; // only edit this if you want to show more page-links 
 15: $showitems = ($range * 2)+1;
 16:
 17: $pages = ceil($total_posts/$posts_per_page);
 18: if(1!= $pages){
 19: echo "<div class='pagination'>";
 20: echo ($paged > range+2)? "<a href='".get_pagenum_link(1)."'>第一页</a>":"";
 21: //原来是下面的代码,我改成上面的代码,只要看不到第一页了就会显示最前
 22: //echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":""; 
 23: echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";
 24:
 25: for ($i=1; $i <= $pages; $i++){
 26: if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
 27: echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
 28: }
 29: }
 30:
 31: echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
 32: echo ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后一页</a>":"";
 33: echo "</div>\n";
 34: }
 35: }

 

2. 替换导航代码

用新的页面导航代码替换原来index.php (可能因为主题而不同)中的导航代码

 1: <?php
 2: /**
 3: *
 4: *这里是我自己的分页代码
 5: *另外在fuction。php和css 中添加了相应代码
 6: **/
 7: kriesi_pagination($query_string); ?>
 8:
 9: <?php
 10: /**
 11: *这里是原来的导航代码
 12: *twentyeleven_content_nav( 'nav-below' );
 13: **/
 14: ?>

后面为了在搜索结果也能够显示和主页一致的结果,在search.php 也做了修改。

3. 修改CSS

添加以下代码到style.css 中:

 1: /**
 2: *
 3: *这里是分页的css
 4: **/
 5: .pagination{
 6: line-height: 30px;  /*页面导航所占高度*/
 7: }
 8: .pagination span, .pagination a{
 9: font-size:12px;
 10: margin: 2px 6px 2px 0;   /*方格与方格之间padding*/
 11: background:#fff; 
 12: border:1px solid #e5e5e5; 
 13: color:#787878; 
 14: padding:3px 8px 3px 8px;   /*小方格内数字与四边的padding*/
 15: text-decoration:none;
 16: }
 17: .pagination a:hover{
 18: background: #8391A7; 
 19: border:1px solid #fff; 
 20: color:#fff; 
 21: }
 22: .pagination .current{
 23: background: #fff; 
 24: border:1px solid #8d8d8d; 
 25: color:#393939; 
 26: font-size:12px;
 27: padding:2px 5px 2px 5px;
 28: }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据