不用插件实现 WP-PageNavi 功能(进阶版)

不用插件实现 WP-PageNavi 功能(进阶版)
Sunday, 2010 By bigCat . under codex .

上篇:« 搜狗拼音皮肤-鼹鼠家族之课堂传说 // 下篇:如何获取 Gravatars 头像的路径 »

开始本文之前请先阅读 WordPress 技巧：不用插件实现 Pagenavi 功能

接着是一坨广告：如果有企业要建站，推荐凶器 WP Jam

然后开始正文：

根据先阅读的那篇文章，教偶们如何用 wordpress 自带函数实现 pagenavi 功能
整完后输出的就是12344567的数字了

但还木有实现 pagenavi 的表现,也木有左边那坨当前页面/总页面指示数
这就是为啥要写这篇文章的原因了

pagenav的缺点：多一个外挂样式表一个http 请求是非常占速度的，可参考yslow说明书
以插件形式载入，虽然灵活，但以性能为代价

因为水煮鱼已经介绍过了，我直接就说修改的地方了，输出结果可以参考截图

第一步：在 functions.php 的 <?php 和 ?> 之间插入


function ooxx_nav(){
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;

$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => '&laquo; ',
'next_text' => ' &raquo;'
);

if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg('s',get_pagenum_link(1) ) ) . 'page/%#%/', 'paged');

if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array('s'=>get_query_var('s'));

echo '<div class="ooxx_nav"><span class="page-numbers pages">Page'.$pagination[current].' of '.$pagination[total].'</span>'.paginate_links($pagination).'</div>';
}

第二步：在 style.css 里插入


