上篇 下篇

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

2010年03月17日 ⁄ Wordpress ⁄ 作者：知更鸟 ⁄ 共 2194字 ⁄ 评论数 58 ⁄ 被围观 31,745+

越少的使用插件，却能让使用者完全体验到主题的各项功能，才是真正好的主题，这也是所有主题设计者应考虑的问题，本站目前的新主题基本实现了零插件。网上不使用插件实现WordPress功能的文章也很多，之前我也写过WordPress相关日志函数一文，今天再补一个不使用插件实现翻页功能的函数代码。
WordPress默认翻页功能很弱，一页页翻，弄到你手麻，所以类似wp-pagenavi翻页插件，几乎是WordPress博客必装的插件，也是普及率很高的一款插件。虽然网上有如何把wp-pagenavi插件集成到WordPress主题的教程，但wp-pagenavi插件函数代码拖沓，只是变相启用插件而已，并没有真正脱离wp-pagenavi插件。下面一段轻量级的函数，加上寥寥数行css样式就可以完全替代分页插件了。

具体实现方法：

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

1. function kriesi_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 kriesi_pagination($query_string); ?>  

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

1. .pagination{   
2. line-height:23px;   
3. }   
4. .pagination span, .pagination a{   
5. font-size:12px;   
6. margin: 2px 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. }  

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

返回

作者: 知更鸟

该日志由 知更鸟 于693 天前发表在Wordpress分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 脱离插件，实现WordPress主题分页功能 | 知更鸟 +复制链接
关键字: themes, Wordpress

您可能还会对这些文章感兴趣！

1. jQuery实现侧边栏随窗口滚动
2. WordPress博客评论可见实现方法
3. 为Wordpress添加文章字数统计
4. 显示当前在线浏览人数
5. 揪出哪些插件在拖慢你的网站
6. 优化一下HotNews Pro主题SEO代码
7. 为Wordpress默认编辑器TinyMCE增加额外的按钮
8. 为WordPress编辑器设置默认内容

目前有 58 条留言 其中：访客:40 条, 博主:9 条 引用: 9

1. Jinwen : 2010年03月17日 693 天前 23:21:55  1楼 @回复 回复

   很好的教程呢，谢谢分享的。
2. 小O : 2010年03月18日 693 天前 15:11:00  2楼 @回复 回复

   主题真漂亮。
3. Elanse : 2010年03月18日 692 天前 17:57:01  3楼 @回复 回复

   请问版主 THEME 中的 Quarx 首页的大幻灯片如何添加自定义代码 我的老显示不出来 添加Image
   • 知更鸟 : 2010年03月18日 692 天前 18:46:45 @回复 回复

     主题站上说明没看懂？主题包中有添加缩略图的说明，英文如果和我一样差，看图片说明就够了，另外如果你用的空间是WIN主机，就放弃使用这款主题吧
     • 客官 : 2011年10月29日 103 天前 04:51:19 @回复 回复

       为什么添加后， 上一页下一页 最后 最前 是乱码啊。
       • 知更鸟 : 2011年10月29日 103 天前 11:45:45 @回复 回复

         是编码错误，中文模版为UTF-8,无BOM
   • 伊星晴 : 2011年11月17日 84 天前 11:28:57 @回复 回复

     这个能够在自定义模板中使用吗？我试了下，页数和链接都能出现，但是点击上一页和下一页时页面没有变化，并没有跳转到相应的页面去。。。。这是怎么回事呢
4. 8路杂讯 : 2010年03月22日 689 天前 09:20:55  4楼 @回复 回复

   请问博主：
   接下来用下面的代码替换原来模板中默认翻页代码或分页插件代码：

   这段代码在哪个文件里啊？
   • 知更鸟 : 2010年03月22日 689 天前 11:03:44 @回复 回复

     一般在archive.php index.php文件中，
     比如WP默认模板是：
     < ?php next_posts_link(__('« Older Entries', 'kubrick')) ?>
     < ?php previous_posts_link(__('Newer Entries »', 'kubrick')) ?>
     • 8路杂讯 : 2010年03月22日 689 天前 13:51:56 @回复 回复

       谢谢 找到了 我的代码是
       • 8路杂讯 : 2010年04月02日 678 天前 17:26:11 @回复 回复

         汗 原来我输入不了代码
