当博客内容一多，一个页面显示不了全部内容，所以很多地方都会用到分页，例如分类目录分页、评论分页、文章分页等等。当然，分页的方法有很多种，下面仅介绍几种。
1.分类目录分页
即用于文章列表分页，非插件版。如果你愿意，可以去试一下WP-PageNavi这个插件。
首先，现在functions.php里面添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function par_pagenavi($range = 9){ global $paged, $wp_query; if ( !$max_page ) {$max_page = $wp_query->max_num_pages;} if($max_page > 1){if(!$paged){$paged = 1;} if($paged != 1){echo "<a href='" . get_pagenum_link(1) . "' class='extend' title='跳转到首页'> 返回首页 </a>";} previous_posts_link(' 上一页 '); if($max_page > $range){ if($paged < $range){for($i = 1; $i <= ($range + 1); $i++){echo "<a href='" . get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a>";}} elseif($paged >= ($max_page - ceil(($range/2)))){ for($i = $max_page - $range; $i <= $max_page; $i++){echo "<a href='" . get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a>";}} elseif($paged >= $range && $paged < ($max_page - ceil(($range/2)))){ for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){echo "<a href='" . get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a>";}}} else{for($i = 1; $i <= $max_page; $i++){echo "<a href='" . get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a>";}} next_posts_link(' 下一页 '); if($paged != $max_page){echo "<a href='" . get_pagenum_link($max_page) . "' class='extend' title='跳转到最后一页'> 最后一页 </a>";}} } |
然后，在需要出现分页的地方调用（函数内的数据，用于显示分页栏的最大数字链接数，不包括文字链接，方便样式编写）
|
1 |
<div class="pagee_navi"><?php par_pagenavi(6); ?></div> |
最后，提供本站的css样式，具体样式你可以根据自己主题稍微修改一下即可
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.pagee_navi{ width:100%; height:36px; line-height:36px; text-align:center; overflow:hidden; padding-top:1em; } .pagee_navi a{ padding:3px 8px; margin:2px; width: 27px; height: 29px; text-decoration:none; color:#888; list-style: none; background-color: #FBFBFB; background-image: -moz-linear-gradient(top, white, whiteSmoke); background-image: -ms-linear-gradient(top, white, whiteSmoke); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(whiteSmoke)); background-image: -webkit-linear-gradient(top, white, whiteSmoke); background-image: -o-linear-gradient(top, white, whiteSmoke); background-image: linear-gradient(top, white, whiteSmoke); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); border: 1px solid #DDD; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 white; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 white; } .pagee_navi a:hover,.pagee_navi a.current{ border:1px solid #3FA7CB; /*font-weight: bold;*/ color:#3FA7CB; text-decoration:none; } |
2.文章内部分页
我们可能会碰到这样一种情况：发布的文章或页面太长，为了方便用户阅读，想要把一篇文章分成好几页。解决方法是：
文章内部分页指编辑文章时插入<!–nextpage–>标签将文章分成多个页面的分页方式。
使用的函数：wp_link_pages( $args )
但是，这个标签仅限于文章分页，而页面分页却行不通
3.页面分页
在page.php里面，找到(注意：代码的注释!–自行去掉)
|
1 |
<!--?php the_content();?--> |
在其后加上代码
|
1 |
<!--?php link_pages('<p><strong>分页:</strong>', '<p></p>', 'number'); ?> |
然后同文章分页，加上入<!–nextpage–>标签即可
4.评论分页
评论分页可以用paginate_links()完成，如果没有特殊要求，WordPress有一个专门用作评论分页的函数
使用的函数：paginate_comments_links( $args )
如果只需要输出上一页下一页的导航，可以用
|
1 |
previous_comments_link() |
和
|
1 |
next_comments_link() |
评论分页函调用了paginate_links()显示分页结果。
5.wodrpress内置分页
functions.php代码
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if ( ! function_exists( 'lee_content_nav' ) ) : function lee_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <nav id="<?php echo $nav_id; ?>"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'lee' ); ?></h3> <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'lee' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'lee' ) ); ?></div> </nav><!-- #nav-above --> <?php endif; } endif; |
分类页调用分页(上一页、下一页)
|
1 |
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'lee' ), 'after' => '</div>' ) ); ?> |
结合分页可以做出像本站分类页的ajax分页效果，这里就不再描述。
暂无评论