首页 > CMS知识 > 正文

wordpress自定义设置分页的实现方法

2022 年 9 月 7 日   来源:帮建站   浏览量: 78

第一步:把以下代码放入模板函数文件 functions.php;

  1. /**
  2. * 数字分页函数
  3. * 因为wordpress默认仅仅提供简单分页
  4. * 所以要实现数字分页,需要自定义函数
  5. * @Param int $range 数字分页的宽度
  6. * @Return string|empty 输出分页的HTML代码
  7. */
  8. function bangjianzhan_pagenavi( $range = 4 ) {
  9. global $paged,$wp_query;
  10. if ( !$max_page ) {
  11. $max_page = $wp_query->max_num_pages;
  12. }
  13. if( $max_page >1 ) {
  14. echo "<div class='fenye'>";
  15. if( !$paged ){
  16. $paged = 1;
  17. }
  18. if( $paged != 1 ) {
  19. echo "<a href='".get_pagenum_link(1) ."' class='extend' title='跳转到首页'>首页</a>";
  20. }
  21. previous_posts_link('上一页');
  22. if ( $max_page >$range ) {
  23. if( $paged <$range ) {
  24. for( $i = 1; $i <= ($range +1); $i++ ) {
  25. echo "<a href='".get_pagenum_link($i) ."'";
  26. if($i==$paged) echo " class='current'";echo ">$i</a>";
  27. }
  28. }elseif($paged >= ($max_page -ceil(($range/2)))){
  29. for($i = $max_page -$range;$i <= $max_page;$i++){
  30. echo "<a href='".get_pagenum_link($i) ."'";
  31. if($i==$paged)echo " class='current'";echo ">$i</a>";
  32. }
  33. }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){
  34. for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){
  35. echo "<a href='".get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a>";
  36. }
  37. }
  38. }else{
  39. for($i = 1;$i <= $max_page;$i++){
  40. echo "<a href='".get_pagenum_link($i) ."'";
  41. if($i==$paged)echo " class='current'";echo ">$i</a>";
  42. }
  43. }
  44. next_posts_link('下一页');
  45. if($paged != $max_page){
  46. echo "<a href='".get_pagenum_link($max_page) ."' class='extend' title='跳转到最后一页'>尾页</a>";
  47. }
  48. echo '<span>共['.$max_page.']页</span>';
  49. echo "</div>\n";
  50. }
  51. }
    
    第二步:将以下的 CSS 样式放到样式表里,控制分页的样式。
    
    

    /*——————

    分页部分的CSS

    ——————*/

    .fenye{

    height: 25px;

    line-height: 25px;

    _background: #F9F9F9;

    padding: 2px 5px;

    margin: 20px 4px;

    _border: solid 1px #ccc;

    _text-align: center;

    }

     

    .fenye a{

    padding:4px 6px 4px 6px;

    margin:0 2px 0 2px;

    border:1px solid #aaa;

    text-decoration:none;

    color:#333;

    }

    .fenye a.current{

    background:#ff6f3d;

    color:#fff;

    }

    .fenye a:hover{

    background:#ff6f3d;

    color:#fff;

    }

    /*– footer –*/

    .footer {

    width:100%;

    height:64px;

    background:#E6E9ED;

    border-top: 1px solid #e2e2e3;

    }

    /*– post –*/

    .post {

    background:none;

    }

    .post .entry-cnt {

    height:auto;

    line-height:2;

    font-size:14px;

    border-top-width: 1px;

    border-top-style: dotted;

    border-top-color: #eee;

    padding:15px 0 0;

    }

    .post .entry-cnt p {

    line-height:2;

    font-size:14px;

    }

    .related {

    padding:10px 5px 10px 5px;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

    margin: 20px auto 10px auto;

    }

    .r-left {

    float:left;

    }

     

    .r-right {

    float:right;

    }

     

    /*– discuss –*/

    .discuss {

    padding:25px;

    }

    第三步:在需要显示分页的地方插入以下的代码,用于显示分页按钮。
    
    <?php bangjianzhan_pagenavi();?>


首页 在线 手机