当前位置:园子博客 » Wordpress » WordPress 不用插件实现翻页功能

WordPress 不用插件实现翻页功能

1月 27th, 2011 | Filed under Wordpress | 共有6,383次浏览

很多使用 wordpress 的博友都是通过 PageNavi 插件来实现的翻页功能,如果你不想用插件,可以通过添加代码的方法实现。网上流传很广的是 willin 大师的 Mini Pagenavi,园子使用的是 zwwooooo 提供的修改版,原文请点击这里

之所以我要使用代码来替换插件,主要原因是今天在后台查看插件时,发现目前使用的插件已经多达了20个,通过精简优化,争取把插件压缩到10个左右。毕竟插件多的话多少会影响到博客的访问速度的。

WordPress 不用插件实现翻页的方法

1.把以下代码添加到你主题的 functions.php 文件里面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Mini Pagenavi v1.0 by Willin Kan. Edit by zwwooooo */
if ( !function_exists('pagenavi') ) {
	function pagenavi( $p = 5 ) { // 取当前页前后各 2 页
		if ( is_singular() ) return; // 文章与插页不用
		global $wp_query, $paged;
		$max_page = $wp_query->max_num_pages;
		if ( $max_page == 1 ) return; // 只有一页不用
		if ( empty( $paged ) ) $paged = 1;
		echo '<span class="pages">Page: ' . $paged . ' of ' . $max_page . ' </span> '; // 显示页数
		if ( $paged > 1 ) p_link( $paged - 1, '上一页', '« Previous' );/* 如果当前页大于1就显示上一页链接 */
		if ( $paged > $p + 1 ) p_link( 1, '最前页' );
		if ( $paged > $p + 2 ) echo '... ';
		for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // 中间页
			if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
		}
		if ( $paged < $max_page - $p - 1 ) echo '... ';
		if ( $paged < $max_page - $p ) p_link( $max_page, '最后页' );
		if ( $paged < $max_page ) p_link( $paged + 1,'下一页', 'Next »' );/* 如果当前页不是最后一页显示下一页链接 */
	}
	function p_link( $i, $title = '', $linktype = '' ) {
		if ( $title == '' ) $title = "第 {$i} 页";
		if ( $linktype == '' ) { $linktext = $i; } else { $linktext = $linktype; }
		echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$linktext}</a> ";
	}
}
// -- END ----------------------------------------

2.在出现翻页功能的地方插入以下代码:

1
<?php if (function_exists('pagenavi')) { pagenavi(); } ?>

如果你要问哪些页面需要插入,一般是 index.php、home.php、archive.php 这样的页面中。园子是添加在 index.php和archive.php文件中以下代码的前面:

1
<?php get_footer(); ?>

3.把以下样式添加到你主题的 style.css 文件中:

1
2
3
4
.page-numbers{line-height:16px;margin:0;padding:3px 5px;text-decoration:none;background:#fff;border-top:2px solid #fff;}
.page-numbers:hover{border-top:2px solid #ff00a4;}
.current,.current:hover{color:#fff;background:#45b9f6;border-top:2px solid #45b9f6;}
.current:hover{border-top:2px solid #00679d;}

上面的样式是 zwwooooo 提供的,园子修改过的样式为:

1
2
3
4
.page-numbers{line-height:16px;margin:0;padding:3px 5px;text-decoration:none;background:#fff;border-top:2px solid #fff;}
.page-numbers:hover{border-top:2px solid #225588;}
.current,.current:hover{color:#333;background:#F1F5F6;border-top:2px solid #333333;}
.current:hover{border-top:2px solid #225588;}

4.停用 WP-PageNavi 翻页插件即可。看看最终实现的翻页导航样式吧:

园子博客翻页导航样式

园子博客翻页导航样式

通过这些代码又让我少用了一个插件,呵呵。

  1. 淘客
    11月 20th, 201111:15

    我也用这个来着,哈哈

  2. 走音
    5月 25th, 201101:08

    博主你好?
    一直不明白一个问题,请问用插件和不用插件有区别吗??难道用插件不好??

    • 园子
      5月 25th, 201109:01

      @走音
      有时候插件的功能过于庞大
      会导致速度相对变慢
      而用代码可自定义一些适合自己的功能~

      • 走音
        5月 25th, 201111:56

        哦,原来这样阿,谢谢阿,
        那么,我可以问一下如何能让博文里分页和主页的一样呢?

  3. 汗管瘤的治疗方法
    5月 7th, 201100:46

    果然不错!收藏

  4. 静脉曲张袜
    5月 5th, 201114:11

    看来你们都是高手啊。

  5. 爱佳软
    3月 28th, 201119:21

    你好,我用了你的代码但是CSS样式改的不太好,能不能帮我写一段CSS呢?
    谢谢。

  6. 夜明
    3月 3rd, 201117:58

    不错 已经用上
    感谢提供代码 还有样式 呵呵

  7. 战歌网
    2月 1st, 201112:28

    使用代码来替换插件

  8. moper
    1月 30th, 201121:51

    这个蛮不错的……嘿嘿,转载了~
    交换个连接吧?

    • moper
      1月 30th, 201122:00

      已经加了你的:)
      你这还有蛮多我想看的文章,呵呵,恩慢慢折腾中……

  9. Louis Han
    1月 30th, 201119:21

    我还是用插件算了 省事

  10. 聊IT评论网
    1月 29th, 201101:27

    我也是用这种,我自己写的CSS美化

  11. 武林外传电影版
    1月 28th, 201122:56

    这样的翻页效果不知道对SEO有影响没

  12. 阿修罗
    1月 28th, 201116:19

    信心点灯博客的阿修罗来看博主了,祝博主新年快乐!

  13. 小付博客
    1月 28th, 201111:28

    我一直用得是ZBLOG

  14. Wordpress啦
    1月 28th, 201111:04

    加代码是很好的方法啊,O(∩_∩)O~,学习了

  15. 陆洲
    1月 27th, 201123:50

    以前幻想着打造一个没有插件的博客,现在是越来越懒了,有需要都是先找插件..

  16. zwwooooo
    1月 27th, 201122:45

    这个很方便又小巧

  17. 苏扬
    1月 27th, 201121:08

    囧,我的只用了两个SITEMAP插件,不怎么喜欢插件,还是喜欢跟园子这样 调用WP内置的函数,很好用!

  18. 韩国
    1月 27th, 201120:30

    有没有简单点的 复制、粘贴那种。

  19. coreldraw插件
    1月 27th, 201118:43

    这个老早就在用了,不用插件确实爽

  20. 西安SEO
    1月 27th, 201118:18

    这个没用过,,

  21. huangjun
    1月 27th, 201115:17

    还好,我后台插件用的不多。
    提前祝你春节快乐!

  22. sj01
    1月 27th, 201114:46

    这是个好方法

  23. 骨科医院
    1月 27th, 201114:10

    谢博主分享啊

  24. akasuna
    1月 27th, 201113:27

    额,我也是用的 willin 的,自己又修改了一下

  25. ifenwen
    1月 27th, 201113:23

    早已用上了

  26. dev
    1月 27th, 201110:43

    又搜你这来了 第N次了,写的文章太实用了,交换一下链接吧,你的我已经做好咯。

您必须在 登录 后才能发布评论.