非插件实现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.'“pagenavi”>’.“\n”;   

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

  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 “{$i}” : 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 ‘
’.$after.“\n”;   
  • }   

  • function p_link( $i, $title = ”, $linktype = ” ) {   

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

  • if ( $linktype == ” ) { $linktext = $i; } else { $linktext = $linktype; }   

  • echo “, esc_html( get_pagenum_link( $i ) ), “‘ title='{$title}’>{$linktext}”;   

  • }  

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

    1.   

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


    1. /* pagenavi */  

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

    3. height: 25px;   

    4. line-height: 25px;   

    5. display: inline–block;   

    6. padding: 1px 8px;   

    7. }   

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

    9. margin: 0 2px;   

    10. }   

    11. #pagenavi span.pages {   

    12. color: #777;   

    13. font-weight: bold;   

    14. margin-right: 10px;   

    15. padding: 0;   

    16. }   

    17. #pagenavi span.current {   

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

    19. padding: 0 9px;   

    20. height: 28px;   

    21. line-height: 28px;   

    22. text-align: center;   

    23. }  

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

    转载请保留链接：https://ilovetile.sijie.wang/2410/ 感谢您对版权的尊重