收集自網絡的wordpress 分頁導航的代碼教程（全網最全版）

時間 2019-11-11

原文原文鏈接

wordpress 分頁導航是用來切換文章的一個功能，添加了 wordpress 分頁導航後，用戶便可自由到達指定的頁面數瀏覽分類文章，而這樣的一個很簡單功能卻有不少朋友在用插件：WP-PageNavi，插件的詳細設置請參考這篇文章：WordPress 安裝 WP-PageNavi 文章列表分頁導航插件，一直響應着一句 wordpress 界的口號「追求速度，遠離插件」，那麼如何用代碼自定義 wordpress 的分頁導航呢？php

今天在此介紹的正是幾種實現「wordpress 分頁導航的代碼教程（全網最全版）：自定義函數版和 wordpress 自帶函數版」！css

自定義函數版

第一種

效果圖以下： html

將如下分頁導航函數的代碼加到主題的 functions.php 中先：前端

/* 首頁分頁導航 
/* -------------*/  
function pagenavi( $before = '', $after = '', $p = 2 ) {
    if ( is_singular() ) return;
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ( $max_page == 1 )
        return;
    if ( empty( $paged ) )
        $paged = 1;
    	// $before = "<span class='pg-item'><a href='".esc_html( get_pagenum_link( $i ) )."'>{$i}</a></span>";
    echo $before;
    if ( $paged > 1)
        p_link( $paged - 1, '上一頁', '<span class="pg-item pg-nav-item pg-prev">' ,'上一頁' );
    if ( $paged > $p + 1 )
        p_link( 1, '首頁','<span class="pg-item">',1 );
		if ( $paged > 2 + $p ) echo '<span class="pg-item"> ... </span>';
    for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
        if ( $i > 0 && $i <= $max_page )
            $i == $paged ? print "<span class='pg-item pg-item-current'><span class='current'>{$i}</span></span>" : p_link( $i,'', '<span class="pg-item">',$i);
    }
    if ( $paged < $max_page - $p ) p_link( $max_page, __('末頁','tinection'),'<span class="pg-item"> ... </span><span class="pg-item">',$max_page );
    if ( $paged < $max_page ) p_link( $paged + 1,__('下一頁','tinection'), '<span class="pg-item pg-nav-item pg-next">' ,__('下一頁','tinection'));
    echo $after;
}

而後，在須要的地方，如主題 index.php、archive.php、category.php、search.php 等模板適當的位置，添加調用代碼：web

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

最後，加上美化的 css：效果參考這裏；wordpress

