WordPress默认翻页功能很弱,一页页翻,弄到你手麻,所以类似wp-pagenavi翻页插件,几乎是WordPress博客必装的插件,也是普及率很高的一款插件。
虽然网上有如何把wp-pagenavi插件集成到WordPress主题的教程,但wp-pagenavi插件函数代码拖沓,只是变相启用插件而已,并没有真正脱离wp-pagenavi插件。
下面有2种方法,都是用一段轻量级的函数来实现分页插件的功能。
方法一(分页显示数量无法自定义)
WordPress 现在已经自己支持 Pagenavi 功能了,首先要在 functions.php 文件中加入以下代码
/*@分页功能*/ function native_pagenavi(){ global $wp_query, $wp_rewrite; $wp_query->query_vars["paged"] > 1 ? $current = $wp_query->query_vars["paged"] : $current = 1; $pagination = array( "base" => @add_query_arg("page","%#%"), "format" => "", "total" => $wp_query->max_num_pages, "current" => $current, "prev_text" => "? ", "next_text" => " ?" ); if( $wp_rewrite->using_permalinks() ) $pagination["base"] = user_trAIlingslashit( trailingslashit( remove_query_arg("s",get_pagenum_link(1) ) ) . "page/%#%/", "paged"); if( !emptyempty($wp_query->query_vars["s"]) ) $pagination["add_args"] = array("s"=>get_query_var("s")); echo paginate_links($pagination); }
调用
在需要调用的位置插入以下代码即可实现 Pagenavi 的功能。
<div class="pagenav"><?php native_pagenavi();?></div>
分析
’base’ 参数用来提供创建页面链接的参考链接
’format’ 参数是用来替换成页码
’total’ 参数是设置页面的总数
’current’ 参数用于设置当前的页码,它们都必须是整数。这些参数我们在使用的时候必须提供的。
‘show_all’参数设置为 true 就会显示所有的页面,默认情况它是被设置为 false 的
通过 ‘end_size’ 和 ‘mid_size’ 这两个参数来控制页码显示的规则。’end_size’ 参数是用来控制在开始和结束的两端显示多少个数字,默认是 1 。’mid_size’ 参数是用来显示多少个数字显示在当前页数字的两边,并且不包括当前页。
‘prev_next’ 这个参数是用来设置是否显示上一页和下一页的页码链接,默认是 true,然后我们可以通过 ‘prev_text’ 和 ‘next_text’ 这两个参数来控制上一页和下一页的文本。
更多参考官方 <?php echo paginate_links( $args ) ?>
CSS方案一
.pagenav{ clear:both; padding-top:9px; } .pagenav span,.pagenav a{ font-size:14px; margin: 2px 6px 2px 0; background:#fff; border:1px solid #e5e5e5; color:#787878; padding:3px 8px; text-decoration:none; } .pagenav a:hover{ background: #8391A7; border:1px solid #fff; color:#fff; } .pagenav .current{ border:1px solid #8d8d8d; color:#393939 }
CSS方案二
/*@pagenav*/ .pagenav{ text-align:center; padding:1em; clear:both; } .page-numbers{ border-bottom:5px solid #ccc; padding:5px 8px 4px; margin:0 5px; } .page-numbers:hover,.pagenav .current{ color:#000; border-bottom:5px solid #000; }
方法二(可自定义分页显示数量)
functions.php中加入
function pagination($query_string){ global $posts_per_page, $paged; $my_query = new WP_Query($query_string ."&posts_per_page=-1"); $total_posts = $my_query->post_count; if(emptyempty($paged))$paged = 1; $prev = $paged - 1; $next = $paged + 1; $range = 2; // only edit this if you want to show more page-links $showitems = ($range * 2)+1;$pages = ceil($total_posts/$posts_per_page); if(1 != $pages){ echo "<div class="pagination">"; echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href="".get_pagenum_link(1)."">最前</a>":""; echo ($paged > 1 && $showitems < $pages)? "<a href="".get_pagenum_link($prev)."">上一页</a>":"";for ($i=1; $i <= $pages; $i++){ if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){ echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href="".get_pagenum_link($i)."" class="inactive" >".$i."</a>"; } }echo ($paged < $pages && $showitems < $pages) ? "<a href="".get_pagenum_link($next)."">下一页</a>" :""; echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href="".get_pagenum_link($pages)."">最后</a>":""; echo "</div>n"; } }
在需要调用分页的位置用以下代码
<?php pagination($query_string);?>
CSS方案
.pagination{ line-height:23px; } .pagination span, .pagination a{ font-size:12px; margin: 2px 6px 2px 0; background:#fff; border:1px solid #e5e5e5; color:#787878; padding:2px 5px 2px 5px; text-decoration:none; } .pagination a:hover{ background: #8391A7; border:1px solid #fff; color:#fff; } .pagination .current{ background: #fff; border:1px solid #8d8d8d; color:#393939; font-size:12px; padding:2px 5px 2px 5px; }
根据自己的主题调整CSS即可。