脱离插件,实现WordPress主题分页功能

知更鸟
知更鸟
知更鸟
站长
2584
文章
0
粉丝
WordPress12561,050阅读模式

越少的使用插件,却能让使用者完全体验到主题的各项功能,才是真正好的主题,这也是所有主题设计者应考虑的问题,本站目前的新主题基本实现了零插件。网上不使用插件实现WordPress功能的文章也很多,之前我也写过WordPress相关日志函数一文,今天再补一个不使用插件实现翻页功能的函数代码。

WordPress默认翻页功能很弱,一页页翻,弄到你手麻,所以类似wp-pagenavi翻页插件,几乎是WordPress博客必装的插件,也是普及率很高的一款插件。

虽然网上有如何把wp-pagenavi插件集成到WordPress主题的教程,但wp-pagenavi插件函数代码拖沓,只是变相启用插件而已,并没有真正脱离wp-pagenavi插件。下面一段轻量级的函数,加上寥寥数行css样式就可以完全替代分页插件了。

具体实现方法:

首先将下面一段函数代码添加到主题的functions.php模板文件中:

  1. function pagination($query_string){   
  2. global $posts_per_page$paged;   
  3. $my_query = new WP_Query($query_string ."&posts_per_page=-1");   
  4. $total_posts = $my_query->post_count;   
  5. if(empty($paged))$paged = 1;   
  6. $prev = $paged - 1;   
  7. $next = $paged + 1;   
  8. $range = 2; // only edit this if you want to show more page-links   
  9. $showitems = ($range * 2)+1;   
  10.   
  11. $pages = ceil($total_posts/$posts_per_page);   
  12. if(1 != $pages){   
  13. echo "<div class='pagination'>";   
  14. echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";   
  15. echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";   
  16.   
  17. for ($i=1; $i <= $pages$i++){   
  18. if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){   
  19. echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";   
  20. }   
  21. }   
  22.   
  23. echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";   
  24. echo ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";   
  25. echo "</div>\n";   
  26. }   
  27. }  

接下来用下面的代码替换原来模板中默认翻页代码或分页插件代码:

  1. <?php pagination($query_string); ?>  

最后再把下面的样式代码添加到style.css中,刷新一下页面,与使用插件实现的翻页效果一样。

  1. .pagination{   
  2. line-height:23px;   
  3. }   
  4. .pagination span, .pagination a{   
  5. font-size:12px;   
  6. margin2px 6px 2px 0;   
  7. background:#fff;   
  8. border:1px solid #e5e5e5;   
  9. color:#787878;   
  10. padding:2px 5px 2px 5px;   
  11. text-decoration:none;   
  12. }   
  13. .pagination a:hover{   
  14. background#8391A7;   
  15. border:1px solid #fff;   
  16. color:#fff;   
  17. }   
  18. .pagination .current{   
  19. background#fff;   
  20. border:1px solid #8d8d8d;   
  21. color:#393939;   
  22. font-size:12px;   
  23. padding:2px 5px 2px 5px;   
  24. }  