/* Pagination */
div.pagination {padding: 0px; margin: 25px 0 40px; text-align: center; font-size: 17px;line-height:17px; position:relative;} 
.pagination .pg-filler-1 { width:35%;}
.pagination .pg-filler-2 { width:40%;}
.pagination .pg-item a, .pagination .pg-item .current,.pagination .pg-dots, .pagination .pg-item .disabled{display:inline-block; color:#666; padding:9px 13px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; text-decoration:none; margin:0 1px; min-width:10px; }
.pagination .pg-item a {-webkit-transition: background .2s linear;-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition:  background .2s linear;transition: background .2s linear;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.pagination .pg-next { position:absolute; right:10px;}
.pagination .pg-prev { position:absolute; left:10px;}
.pg-nav-item { text-transform:uppercase;}
.pagination .pg-item .current, .pagination .pg-item a:hover { background:#5CBDE7; color:#fff;}
div.pagination span.current, div.pagination a  {padding:0px;}  
div.pagination a.navbutton {margin:0 2px;border: 1px solid #eaeaea;}
/* 下面部分是mobile時 */
@media screen and (max-width: 640px) {
div.pagination{font-size:15px;}
.pagination .pg-prev{left:0;}
.pagination .pg-next{right:0;}
.pagination .pg-item a, .pagination .pg-item .current, .pagination .pg-dots, .pagination .pg-item .disabled{padding: 5px 8px;font-size: 12px;line-height:12px;border-radius:2px;}
}

第二種

效果圖：@愛找主題函數

依然是運用到 wordpress 的 funtions.php 文件：post

//分頁  
    function par_pagenavi($range = 9){   
    if ( is_singular() ) return;  
    global $wp_query, $paged;  
    $max_page = $wp_query->max_num_pages;  
    if ( $max_page == 1 ) return;  
    if ( emptyempty( $paged ) ) $paged = 1;  
    echo '<span class="page-numbers">'.第 . $paged .頁 .（共 . $max_page .頁）. ' </span> ';  
        global $paged, $wp_query;    
        if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}    
        if($max_page > 1){if(!$paged){$paged = 1;}    
        if($paged != 1){echo "<a href='" . get_pagenum_link(1) . "' class='extend' title='跳轉到首頁'> NO.1 </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='跳轉到最後一頁'> END </a>";}}    
    }

再到主題的 style.css 文件裏添加樣式：url

/*pagenavi*/
.page_navi{width:100%;height:34px;line-height:34px;text-align:center;overflow:hidden;padding-top:10px;position:relative;background:#F4F4F4;border-top:1px solid #E8E8E8}
.page_navi a{display:inline-block;margin-right:8px;height:24px;line-height:24px;padding:0 8px;background:#e4e5e1;color:#626262;font-size:14px}
.page_navi a:hover,.page_navi .current{color:#fff;background:#8c9fcc url(jb.png) no-repeat center top;text-decoration:none}
.page_navi .page-numbers{position:absolute;top:5px;left:15px;letter-spacing:1px;font-family:微軟雅黑;color:#424242}

到了這步，功能是有了，但還要到前端加上調用，即添加調用代碼至主題 index.php、archive.php、category.php、search.php：spa

<div class="page_navi"><?php par_pagenavi(9); ?></div>

其中，9 的含義是您要顯示的頁面數，能夠自由設置數值大小，樣式也能夠根據本身的喜歡修改！

第三種

效果圖：@EndSkin

/**
    *WordPress 文章列表分頁導航
    *http://www.endskin.com/page-navi/
*/
function Bing_get_pagenavi( $query = false, $num = false, $before = '<article class="pagenavi postlistpagenavi">', $after = '</article>', $options = array() ){
    global $wp_query;
    $options = wp_parse_args( $options, array(
        'pages_text' => '%CURRENT_PAGE%/%TOTAL_PAGES%',
        'current_text' => '%PAGE_NUMBER%',
        'page_text' => '%PAGE_NUMBER%',
        'first_text' => __( '« 首頁', 'Bing' ),
        'last_text' => __( '尾頁 »', 'Bing' ),
        'next_text' => __( '»', 'Bing' ),
        'prev_text' => '«',
        'dotright_text' => '...',
        'dotleft_text' => '...',
        'num_pages' => 5,
        'always_show' => 0,
        'num_larger_page_numbers' => 3,
        'larger_page_numbers_multiple' => 10
    ) );
    if( $wp_query->max_num_pages <= 1 || is_single() ) return;
    if( !empty( $query ) ){
        $request = $query->request;
        $numposts = $query->found_posts;
        $max_page = $query->max_num_pages;
        $posts_per_page = intval( $num );
    }else{
        $request = $wp_query->request;
        $numposts = $wp_query->found_posts;
        $max_page = $wp_query->max_num_pages;
        $posts_per_page = intval( get_query_var( 'posts_per_page' ) );
    }
    $paged = intval( get_query_var( 'paged' ) );
    if( empty( $paged ) || $paged == 0 ) $paged = 1;
    $pages_to_show = intval( $options['num_pages'] );
    $larger_page_to_show = intval( $options['num_larger_page_numbers'] );
    $larger_page_multiple = intval( $options['larger_page_numbers_multiple'] );
    $pages_to_show_minus_1 = $pages_to_show - 1;
    $half_page_start = floor( $pages_to_show_minus_1 / 2 );
    $half_page_end = ceil( $pages_to_show_minus_1 / 2 );
    $start_page = $paged - $half_page_start;
    if( $start_page <= 0 ) $start_page = 1;
    $end_page = $paged + $half_page_end;
    if( ( $end_page - $start_page ) != $pages_to_show_minus_1 ) $end_page = $start_page + $pages_to_show_minus_1;
    if( $end_page > $max_page ){
        $start_page = $max_page - $pages_to_show_minus_1;
        $end_page = $max_page;
    }
    if( $start_page <= 0 ) $start_page = 1;
    $larger_per_page = $larger_page_to_show * $larger_page_multiple;
    $larger_start_page_start = ( ( floor( $start_page / 10 ) * 10 ) + $larger_page_multiple ) - $larger_per_page;
    $larger_start_page_end = floor( $start_page / 10 ) * 10 + $larger_page_multiple;
    $larger_end_page_start = floor( $end_page / 10 ) * 10 + $larger_page_multiple;
    $larger_end_page_end = floor( $end_page / 10 ) * 10 + ( $larger_per_page );
    if( $larger_start_page_end - $larger_page_multiple == $start_page ){
        $larger_start_page_start = $larger_start_page_start - $larger_page_multiple;
        $larger_start_page_end = $larger_start_page_end - $larger_page_multiple;
    }
    if( $larger_start_page_start <= 0 ) $larger_start_page_start = $larger_page_multiple;
    if( $larger_start_page_end > $max_page ) $larger_start_page_end = $max_page;
    if( $larger_end_page_end > $max_page ) $larger_end_page_end = $max_page;
    if( $max_page > 1 || intval( $options['always_show'] ) == 1 ){
        $pages_text = str_replace( '%CURRENT_PAGE%', number_format_i18n( $paged ), $options['pages_text'] );
        $pages_text = str_replace( '%TOTAL_PAGES%', number_format_i18n( $max_page ), $pages_text);
        echo $before;
        if( !empty( $pages_text ) ) echo '<span class="pages">' . $pages_text . '</span>';
        if( $start_page >= 2 && $pages_to_show < $max_page ){
            $first_page_text = str_replace( '%TOTAL_PAGES%', number_format_i18n( $max_page ), $options['first_text'] );
            echo '<a href="' . esc_url( get_pagenum_link() ) . '" class="first" title="' . $first_page_text . '">' . $first_page_text . '</a>';
        }
        if( $larger_page_to_show > 0 && $larger_start_page_start > 0 && $larger_start_page_end <= $max_page ){
            for( $i = $larger_start_page_start;$i < $larger_start_page_end;$i += $larger_page_multiple ){
                $page_text = str_replace( '%PAGE_NUMBER%', number_format_i18n( $i ), $options['page_text'] );
                echo '<a href="' . esc_url( get_pagenum_link( $i ) ) . '" class="page" title="' . $page_text . '">' . $page_text . '</a>';
            }
        }
        previous_posts_link( $options['prev_text'] );
        for( $i = $start_page;$i <= $end_page;$i++ ){                        
            if( $i == $paged ){
                $current_page_text = str_replace( '%PAGE_NUMBER%', number_format_i18n( $i ), $options['current_text'] );
                echo '<span class="current">' . $current_page_text . '</span>';
            }else{
                $page_text = str_replace( '%PAGE_NUMBER%', number_format_i18n( $i ), $options['page_text'] );
                echo '<a href="' . esc_url( get_pagenum_link( $i ) ).'" class="page" title="' . $page_text . '">' . $page_text . '</a>';
            }
        }
        if( empty( $query ) ) echo '<span id="next-page">';
        next_posts_link( $options['next_text'], $max_page );
        if( empty( $query ) ) echo '</span>';
    }
    if( $larger_page_to_show > 0 && $larger_end_page_start < $max_page ){
        for( $i = $larger_end_page_start;$i <= $larger_end_page_end;$i += $larger_page_multiple ){
            $page_text = str_replace( '%PAGE_NUMBER%', number_format_i18n( $i ), $options['page_text'] );
            echo '<a href="' . esc_url( get_pagenum_link( $i ) ).'" class="page" title="' . $page_text . '">' . $page_text . '</a>';
        }
    }
    if( $end_page < $max_page ){
        $last_page_text = str_replace( '%TOTAL_PAGES%', number_format_i18n( $max_page ), $options['last_text'] );
        echo '<a href="' . esc_url( get_pagenum_link( $max_page ) ) . '" class="last" title="' . $last_page_text . '">' . $last_page_text . '</a>';
    }
    echo $after;
}

而後在須要使用分頁導航的地方添加下邊的代碼：

<?php if( function_exists( 'Bing_get_pagenavi' ) ) Bing_get_pagenavi(); ?>

第四種：簡約版

樣式精簡，效果圖以下：

同上面同樣，functions.php 內加入如下代碼：

// 分頁代碼
    function par_pagenavi($range = 3){
        global $paged, $wp_query;
        if ( !$max_page ) {$max_page = $wp_query->max_num_pages;}
        if($max_page > 1){if(!$paged){$paged = 1;}
        if($paged != 1){echo "<a href='" . get_pagenum_link(1) . "' class='extend' title='跳轉到首頁'>«</a>";}
        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(' »');
    }
    }

下面就是在須要分頁的地方調用了：

<div id="page"><?php par_pagenavi(5); ?></div>

最後附加一些簡單的 css 吧：

/*pagenavi*/
#page{width:100%;height:36px;line-height:36px;text-align:left;overflow:hidden;margin-left:auto;margin-right:auto;display:block;text-align:-moz-center;*text-align:center;text-align:center}
#page a{text-decoration:none;color:#FFF;background:#282828;display:inline-block;padding:9px 12px;margin:0 5px 0 0;line-height:16px;margin-right:3px}
#page a:hover,#page a.current{color:#FFF;background:#32a5e7}

使用 Wordpress 的內置分頁導航版

wordpress 4.1 以後的版本，自帶了 paginate_links()函數，已經內置好了分頁導航的調用函數，其實不用上面的自定義的方法，使用自帶的分頁導航也挺漂亮！

第一種

來自 @知更鳥

分頁式導航調用函數：

<?php
        the_posts_pagination( array(
            '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>',
        ) );
    ?>

添加到主題 index、archive 等模板適當的位置便可，再配以相應的樣式，可實現響應式轉換，以下圖：

相應樣式：

/** 等於或大於550px正常模式 **/
    @media screen and (min-width: 550px) {
        .pagination {
            float: right;
        }
        .pagination a, .pagination a:visited {
            float: left;
            background: #fff;
            margin: 0 5px 10px 0;
            padding: 8px 11px;
            line-height: 100%;
            border: 1px solid #ebebeb;
            border-radius: 2px;
        }
        .pagination .current, .pagination .dots {
            background: #fff;
            float: left;
            margin: 0 5px 0 0;
            padding: 8px 11px;
            line-height: 100%;
            border: 1px solid #ebebeb;
            border-radius: 2px;
        }
        .pagination span.pages {}
        .pagination span.current, .pagination a:hover {
            background: #0088cc;
            color: #fff;
            border: 1px solid #0088cc;
        }
        .screen-reader-text, .pages  {
            display: none;
        }
    }
    /** 等於或小於550px用於移動設備 **/
    @media screen and (max-width: 550px) {
        .pagination {
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 2px;
        }
        .pagination .nav-links {
            min-height: 30px;
            position: relative;
            text-align: center;
        }
        .pagination .current .screen-reader-text {
            position: static !important;
        }
        .screen-reader-text {
            height: 1px;
            overflow: hidden;
            position: absolute !important;
        }
        .page-numbers {
            display: none;
            line-height: 25px;
            padding: 5px;
        }
        .pagination .page-numbers.current {
            text-transform: uppercase;
        }
        .pagination .current {
            display: inline-block;
        }
        .pagination .prev,
        .pagination .next {
            background: #0088cc;
            color: #fff;
            display: inline-block;
            height: 29px;
            line-height: 29px;
            overflow: hidden;
            padding: 2px 8px;
            position: absolute;
            border: 1px solid #0088cc;
        }
        .pagination .next {
            border-radius: 0 2px 2px 0
        }
        .pagination .prev {
            border-radius: 2px 0 0 2px;
        }
        .pagination .prev a,
        .pagination .next a{
            color: #fff;
            line-height: 20px;
            padding: 0;
            display: inline-block;
        }
        .pagination .prev {
            left: 0;
        }
        .pagination .prev:before {
            left: -1px;
        }
        .pagination .next {
            right: 0;
        }
        .pagination .next:before {
            right: -1px;
        }
    }

若是你的主題非響應式只添加正常模式的樣式就能夠（去掉媒體查詢判斷@media screen and ）。

第二種

上個效果圖先：

分頁的應用主要有文章列表分頁和評論列表分頁。那麼咱們分別描述下函數的調用方法

文章列表分頁

<div class="posts-nav">
    <?php echo paginate_links(array(
        'prev_next'          => 0,
        'before_page_number' => '',
        'mid_size'           => 2,
    ));?>
</div>

評論列表分頁

<?php paginate_comments_links('prev_next=0');?>

參考 CSS 樣式：

.posts-nav{font-size:14px;color:rgba(0,0,0,0.44);padding:10px 0}
.posts-nav .page-numbers{border-radius:3px;border:1px solid rgba(0,0,0,0.15);display:inline-block;text-align:center;width:30px;line-height:30px;margin:0 5px}
.posts-nav .page-numbers.current,.posts-nav .page-numbers:not(.dots):hover{background:#3b5998;border-color:#3b5998;color:#fff}
.posts-nav .page-numbers.dots{border-color:rgba(0,0,0,0)}