WordPress4.1 之前的默认主题已经内置分页函数，WordPress4.1 之后，分页导航函数成为 WordPress 的内置默认函数。
WordPress 的默认内置分页导航函数为 the_posts_pagination() 。
在 WordPress 首页 （index.php） 和存档页面 （archives.php） 中替换原来的 older posts 代码为：
<?php
the_posts_pagination( array(
『mid_size』 => 8,
『prev_text』 => 上页,
『next_text』 => 下页,
『before_page_number』 => 『<span class=「meta-nav screen-reader-text」> 第 </span>』,
『after_page_number』 => 『<span class=「meta-nav screen-reader-text」> 页</span>』,
) );
?>
mid_size 指的是当前页码的左右两边要显示多少个页码。
上图所示的即 mid_size 设置为 9 的时候的显示效果。
如需定制分页导航的显示效果，在 WordPress 主题文件的 style.css 中写入相应的 css 代码即可。
@media screen and (min-width: 550px) {
.pagination {
float: right;
}
.pagination a, .pagination a:visited {
float: left;
background: #fff;
margin: 0 5px 10px 0;
padding: 8px 11px;
line-height: 100%;
border: 1px solid #ebebeb;
border-radius: 2px;
}
.pagination .current, .pagination .dots {
background: #fff;
float: left;
margin: 0 5px 0 0;
padding: 8px 11px;
line-height: 100%;
border: 1px solid #ebebeb;
border-radius: 2px;
}
.pagination span.pages {}
.pagination span.current, .pagination a:hover {
background: #0088cc;
color: #fff;
border: 1px solid #0088cc;
}
.screen-reader-text, .pages {
display: none;
}
}
@media screen and (max-width: 550px) {
.pagination {
background: #fff;
border: 1px solid #ebebeb;
border-radius: 2px;
}
.pagination .nav-links {
min-height: 30px;
position: relative;
text-align: center;
}
.pagination .current .screen-reader-text {
position: static !important;
}
.screen-reader-text {
height: 1px;
overflow: hidden;
position: absolute !important;
}
.page-numbers {
display: none;
line-height: 25px;
padding: 5px;
}
.pagination .page-numbers.current {
text-transform: uppercase;
}
.pagination .current {
display: inline–block;
}
.pagination .prev,
.pagination .next {
background: #0088cc;
color: #fff;
display: inline–block;
height: 29px;
line-height: 29px;
overflow: hidden;
padding: 2px 8px;
position: absolute;
border: 1px solid #0088cc;
}
.pagination .next {
border-radius: 0 2px 2px 0
}
.pagination .prev {
border-radius: 2px 0 0 2px;
}
.pagination .prev a,
.pagination .next a{
color: #fff;
line-height: 20px;
padding: 0;
display: inline–block;
}
.pagination .prev {
left: 0;
}
.pagination .prev:before {
left: –1px;
}
.pagination .next {
right: 0;
}
.pagination .next:before {
right: –1px;
}
}
如果你的主题是非响应式，去掉上面 css 代码中的媒体查询判断 @media screen and……