WordPress列表上下页数字分页导航代码

在我们的主题中要实现WordPress分页导航有很多种方法，相关的WordPress分页导航插件有很多，

但是今天wordpress教程网分享的这段WordPress上一页下一页代码是集成到主题当中，不需要用插件来实现的WordPress分页导航功能，更加简洁美观。

效果展示

WordPress列表上下页数字分页导航代码使用方法

在主题的functions.php文件添加下面代码

function fenye(){
$args = array(
'prev_next'          => 0,
'format'       => '?paged=%#%',
'before_page_number' => '',
'mid_size'           => 2,
'current' => max( 1, get_query_var('paged') ),
'prev_next'    => True,
'prev_text'    => __('上一页'),
'next_text'    => __('下一页'),
);
$page_arr=paginate_links($args);
if ($page_arr) {
echo $page_arr;
}else{
}
}

在需要用到分页功能的页面调用以下代码

<?php fenye(); ?>

模板分页样式

<div class="fenye uk-margin-large-top uk-margin-large-bottom">
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="http://www.78moban.cn/plugin/?paged=2">2</a>
<a class="next page-numbers" href="http://www.78moban.cn/plugin/?paged=2">下一页</a>				 
</div>

css美化样式

/*
* ------------------------------------------------------------------------------
* 分页样式
* ------------------------------------------------------------------------------
*/

.fenye span {
	transition: all .3s;
}

.fenye a {
	border: 1px solid #eee;
	color: #888;
}

.fenye .page-numbers {
	background: #fff;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 4px;
	margin-right: 5px;
	box-shadow: 0 5px 10px -5px #e0e8f3;
}

.fenye .page-numbers:hover {
	background: #2c63ff;
	color: #fff
}

.fenye .current {
	background: #2c63ff;
	color: #fff;
	box-shadow: 0px 5px 10px -5px #2c63ff;
}

.crumb a {
	color: #222
}

效果图上的样式是本站分页样式，也许并不适合其他的站点，可以根据自己喜欢的样式来写，这里就不做分享了。