5. leesum : 2010年03月26日 685 天前 13:59:23  5楼 @回复 回复

   这方法不错，一会去折腾下
6. Skyoy : 2010年03月28日 682 天前 22:32:18  6楼 @回复 回复

   $range = 2; 我改成5之后，在category分类里面，选择最后一页，是没有内容的，甚至选择倒数的几页，也是空白的哦。。请问怎么修改呢？ 谢谢
   • Skyoy : 2010年03月28日 682 天前 22:43:21 @回复 回复

     额 原来是判定的数值问题哦。因为我在archive.php下面是8篇，在后台阅读的是6篇。可上门的函数只调用后台默认的。
     • cutebt : 2011年06月26日 228 天前 11:04:39 @回复 回复

       用得很好。。谢谢。。
7. pazz7ven : 2010年04月14日 665 天前 18:34:26  7楼 @回复 回复

   这样做会不会拖慢速度？刚从引擎上点你的文章一直显示 在加载中
   • 知更鸟 : 2010年04月15日 665 天前 01:19:13 @回复 回复

     对我用的主题来说，没有加载任何多余的东西，所以不会影响速度
8. charger : 2010年04月24日 655 天前 22:43:33  8楼 @回复 回复

   如果单日志实现分页..怎么弄呢..请教一下..
   • 知更鸟 : 2010年04月24日 655 天前 23:12:22 @回复 回复

     又是同一个问题，编辑文章时切换到代码模式，在分页处加{!--nextpage--} ，把{}换成<>
     • charger : 2010年04月26日 654 天前 13:41:05 @回复 回复

       额.大哥..那如果我没采用你的方法..还是用插件.能不能插入nextpage标签?我试了好像不行..有没其他办法?
       • 知更鸟 : 2010年04月26日 653 天前 21:02:27 @回复 回复

         没听说日志分页还有插件，主题不支持分页插入标签也没用
9. 亿品元素 : 2010年08月30日 527 天前 22:00:06  9楼 @回复 回复

   插件是越少越好啊！
10. 百奥博 : 2010年09月09日 518 天前 01:40:45  10楼 @回复 回复

    wp折腾去掉plugin，其乐无穷
11. unnamed : 2010年12月02日 434 天前 09:46:40  11楼 @回复 回复

    我用这个主题做了个博客，为何没有分页呢？
    我的函数是function pagination($query_string)
    在index.php这个文件中的调用是：

    为何没有效果呢？
12. poco : 2010年12月10日 426 天前 04:32:44  12楼 @回复 回复

    这个如果在单独的页面加入貌似不显示分页

    尝试了好几次都没用
13. 百佳资讯 : 2010年12月14日 422 天前 12:33:34  13楼 @回复 回复

    很好的方法呢，先收藏了
14. 土野鲜 : 2011年04月06日 309 天前 15:16:26  14楼 @回复 回复

    收藏
15. .安小轩 : 2011年04月18日 297 天前 14:38:11  15楼 @回复 回复

    这个要放在哪里吖?
16. 老衲 : 2011年05月16日 268 天前 22:16:20  16楼 @回复 回复

    用了下 效果很好
17. citier : 2011年05月26日 258 天前 21:20:50  17楼 @回复 回复

    这个刚好看过，百度又进来啦，看样子不用百度了，直接在鸟哥站里搜就的了
