标签:blog arc echo archive html hover next page function
1.整合Bootstrap分页代码
* 因为wordpress默认仅仅提供简单分页, 所以要实现数字分页,需要自定义函数,wordpress可以结合bootstrap制作分页,bootstrap提供了分页的样式,可以减少对样式的书写。
1.复制下面的代码到functions.php函数中
/** * 数字分页函数 * @Param int $range 数字分页的宽度 * @Return string|empty 输出分页的HTML代码 */ function bootstrap_pagenavi( $range = 4 ) { global $paged,$wp_query; if ( !$max_page ) { $max_page = $wp_query->max_num_pages; } if( $max_page >1 ) { echo "<div class=‘pagination‘>"; if( !$paged ){ $paged = 1; } if( $paged != 1 ) { echo "<li><a href=‘".get_pagenum_link(1) ."‘ title=‘跳转到首页‘>首页</a></li>"; } echo ‘<li>‘;previous_posts_link(‘上一页‘);echo ‘</li>‘; if ( $max_page >$range ) { if( $paged <$range ) { for( $i = 1; $i <= ($range +1); $i++ ) { echo "<li"; if($i==$paged)echo " class=‘active‘"; echo " ><a href=‘".get_pagenum_link($i) ."‘"; echo ">$i</a></li>"; } }elseif($paged >= ($max_page -ceil(($range/2)))){ for($i = $max_page -$range;$i <= $max_page;$i++){ echo "<li"; if($i==$paged)echo " class=‘active‘"; echo " ><a href=‘".get_pagenum_link($i) ."‘"; echo ">$i</a></li>"; } }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){ for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){ echo "<li"; if($i==$paged)echo " class=‘active‘"; echo " ><a href=‘".get_pagenum_link($i) ."‘"; echo ">$i</a></li>"; } } }else{ for($i = 1;$i <= $max_page;$i++){ echo "<li"; if($i==$paged)echo " class=‘active‘"; echo " ><a href=‘".get_pagenum_link($i) ."‘"; echo ">$i</a></li>"; } } echo ‘<li>‘; next_posts_link(‘下一页‘);echo ‘</li>‘; if($paged != $max_page){ echo "<li><a href=‘".get_pagenum_link($max_page) ."‘ title=‘跳转到最后一页‘>尾页</a></li>"; } echo ‘<span>共[‘.$max_page.‘]页</span>‘; echo "</div>\n"; } }
2.在category.php或者归档页面archive.php或者其他模板文件中都可以。
<?php bootstrap_pagenavi();?>
最终效果:
如果把函数中的div类. pagination改成.pager,则效果图如下:
如果没有使用bootstrap框架,可以复制下面css文件实现样式
/*------------------ 分页部分的CSS ------------------*/ .pagination{ height: 25px; line-height: 25px; _background: #F9F9F9; padding: 2px 5px; margin: 20px 4px; _border: solid 1px #ccc; _text-align: center; } .pagination a{ padding:4px 6px 4px 6px; margin:0 2px 0 2px; border:1px solid #aaa; text-decoration:none; color:#333; } .pagination a.active{ background:#ff6f3d; color:#fff; } .pagination a:hover{ background:#ff6f3d; color:#fff; }
标签:blog arc echo archive html hover next page function
原文地址:http://www.cnblogs.com/cheryshi/p/7779223.html