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