WordPress主題開發：實現分頁功能

 

 

 

注意的是這個受后台這里的文章篇數設置所影響~

 

 

 

一、使用內置方法 (WordPress 4.1以前無效)

the_posts_pagination 輸出分頁式導航，用法：

<?php the_posts_pagination( array(
'mid_size' => 3,
'prev_text' =>'上一頁',
'next_text' =>'下一頁',
'before_page_number' => '<span class="meta-nav screen-reader-text">第 </span>',
'after_page_number' => '<span class="meta-nav screen-reader-text"> 頁</span>',
) ); ?>

 參數說明：$mid_size---第幾個開始顯示省略號，$prev_text---上一頁文本，$next_text---下一頁文本，$before_page_number---頁碼前，$after_page_number---頁碼后

<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
<!-- 在這里調用內容 -->
<?php endwhile; ?>
//這里放分頁代碼
<?php endif; ?>

 

二、自定義方法：

把以下代碼放入：functions.php

/**
* 數字分頁函數
* 因為wordpress默認僅僅提供簡單分頁
* 所以要實現數字分頁，需要自定義函數
* @Param int $range            數字分頁的寬度
* @Return string|empty        輸出分頁的HTML代碼        
*/
function lingfeng_pagenavi( $range = 4 ) {
    global $paged,$wp_query;
    if ( !$max_page ) {
        $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
------------------*/
.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 lingfeng_pagenavi();?>

 

 

三、使用插件的方法

安裝插件：wp-pagenavi下載>>> 

調用：

<?php wp_pagenavi(); ?>