非插件实现WordPress分页导航

在很多WordPress主题中,分页导航都是采用传统的“上一页”“下一页”两个链接,但这种方法并不实用,我们希望把他变成“1 2 3 …”具体的页码。有一个实现方法是使用WP-Pagenavi插件,但这么一个小小的功能,我们希望把它整合进主题中,以减少对插件的依赖。

具体的实现方法是:

1.首先在主题functions.php中加入以下代码:



  1. /* Pagenavi */  

  2. function pagenavi( $before = , $after = , $p = 2 ) {   

  3. if ( is_singular() ) return;   

  4. global $wp_query, $paged;   

  5. $max_page = $wp_query->max_num_pages;   

  6. if ( $max_page == 1 ) return;   

  7. if ( empty( $paged ) ) $paged = 1;   

  8. echo $before.'<div id=“pagenavi”>’.“\n”;   

  9. echo ‘<span class=“pages”>Page: ‘ . $paged . ‘ of ‘ . $max_page . ‘ </span>’;   

  10. if ( $paged > 1 ) p_link( $paged – 1, ‘Previous Page’, ‘?’ );   

  11. if ( $paged > $p + 1 ) p_link( 1, ‘First Page’ );   

  12. if ( $paged > $p + 2 ) echo ‘… ‘;   

  13. for( $i = $paged – $p; $i <= $paged + $p; $i++ ) {   

  14. if ( $i > 0 && $i <= $max_page ) $i == $paged ? print “<span class=’page-numbers current’>{$i}</span>” : p_link( $i );   

  15. }   

  16. if ( $paged < $max_page – $p – 1 ) echo ‘… ‘;   

  17. if ( $paged < $max_page – $p ) p_link( $max_page, ‘Last Page’ );   

  18. if ( $paged < $max_page ) p_link( $paged + 1,’Next Page’, ‘?’ );   

  19. echo ‘</div>’.$after.“\n”;   

  20. }   

  21. function p_link( $i, $title = , $linktype =  ) {   

  22. if ( $title ==  ) $title = “Page {$i}”;   

  23. if ( $linktype ==  ) { $linktext = $i; } else { $linktext = $linktype; }   

  24. echo “<a class=’page-numbers’ href='”, esc_html( get_pagenum_link( $i ) ), “‘ title='{$title}’>{$linktext}</a>”;   

  25. }  

2.然后在页面相应位置,把原来的分页导航代码改成以下:

  1. <?php pagenavi(); ?>  

这样就已经实现了分页导航,但此时的分页导航还很难看,页码都挤在一起,所以我们需要在style.css中进行适当装饰:


  1. /* pagenavi */  

  2. #pagenavi a, #pagenavi a:visited, #pagenavi span {   

  3. height25px;   

  4. line-height25px;   

  5. displayinlineblock;   

  6. padding1px 8px;   

  7. }   

  8. #pagenavi a, #pagenavi a:visited {   

  9. margin: 0 2px;   

  10. }   

  11. #pagenavi span.pages {   

  12. color#777;   

  13. font-weightbold;   

  14. margin-right10px;   

  15. padding: 0;   

  16. }   

  17. #pagenavi span.current {   

  18. margin: –2px 2px –1px;   

  19. padding: 0 9px;   

  20. height28px;   

  21. line-height28px;   

  22. text-aligncenter;   

  23. }  

当然,这里只是简单的装饰,你可以根据主题风格做必要的修改。



10 thoughts on “非插件实现WordPress分页导航

  1. 博主你好, 网上找了几种导航都是同一个BUG. 比如设置显示个为5

    1 2 3 4 5 6 7 .. 100 这样没错

    如果是在中间比如8

    1…3 4 5 6 7 8 9 10 11 12 13 14 15 … 100

    这样显示很多出来了 我想分页一直显示 8个 在中间的时候 是不是应该判断下?

发表评论

电子邮件地址不会被公开。 必填项已用*标注