调用 WordPress 4.1 内置分页式导航

2015年01月21日00:06:26 31 12,762

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

调用 WordPress 4.1 内置分页式导航

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

分页式导航调用函数:

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

注:不支持WordPress 4.1之前版本

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

调用 WordPress 4.1 内置分页式导航

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

 

展开样式代码展开

  1. /**等于或大于550px正常模式 **/
  2. @mediascreenand(min-width:550px){
  3. .pagination{
  4. float: right;
  5. }
  6. .paginationa,.paginationa:visited{
  7. float:left;
  8. background:#fff;
  9. margin:05px10px0;
  10. padding:8px11px;
  11. line-height:100%;
  12. border:1pxsolid#ebebeb;
  13. border-radius:2px;
  14. }
  15. .pagination.current,.pagination.dots{
  16. background:#fff;
  17. float:left;
  18. margin:05px00;
  19. padding:8px11px;
  20. line-height:100%;
  21. border:1pxsolid#ebebeb;
  22. border-radius:2px;
  23. }
  24. .paginationspan.pages{}
  25. .paginationspan.current,.paginationa:hover{
  26. background:#0088cc;
  27. color:#fff;
  28. border:1pxsolid#0088cc;
  29. }
  30. .screen-reader-text,.pages{
  31. display:none;
  32. }
  33. }
  34. /**等于或小于550px用于移动设备 **/
  35. @mediascreenand(max-width:550px){
  36. .pagination{
  37. background:#fff;
  38. border:1pxsolid#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:2px8px;
  74. position:absolute;
  75. border:1pxsolid#0088cc;
  76. }
  77. .pagination.next{
  78. border-radius:02px2px0
  79. }
  80. .pagination.prev{
  81. border-radius:2px002px;
  82. }
  83. .pagination.preva,
  84. .pagination.nexta{
  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. }

如果你的主题非响应式只添加正常模式的样式就可以(去掉媒体查询判断@mediascreenand),具体效果看本站首页底部分页导航。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:31   其中:访客  26   博主  3   引用   2

    • 大谋士网 3

      支持一下鸟哥!主题不错,持续关注中!

      • 艾博 2

        鸟哥,貌似首页底部和导航效果图不一样哦

        • 小二苘 2

          新主题点赞

          • 禾子网居 2

            支持一下鸟哥!持续关注中!

            • 消灭星星 3

              我觉得写的挺好的

              • 米松 0

                鸟哥,能不能在这个基础上加入最前 最后一页呢 或有一个地址输入页数直接回车或点GO做页数跳转

                • 花开花落 1

                  支持鸟哥,新主题很有现代风格,简洁大气!

                  • 理财渠道 1

                    这个功能有点炫酷。

                    • 散文精选 6

                      新版不错 支持!

                      • aunsen 4

                        文章分页也用这个调用吗

                          • 知更鸟 Admin

                            @aunsen 这个只能用于文章列表页面
                            文章分页式函数一直就有

                          • 搬瓦工 0

                            这么说,那分页插件可以不要用了。

                            • 问问律师网 0

                              不错

                              • 同盟源 3

                                我也发现了,4.1新增的功能

                                • 散文精选 6

                                  很漂亮的方法

                                  • 八爪印 4

                                    测试

                                    • tonjay 1

                                      请问鸟哥,如何去除分页导航里生成的代码:
                                      Posts navigation

                                        • 知更鸟 Admin

                                          @tonjay 用 display: none; 隐藏

                                            • Nine 0

                                              @知更鸟 这么隐藏对优化好么?我不太懂,据说h1标签,这样不好吧…

                                          • sinsky 1

                                            为何不显示呢,怎么试都不显示。版本是4.1.1 。另外你的首页也看不到导航。

                                            • alalala 0

                                              代码的第97行和100行是不是多了一个right。自适应时“下页”这个按钮不靠右,删除一个right后靠右

                                              • BOKE123 5

                                                这个分页导航页码挺给力的,不错

                                                • 111 0

                                                  我想说你的网站滚动条在MAC系统上的触控板上滚动简直是反人类啊。

                                                  • ebichu 0

                                                    但是post-type自定义类型归档页里面分页无效,

                                                    • 哈哈 0

                                                      啊哈哈哈哈哈哈哈哈哈哈

                                                      • Win7en乐园 7

                                                        感觉这个相当的不错,本人强烈推荐,简直太好用了,非常的好用。

                                                        • 大道至简 2

                                                          以前用你的博客主题,不错wokla.iok.la

                                                          • 白止。。 0

                                                            不起作用,啥都没有显示

                                                          • 来自外部的引用: 2

                                                            • Begin主题常见问题 | 知更鸟
                                                            • WordPress-无插件实现分页导航 – 去吧,孩子