调用WordPress4.1内置分页式导航

WordPress 4.1发布已有段时日，新增加了许多功能，其中内置的分页式导航非常实用，其它第三方的分页代码及插件，已不需要。

其实在之前版本的默认主题中已内置了分页式导航，只是未集成到程序中，这次WordPress 4.1版正式集成到程序中作为默认函数使用。

分页式导航调用函数：

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. ?>

注：不支持WordPress 4.1之前版本

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

内置分页式导航效果图
上是正常样式，下是手机移动设备上的样式。

展开样式代码展开收缩

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 ），具体效果看本站首页底部分页导航。