上面的样式是我目前用的主题样式,根据不同的主题修改一下边框与背景,基本就可以了,之后删除分页插件。

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

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
评论  125  访客  98  作者  14
    • ticmy
      ticmy

      很明了很好用!

      • 缺水的孩子
        缺水的孩子

        博主很强大。。这主题做的真心很不错

        • 洪伟博客
          洪伟博客

          好东西!谢谢分享了!

          • jay
            jay

            鸟哥 请问怎么改成 发表的文章数 超过5就分页啊

            我想把它改成文章数超过5就分页

            怎么改呀?

            急求 谢了

              • 知更鸟
                知更鸟

                @ jay 后台—设置—-阅读—博客页面至多显示 5篇文章 OK

              • 淘宝刷钻
                淘宝刷钻

                很好 很强大!!!!!

                • zi
                  zi

                  本来想试试来着,看评论问题很多啊,不知道博主有没有即时更新代码呢

                  • 风语
                    风语

                    我的网站分页从第三页开始就提示说找不到页面,不知道怎么回事,网址 http://mirabbit.com

                    • 中文吧
                      中文吧

                      非常好,已解决!谢谢分享

                      • lu8010252
                        lu8010252

                        鸟哥,你好,我的显示不了最前和最后,是为什么呢。

                        如果替换这两个,连上一页下一页都没有呢,只有数字,帮忙看看,谢谢
                        我的主题是Prower4

                          • lu8010252
                            lu8010252

                            @ lu8010252 是不是需要很多日志才有最前最后呢?我现在只有10篇两页

                              • lu8010252
                                lu8010252

                                @ lu8010252 抱歉,鸟哥,已经弄好了,因为我的页数太少,谢谢了

                            • johnsonshu
                              johnsonshu

                              有一点遗憾的地方,为了取得总件数,需要把所有符合条件的数据都检索出来,效率不高

                                • machealx
                                  machealx

                                  @ johnsonshu 同意你的看法,我也是因为这个问题在网上搜索进来的,没使用之前,加载速度为:0.437秒左右,使用之后,加载速度为:0.737秒左右。可以说慢了一倍。不知道还有没有什么更效率的方法。

                                • 李梓朋
                                  李梓朋

                                  想问一下鸟哥从哪里可以学习一些HTML和DIV+CSS的知识,能推荐一下吗?谢啦!

                                    • 知更鸟
                                      知更鸟

                                      @ 李梓朋 网上教程很多的,可以先看看这个比较基础的视频教程:
                                      http://www.enet.com.cn/eschool/video/cpcss/
                                      DIV+CSS其实很简单的,多动手试试就行了
                                      另外还可以看看这篇:
                                      https://zmingcx.com/wordpress-theme-modify-tutorial.html

                                    • yallonking
                                      yallonking

                                      1、我首页底下的那4个分类的图片我要给他们指定固定图片,而不是文章里边的图片;或者直接不要显示图片最好
                                      2、我首页左上角的那个图片框只让他显示我指定的一些图片,而不是随机图片。

                                      我该怎么做?有没有什么连接文档给推荐下看看也行
                                      谢谢~

                                      • n
                                        n

                                        有没有像http://www.aiken-snap.com/snap/no-027/ 这个分页链接以 目标页 的缩略图显示的??

                                        • cc
                                          cc

                                          $my_query = new WP_Query($query_string .”&posts_per_page=-1″);
                                          数据量太大 内存会紧张
                                          要调整下取post_count的策略

                                            • 安宇雨
                                              安宇雨

                                              @ cc 这个要怎样改进啊。。我正正有这个问题。。

                                              • 安宇雨
                                                安宇雨

                                                @ cc 亲。。数据量大时。。WP_Query怎样解决呢。

                                              • rola
                                                rola

                                                大大,这个可不可以用于 长文章用 nextpage 分页后,下面导航样式呢,如果可以,该怎么设置,如果不可以,有木有可以设置的方法。。。
                                                求大大解答下啦

                                                • wild
                                                  wild

                                                  那么你这个主题里面默认翻页代码或分页插件代码是哪里呢 我对这不精通的,

                                                  • 内涵漫画系列
                                                    内涵漫画系列

                                                    谢谢分享

                                                    • 经典语录
                                                      经典语录

                                                      不知道什么原因,按你的方法不行,网站都打不开

                                                      • abc
                                                        abc

                                                        我的也是,提示错误。

                                                        • 野蛮人
                                                          野蛮人

                                                          鸟哥。换了个新主题,用这个分页代码出现一个BUG。就是在分类栏目下面总页数和在page页面下的总页数相同。然后就出现在分类栏目下点击最后一页出现404…求助。。

                                                          • 前端观察站
                                                            前端观察站

                                                            我试了,根本没用啊。怎么回事?

                                                            • hellojQuery
                                                              hellojQuery

                                                              請問$query_string這個變量怎樣來的?

                                                              • 益达
                                                                益达

                                                                嘿嘿 这个真的很好

                                                                • 滑板先生
                                                                  滑板先生

                                                                  这个插入到哪里呢???
                                                                  用的是默认的主提Twenty Twelve

                                                                  • 00
                                                                    00

                                                                    00iiii个

                                                                    • 易米代驾
                                                                      易米代驾

                                                                      正好用上!设置一次显示多页怎么办?

                                                                      • 兼职网
                                                                        兼职网

                                                                        我正在找哦,这个还没有用过

                                                                        • 百家网络博客
                                                                          百家网络博客

                                                                          这个使我网站速度慢了一倍

                                                                          • 宜居舒适家居网
                                                                            宜居舒适家居网

                                                                            还没有摸清楚,模板定制自己做但不知道怎么套进到系统里。

                                                                            • 黑山图书
                                                                              黑山图书

                                                                              感谢分享,正在寻找!

                                                                              • 凤凰飞的话
                                                                                凤凰飞的话

                                                                                根本看不懂,我也不知道从哪插入

                                                                                • solemiracle
                                                                                  solemiracle

                                                                                  分页链接是page/2 但是页面显示404啊

                                                                                  • 握兰网
                                                                                    握兰网

                                                                                    谢谢楼主分享,希望能用在我的网站上

                                                                                    • ert
                                                                                      ert

                                                                                      sdfdsf 梵蒂冈和返回

                                                                                      • tata
                                                                                        tata

                                                                                        由于需要,我在边栏的内容使用了分页,之后带来一个问题,主页面的分页和边栏的分页会一起同步翻页,例如我在边栏点第二页,主页面也会跟着翻到第二页,请问这要如何解决?

                                                                                          • 知更鸟
                                                                                            知更鸟

                                                                                            @ tata 想实现你说的功能,需要用到AJAX方面的技术,无刷新加载文章

                                                                                          • 佛系软件
                                                                                            佛系软件

                                                                                            鸟哥,能在单独的页面中添加这个吗,我那个一个页面中加了好多东西,想弄个分页

                                                                                          匿名

                                                                                          发表评论

                                                                                          匿名网友

                                                                                          拖动滑块以完成验证