调用 WordPress 4.1 内置分页式导航

知更鸟
知更鸟
站长
2452
文章
0
粉丝
WordPress3114,257阅读模式

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

调用 WordPress 4.1 内置分页式导航-图片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等模板适当的位置即可，再配以相应的样式，可实现响应式转换，如图：

调用 WordPress 4.1 内置分页式导航-图片2

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

 

展开样式代码
展开收缩

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

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

小驼16让小米直接升级到17
正确配置WordPress调试模式
WordPress 随机文章时间
修改WordPress媒体文件的上传时间和路径
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • WordPress
  • Wordpress教程
  • WordPress主题
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  31  访客  26  作者  3
    • 大谋士网
      大谋士网 3
      1F
      回复

      支持一下鸟哥！主题不错，持续关注中！

      • 艾博
        艾博 2
        2F
        回复

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

        • 小二苘
          小二苘 2
          3F
          回复

          新主题点赞

          • 禾子网居
            禾子网居 2
            4F
            回复

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

            • 消灭星星
              消灭星星 3
              5F
              回复

              我觉得写的挺好的

              • 米松
                米松 0
                6F
                回复

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

                • 花开花落
                  花开花落 1
                  7F
                  回复

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

                  • 理财渠道
                    理财渠道 1
                    8F
                    回复

                    这个功能有点炫酷。

                    • 散文精选
                      散文精选 5
                      9F
                      回复

                      新版不错 支持！

                      • aunsen
                        aunsen 5
                        10F
                        回复

                        文章分页也用这个调用吗

                          • 知更鸟
                            知更鸟
                            B1
                            回复

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

                          • 搬瓦工
                            搬瓦工 0
                            11F
                            回复

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

                            • 问问律师网
                              问问律师网 0
                              12F
                              回复

                              不错

                              • 同盟源
                                同盟源 3
                                13F
                                回复

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

                                • 散文精选
                                  散文精选 5
                                  14F
                                  回复

                                  很漂亮的方法

                                  • 八爪印
                                    八爪印 4
                                    15F
                                    回复

                                    测试

                                    • tonjay
                                      tonjay 1
                                      16F
                                      回复

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

                                        • 知更鸟
                                          知更鸟
                                          B1
                                          回复

                                          @ tonjay 用 display: none; 隐藏

                                            • Nine
                                              Nine 0
                                              B2
                                              回复

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

                                          • sinsky
                                            sinsky 1
                                            17F
                                            回复

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

                                            • alalala
                                              alalala 0
                                              18F
                                              回复

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

                                              • BOKE123
                                                BOKE123 5
                                                19F
                                                回复

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

                                                • 111
                                                  111 0
                                                  20F
                                                  回复

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

                                                  • ebichu
                                                    ebichu 0
                                                    21F
                                                    回复

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

                                                    • 哈哈
                                                      哈哈 0
                                                      22F
                                                      回复

                                                      啊哈哈哈哈哈哈哈哈哈哈

                                                      • Win7en乐园
                                                        Win7en乐园 7
                                                        23F
                                                        回复

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

                                                        • 大道至简
                                                          大道至简 2
                                                          24F
                                                          回复

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

                                                          • 白止。。
                                                            白止。。 0
                                                            25F
                                                            回复

                                                            不起作用，啥都没有显示

                                                          匿名

                                                          发表评论

                                                          匿名网友

                                                          拖动滑块以完成验证