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……