开始本文之前请先阅读 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' => '« ',
'next_text' => ' »'
);
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固定连接的同学会链接失效
回复 8yaya 取消回复