.ooxx_nav{clear:both;margin:5px -2px;overflow:hidden;zoom:1;text-align:center;}
.ooxx_nav .page-numbers:hover{background:#FF3D86;color:#FFF;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .page-numbers,
.ooxx_nav .dots:hover,
.ooxx_nav .pages:hover{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#FFF;display:inline-block;float:left;height:18px;margin:2px;min-width:28px;_width:28px;padding:1px;}
.ooxx_nav .page-numbers:visited{opacity:0.5;}
.ooxx_nav .current,
.ooxx_nav .current:hover{background:#7BAFA7;color:#FFF;font-weight:bold;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .pages,
.ooxx_nav .pages:hover{color:#CCC;width:120px;}

第三步：在需要导航的适当位置，例如index.php search.php 里插入


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

要直接用的拷贝上头代码直接用即可，听解释的继续看

第一步里 function ooxx_nav() 作用就是新建一个输出页码的函数，名字随便来，当然调用的时候要对上
这里改动不大

1. 基于语义考虑<p />标签改为<div />，当然最好改成<nav />如果你已经createElement的话，哈
2. 调用变量 $pagination 数组里的当前页和总页数组重新合成左侧那坨功能
3. 左箭头和右箭头用字符实体标示一下更规范

第二步里你可以根据自己的主题修改颜色
box-shadow 为页码数投影
border-radius 为圆角程度
-moz- firefox 私有
-webkit- chrome safari qq浏览器 maxthon 等webkit内核私有
不细说，有需求留言即可

第三步加入 function_exists() 判断 ooxx_nav() 是否存在，要是不存在也没关系
如果不加判断，天会塌下来

--update--

感谢 yun77op 找茬
'base' => @add_query_arg('page','%#%'), 应改为 'base' => @add_query_arg('paged','%#%')
少了个d,非permalinks固定连接的同学会链接失效

假装异步加载ing

订阅大猫的RSS feed,不错过一部AV~

暧昧贴

» You can leave a comment, or trackback from your own site.

上篇:« 搜狗拼音皮肤-鼹鼠家族之课堂传说 // 下篇:如何获取 Gravatars 头像的路径 »

大战 53 回合 to “不用插件实现 WP-PageNavi 功能(进阶版)”

mice says:

July 18, 2010 at 2:26 PM

我的留言呢...

Reply
bigCat:
@mice, 沙发杀无赦

Reply
mice says:

July 18, 2010 at 2:27 PM

你那个邮件提醒中的 http://caitou.com/logo.gif
貌似还是老域名噢.

5555555 我的沙发怎么没了..

Reply
bigCat:
@mice, 恩，已经更新了的，谢谢

Reply
mice says:

July 18, 2010 at 3:19 PM

还好沙发又回来了哇哈哈, 下次留三个字,不留俩个了

Reply
bigCat:
@mice, 稍微有营养点……

Reply
mice:
@bigCat, 下次知道了..

Reply
Leigh says:

July 18, 2010 at 5:08 PM

摸一下……居然不能变大

Reply
bigCat:
@Leigh, 呃，没有做那个效果。。。IE下面可以方便的用zoom做，嘻嘻，其他就要用position了

Reply
8yaya says:

July 18, 2010 at 10:31 PM

看不懂只好先收藏

Reply
Jimmy says:

July 18, 2010 at 10:50 PM

努力学习天文知识

Reply
左岸读书 says:

July 18, 2010 at 11:01 PM

再这样下去，什么插件都可以省了。

Reply
Mini Dragon says:

July 19, 2010 at 12:04 AM

免插件流路过

Reply
Dianso says:

July 19, 2010 at 12:10 AM

我的也是免插件

Reply
MOPVHS says:

July 19, 2010 at 8:31 PM

好怀念以前那个晃一下就变粗҈大的效果~~

Reply
帮主 says:

July 19, 2010 at 10:11 PM

又发现新大陆了～～
大猫同志的博文果然不讲废话

Reply
Bee君 says:

July 20, 2010 at 12:15 AM

能收工代码解决就收工~插件有不少后遗症

Reply
上海护栏网 says:

July 20, 2010 at 11:42 AM

真是不错，感谢分享

Reply
lifishake says:

July 20, 2010 at 4:18 PM

你怎么也开始搞这套了?把插件里的代码搬到function里就是免插件，罗罗嗦嗦的干啥啊。
不喜欢一切非都搞成非插件，换皮的时候太麻烦。

Reply
大猫:
@lifishake, 主要多个请求数很不爽啊...hack插件也麻烦...加上这个实现比较方便来着哈哈
如果是wp pagenavi 换皮肤的时候同样需要插入那坨function...

Reply
lifishake:
@大猫, 后边的那句是泛指.我真看不懂现在的免插件趋势.

Reply
bigCat:
@lifishake, 折腾中会理解插件的工作原理,基于学习的目的,嘿嘿,要是基于用的爽,管他性能捏.~

Reply
HJin_me says:

July 20, 2010 at 11:29 PM

系统是 Ubuntu 的？任务栏这么炫～～？喜欢

Reply
大猫:
@HJin_me, 呃docky还是很赞的,但是显卡差跑不起来..

Reply
安平护栏网 says:

July 21, 2010 at 9:25 AM

大猫同志的博文果然不讲废话！顶！

Reply
A.shun says:

July 21, 2010 at 10:30 AM

我用的是 willin 的 Mini Pagenavi，代码量也很少

Reply
大猫:
@A.shun, 代码量其实不是重头,拖速度排第一的是http请求数,有个外挂样式表

Reply
A.shun:
@大猫, 差不多的哦，我说的那个也是免插件，也是几行样式

Reply
大猫:
@A.shun, 顶之

Reply
MC柯 says:

July 21, 2010 at 2:50 PM

订阅了你的blog，最近想学wordpress，所以就

Reply
大猫:
@MC柯, 真的想学建议别从blog开始,去看codex.wordpress.org
blog只是技巧,没有基础的,没基础你也理解不了技巧更不用说想出来啥技巧

Reply
chisdy says:

July 23, 2010 at 8:14 AM

嘿嘿！找个时间测试下，好久没动wp了～

Reply
yun77op says:

July 24, 2010 at 11:35 AM

找碴的
'base' => @add_query_arg('page','%#%'),
应改为base' => @add_query_arg('paged','%#%'),
不然非永久链接用户会有麻烦，

Reply
bigCat:
@yun77op, 求具体麻烦，虽然偶不怎么会PHP，但是我就是固定连接啊，没见有啥子问题

Reply
yun77op:
@bigCat, 我说有麻烦的是那些，使用默认链接方式，$wp_rewrite->using_permalinks() 返回false的那些，他们是通过http://localhost/wordpress/?paged=2而不能http://localhost/wordpress/?page=2，不是默认链接是http://localhost/wordpress/page/2

Reply
bigCat:
@yun77op, 感谢,加了个update上去~

Reply
都市圈 says:

July 26, 2010 at 12:28 PM

我也和博主一样使用火狐

Reply
北京婚纱摄影工作室 says:

July 26, 2010 at 12:29 PM

看来要常来看看大猫了，经常发经典文章啊

Reply
mealdy says:

July 26, 2010 at 9:24 PM

第一次来，先说句无关文章的话吧，博客好漂亮啊，哈哈

Reply
bigCat:
@mealdy, 非IE浏览更赞哦

Reply
hzlzh says:

July 28, 2010 at 9:49 PM

向无插件奋斗~~~尽管只是个传说~
好吧，我承认，这次我终于记得订阅这个se情站点了~

Reply
bigCat:
@hzlzh, 传说也都是传出来的,嘿嘿,不靠谱

Reply
junofeeng says:

July 29, 2010 at 12:12 AM

还是插件来的实在。博主的主题华丽丽……

Reply
bigCat:
@junofeeng, 哈哈,蛋疼了才折腾木插件的

Reply
wallets says:

August 3, 2010 at 11:49 AM

博主很强大，学习了

Reply
max says:

August 10, 2010 at 3:41 PM

太好了，写的真不错

Reply
插件 says:

August 14, 2010 at 2:17 PM

使用插件简单多了吧直接激活就可以用什么都不用修改

Reply
bigCat:
@插件, 呃，图的是代码的快感

Reply
立青 says:

August 23, 2010 at 11:07 PM

收下了，拿回去研究，

Reply
赵福安 says:

August 29, 2010 at 2:53 AM

还需要改CSS啊，这个有点头大。

Reply
bigCat:
@赵福安, 哈哈，偶靠CSS吃饭

Reply
都市达人 says:

September 2, 2010 at 9:19 PM

好好学习大猫啊，多多益善啊

Reply
爱美 says:

September 2, 2010 at 9:20 PM

css,我的噩梦啊

Reply

不用插件实现 WP-PageNavi 功能(进阶版)

暧昧贴

大战 53 回合 to “不用插件实现 WP-PageNavi 功能(进阶版)”

Leave a Reply

路人甲乙丙

Categories

不用插件实现 WP-PageNavi 功能(进阶版)

暧昧贴

大战 53 回合 to “不用插件实现 WP-PageNavi 功能(进阶版)”

Leave a Reply

路人甲乙丙

Categories

Tags