WordPress4分頁

入門菜鳥，希望能給和菜鳥相互取暖

最近在改造wordpress，自己寫代碼做了個分頁
1，在自己主題下的style.css中增加如下css

Js代碼

.pagination {    width: auto;    display: block;    text-align: center;    margin: 30px;}.pagination a {    background-color: #eee;    text-decoration: none;    color: #999;    font-size: 18px;    padding: 0px 10px;    line-height: 32px;    height: 32px;    margin: 0px 0.5px;}.pagination a.page-btn {    width: 40px;}.pagination a.page-btn .icon-prev {    position: absolute;    width: 0px;    height: 0px;    border-top: 6px solid transparent;    border-bottom: 6px solid transparent;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-left: none;    border-right: 6px solid #999;    left: 50%;    margin-left: -3px;    top: 50%;    margin-top: -6px;    -webkit-transition: all 0.1s ease;    transition: all 0.1s ease;}.pagination a.page-btn .icon-next {    position: absolute;    width: 0px;    height: 0px;    border-top: 6px solid transparent;    border-bottom: 6px solid transparent;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-right: none;    border-left: 6px solid #999;    left: 50%;    margin-left: -3px;    top: 50%;    margin-top: -6px;    -webkit-transition: all 0.1s ease;    transition: all 0.1s ease;}.pagination a:hover {    color: #fff;}.pagination a:hover .icon-prev {    width: 0px;    height: 0px;    border-top: 6px solid transparent;    border-bottom: 6px solid transparent;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-left: none;    border-right: 6px solid #fff;}.pagination a:hover .icon-next {    width: 0px;    height: 0px;    border-top: 6px solid transparent;    border-bottom: 6px solid transparent;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-right: none;    border-left: 6px solid #fff;}.pagination span {    display: inline-block;    margin: 0px 1px;    color: #adadad;    font-size: 18px;}

2, 將如下代碼copy到自己theme的functions.php中，

Php代碼

/**/** * @param int $total_pages *  總頁數 * @param int $paged *  當前頁數從1計 * @param int $visible_count *  可見的頁碼數，接受自訂，如果自訂小於1或者大於max，置為max * *@author shandaiwang */define('MAX_VISIBLE_PAGE_COUNT', 20);function pagination($total_pages = 0, $current_page = 1, $visible_count = MAX_VISIBLE_PAGE_COUNT){    // 入參適配    if($total_pages <= 1) {        return;    }    if($current_page <= 0) {        $current_page = 1;    }    if($visible_count <= 0 || $visible_count > MAX_VISIBLE_PAGE_COUNT) {        $visible_count = MAX_VISIBLE_PAGE_COUNT;    }    // 入參適配結束    // 頁碼列表適配    $range = ceil(($visible_count + 1) / 2);    $start = $current_page - $range + 1;    if($start < 1) {        $start = 1;    }    $end = $start + $visible_count - 1;    if ($end > $total_pages) {        $end = $total_pages;        // 向前反推，儘可能使顯示個數為$visible_count        $start = $end - $visible_count + 1;        if($start < 1) {            $start = 1;        }    }    // 頁碼列表適配結束    // 渲染    echo "";    if($current_page > 1) { // pre        echo(' ');    }    if($start != 1) {   // first[...]        echo('1');        if ($start != 2) {            echo('...');        }    }    for ($i=$start; $i <= $end; $i++){  // list        if ($i == $current_page) {            echo(''.$i.'');        } else {            echo(''.$i.'');        }    }    if($end < $total_pages) {   //[...]last        if ($end + 1 < $total_pages) {            echo('...');        }        echo(''.$total_pages.'');    }    if($current_page < $total_pages) { // next        echo(' ');    }    echo "\n";}

3，在需要的地方引用即可，形如

至於如何獲得$total_pages, $current_page,我用的WP query，形如

