WordPress分页功能

来自:互联网
时间:2018-08-29
阅读:

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即可。

返回顶部
顶部