18. wzj890711 : 2011年06月26日 228 天前 00:52:29  18楼 @回复 回复

    博主好，最近更新了你的HotNews pro2.5主题，貌似2.5的主题已经集成了这篇文章里的分页代码，但是代码显示的效果不是很好，只能显示前几页的页码（1~7），超过7的页码都要点击“下一页”才能看到，而且最大页码也不显示再首页上，看着不是很舒服。

    之前使用2.4没有这个问题，那是我还是用得wp-pagenavi分页导航插件，但是更新2.5后插件启用没反应，而且我发现你的博客分页导航和这篇文章的代码不一样啊，想问一下现在怎么在2.5的主题里去掉你这个翻页的效果还原成原来的？上面说替换的代码没有找到额。。。
    • wzj890711 : 2011年06月26日 228 天前 01:12:48 @回复 回复

      现在我把“$range = 20; // 修改数字,可以显示更多的分页链”改成了20页现在可以显示全部页数了，但是翻页插件还是用不了，求帮助~~~
19. ryan : 2011年08月24日 169 天前 17:45:26  19楼 @回复 回复

    if(emptyempty($paged))$paged = 1; 博主的这行代码，貌似只要一个empty的函数吧
20. 广州seo : 2011年09月25日 136 天前 23:29:56  20楼 @回复 回复

    代码不错，拿来用了。。不过第5行写错了。。。

    if(emptyempty($paged))$paged = 1;

    应该是

    if(empty($paged))$paged = 1;
21. Poor : 2011年09月29日 133 天前 09:53:40  21楼 @回复 回复

    请教个问题。 我弄的分页点击页码以后上面的URL看到的是已经转过去了。 但是页面的内容还是第一页的。 也就是说始终显示第一页的内容？ 这个怎么解决？ 望指教。
22. Poor : 2011年09月29日 133 天前 09:54:04  22楼 @回复 回复

    用你的这个代码页是一样。
23. toptpe : 2011年10月02日 129 天前 17:57:01  23楼 @回复 回复

    请问代码添加在style。css的哪个位置啊？我是超级菜鸟啊！
    • 知更鸟 : 2011年10月03日 129 天前 10:49:14 @回复 回复

      加到最后
      • toptpe : 2011年10月04日 128 天前 11:45:17 @回复 回复

        呵呵，感谢的五体投地，以后在CSS，我都知道加到最后了啊
24. toptpe : 2011年10月02日 129 天前 19:52:26  24楼 @回复 回复

    直接复制代码，前面怎么还带着123456789等数字呢
    • 知更鸟 : 2011年10月03日 129 天前 10:49:56 @回复 回复

      换用其它非IE核心浏览器复制
      • toptpe : 2011年10月04日 128 天前 11:44:30 @回复 回复

        呵呵，确实是这样的！
25. toptpe : 2011年10月02日 129 天前 20:06:05  25楼 @回复 回复

    1.function kriesi_pagination($query_string){
    这段代码放在FUNCTION.PHP的哪个位置啊？原谅我是超级菜鸟啊
    • 知更鸟 : 2011年10月03日 129 天前 10:50:57 @回复 回复

      加到functions中最后一个“?>”上面
      • toptpe : 2011年10月04日 128 天前 11:44:11 @回复 回复

        感谢鸟哥仔细的解答，搞定了！
26. 25lw : 2011年10月14日 117 天前 21:45:17  26楼 @回复 回复

    老大我的按照您的方法加上了
    但是翻页好像不能用
    只能实现翻页一次
    第二次就无法翻页了，一直停留在第一次翻页后的页面
    求解答啊
    或者方法发到我邮箱
    在此表示感谢了……
27. 猪猪侠 : 2011年10月28日 103 天前 21:43:20  27楼 @回复 回复

    鸟哥，能不能实现 分页标题 呀！ 这样对优化好点呀！
28. kay : 2012年01月07日 33 天前 10:11:40  28楼 @回复 回复

    这个方法很不错
29. lemon : 2012年02月03日 6 天前 17:18:09  29楼 @回复 回复

    鸟哥，我的代码是这样该替换哪里啊？
    max_num_pages;
    if ( $total_pages > 1 ) {
    echo '';
    posts_nav_link(' | ', __('« Previous page','zbench'), __('Next page »','zbench'));
    echo '';
    }
    }
    ?>