wordpress自定义分页开发

系统默认的分页扎实不好用，这里写下在主题中实现自定义分页的开发。

首先在主题的functions.php中添加如下函数：

/**
* 数字分页函数
* 因为wordpress默认仅仅提供简单分页
* 所以要实现数字分页，需要自定义函数
* @Param int $range            数字分页的宽度
* @Return string|empty        输出分页的HTML代码        
*/
function pagenavi( $range = 4 ) {
    global $paged,$wp_query;
    $max_page = $wp_query->max_num_pages;
    if( $max_page >1 ) {
        echo "<div class='fenye'>"; 
        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>";
        }
        echo '<span>共'.$max_page.'页</span>';
        echo "</div>\n";  
    }
}

CSS代码

.navigation .fenye{    
    margin: 20px 0;
}

.navigation .fenye a, .navigation .fenye span{
    padding: 10px 15px;
    margin: 0 2px;
    border:1px solid #aaa;
    text-decoration:none;
    color:#333;
}

.navigation .fenye a.current{    
    background:#2196F3;    
    color:#fff;
}

.navigation .fenye a:hover{
    background:#2196F3;
    color:#fff;
}

在主题模板中的分页位置添加如下代码：

<div class="navigation">
	<?php echo pagenavi();?>
</div>

在页面上显示的最终效果