wordpress的强大众所周知，然而wordpress4.1版的发布已有些时日，现目前最新版已是4.2.4版了。
每一次版本的升级不例外就是新增了更多的功能，然而其中的分页式导航非常受用，那么此前第三方的插件及分页代码则不再需要。

话不多说，言归正传。本文所要记录的就是wordpress内置分页式导航调用函数的方法如下：

分页式导航调用函数：

1. <?php
2.     the_posts_pagination( array(
3.         'prev_text'          =>上页,
4.         'next_text'          =>下页,
5.         'before_page_number' => '<span class="meta-nav screen-reader-text">第 </span>',
6.         'after_page_number' => '<span class="meta-nav screen-reader-text"> 页</span>',
7.     ) );
8. ?>

需要注意的是方法不支持低于wordpress4.1以下的其他版本。

将如上代码添加到主题index、archive等页面适当的位置即可，再配以相应的样式，可实现响应式转换，如图：

上一横排为PC网页效果，下横排为手机平板其他客户端效果。

样式代码

1. /** 等于或大于550px正常模式 **/
2. @media screen and (min-width: 550px) {
3.     .pagination {
4.         float: right;
5.     }
6.     .pagination a, .pagination a:visited {
7.         float: left;
8.         background: #fff;
9.         margin: 0 5px 10px 0;
10.         padding: 8px 11px;
11.         line-height: 100%;
12.         border: 1px solid #ebebeb;
13.         border-radius: 2px;
14.     }
15.     .pagination .current, .pagination .dots {
16.         background: #fff;
17.         float: left;
18.         margin: 0 5px 0 0;
19.         padding: 8px 11px;
20.         line-height: 100%;
21.         border: 1px solid #ebebeb;
22.         border-radius: 2px;
23.     }
24.     .pagination span.pages {}
25.     .pagination span.current, .pagination a:hover {
26.         background: #0088cc;
27.         color: #fff;
28.         border: 1px solid #0088cc;
29.     }
30.     .screen-reader-text, .pages  {
31.         display: none;
32.     }
33. }
34. /** 等于或小于550px用于移动设备 **/
35. @media screen and (max-width: 550px) {
36.     .pagination {
37.         background: #fff;
38.         border: 1px solid #ebebeb;
39.         border-radius: 2px;
40.     }
41.     .pagination .nav-links {
42.         min-height: 30px;
43.         position: relative;
44.         text-align: center;
45.     }
46.     .pagination .current .screen-reader-text {
47.         position: static !important;
48.     }
49.     .screen-reader-text {
50.         height: 1px;
51.         overflow: hidden;
52.         position: absolute !important;
53.     }
54.     .page-numbers {
55.         display: none;
56.         line-height: 25px;
57.         padding: 5px;
58.     }
59.     .pagination .page-numbers.current {
60.         text-transform: uppercase;
61.     }
62.     .pagination .current {
63.         display: inline-block;
64.     }
65.     .pagination .prev,
66.     .pagination .next {
67.         background: #0088cc;
68.         color: #fff;
69.         display: inline-block;
70.         height: 29px;
71.         line-height: 29px;
72.         overflow: hidden;
73.         padding: 2px 8px;
74.         position: absolute;
75.         border: 1px solid #0088cc;
76.     }
77.     .pagination .next {
78.         border-radius: 0 2px 2px 0
79.     }
80.     .pagination .prev {
81.         border-radius: 2px 0 0 2px;
82.     }
83.     .pagination .prev a,
84.     .pagination .next a{
85.         color: #fff;
86.         line-height: 20px;
87.         padding: 0;
88.         display: inline-block;
89.     }
90.     .pagination .prev {
91.         left: 0;
92.     }
93.     .pagination .prev:before {
94.         left: -1px;
95.     }
96.     .pagination .next {
97.         right: 0;
98.     }
99.     .pagination .next:before {
100.         right: -1px;
101.     }
102. }

如果你的主题非响应式只添加正常模式的样式就可以（去掉媒体查询判断@media screen and ），具体效果看技术分享底部分页导航。