文章分頁功能與樣式美化

最近寫文章發現如果將文章全部擺在同一個頁面，使用者體驗不是很好，拆成每個頁面來閱讀，看起來也比較舒服，於是開始使用分頁功能，才發現原來主題的分頁功能寫得相當單調，只是簡單呼叫函式而已，上網找了相關客製化的分享後，經過測試效果十分不錯，寫成文章筆記下來囉。

原本的主題是在 single.php 置入下述的程式碼

<?php 
	 wp_link_pages('before=&after=&next_or_number=next&previouspagelink=上一頁&nextpagelink= ');
	 wp_link_pages('before=&after=&next_or_number=number'); echo "";
	 wp_link_pages('before=&after=&next_or_number=next&previouspagelink= &nextpagelink=下一頁'); 
?>

<?php

wp_link_pages('before=&after=&next_or_number=next&previouspagelink=上一頁&nextpagelink= ');

wp_link_pages('before=&after=&next_or_number=number'); echo "";

wp_link_pages('before=&after=&next_or_number=next&previouspagelink= &nextpagelink=下一頁');

效果就像是「上一頁 1 2 3 下一頁」這樣的概念，相當醜且也不能自己寫CSS去調整，因為都只是 <a href=..> 標籤。因此如果需要自訂CSS樣式就必須重新寫一個函式來進行呼叫，方法如下。

在 functions.php 裡面置入下述的程式碼

//內容分頁
function custom_wp_link_pages( $args = '' ) {
    $defaults = array(
        'before' => '<div class="pagelist">',
        'after' => '</div>',
        'text_before' => '',
        'text_after' => '',
        'next_or_number' => 'number',
        'nextpagelink' =>'下一頁',
        'previouspagelink' =>'上一頁',
        'pagelink' => '%',
        'echo' => 1
    );
    $r = wp_parse_args( $args, $defaults );
    $r = apply_filters( 'wp_link_pages_args', $r );
    extract( $r, EXTR_SKIP );
    global $page, $numpages, $multipage, $more, $pagenow;
    $output = '';
    if ( $multipage ) {
        if ( 'number' == $next_or_number ) {
            $output .= $before;
            for ( $i = 1; $i < ( $numpages + 1 ); $i = $i + 1 ) {
                $j = str_replace( '%', $i, $pagelink );
                $output .= ' ';
                if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
                    $output .= _wp_link_page( $i );
                else
                    $output .= '<span>';
                $output .= $text_before . $j . $text_after;
                if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
                    $output .= '</a>';
                else
                    $output .= '</span>';
            }
            $output .= $after;
        } else {
            if ( $more ) {
                $output .= $before;
                $i = $page - 1;
                if ( $i && $more ) {
                    $output .= _wp_link_page( $i );
                    $output .= $text_before . $previouspagelink . $text_after . '</a>';
                }
                $i = $page + 1;
                if ( $i <= $numpages && $more ) {
                    $output .= _wp_link_page( $i );
                    $output .= $text_before . $nextpagelink . $text_after . '</a>';
                }
                $output .= $after;
            }
        }
    }
    if ( $echo )
        echo $output;
    return $output;
}

//內容分頁

function custom_wp_link_pages( $args = '' ) {

$defaults = array(

'before' => '<div class="pagelist">',

'after' => '</div>',

'text_before' => '',

'text_after' => '',

'next_or_number' => 'number',

'nextpagelink' =>'下一頁',

'previouspagelink' =>'上一頁',

'pagelink' => '%',

'echo' => 1

);

$r = wp_parse_args( $args, $defaults );

$r = apply_filters( 'wp_link_pages_args', $r );

extract( $r, EXTR_SKIP );

global $page, $numpages, $multipage, $more, $pagenow;

$output = '';

if ( $multipage ) {

if ( 'number' == $next_or_number ) {

$output .= $before;

for ( $i = 1; $i < ( $numpages + 1 ); $i = $i + 1 ) {

$j = str_replace( '%', $i, $pagelink );

$output .= ' ';

if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )

$output .= _wp_link_page( $i );

else

$output .= '<span>';

$output .= $text_before . $j . $text_after;

if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )

$output .= '</a>';

else

$output .= '</span>';

}

$output .= $after;

} else {

if ( $more ) {

$output .= $before;

$i = $page - 1;

if ( $i && $more ) {

$output .= _wp_link_page( $i );

$output .= $text_before . $previouspagelink . $text_after . '</a>';

}

$i = $page + 1;

if ( $i <= $numpages && $more ) {

$output .= _wp_link_page( $i );

$output .= $text_before . $nextpagelink . $text_after . '</a>';

}

$output .= $after;

}

if ( $echo )

echo $output;

return $output;

}

wordpress 版本過舊可能內建的編輯器沒有支援分頁標籤的功能那就必須另外新增下述程式碼

add_filter('mce_buttons','add_next_page_button');
function add_next_page_button($mce_buttons) {
    $pos = array_search('wp_more',$mce_buttons,true);
    if ($pos !== false) {
        $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
        $tmp_buttons[] = 'wp_page';
        $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
    }
    return $mce_buttons;
}

add_filter('mce_buttons','add_next_page_button');

function add_next_page_button($mce_buttons) {

$pos = array_search('wp_more',$mce_buttons,true);

if ($pos !== false) {

$tmp_buttons = array_slice($mce_buttons, 0, $pos+1);

$tmp_buttons[] = 'wp_page';

$mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));

}

return $mce_buttons;

}

新增完函式後自訂CSS樣式打開主題的 style.css

/*分頁標籤樣式*/
.pagelist {
    padding: 10px 0;
    background: #f3f3f3;
    text-align: center;
    margin-top: 20px
}

.pagelist>span,
.pagelist>a {
    background-color: #fff;
    border: 1px#ddd solid;
    color: #000;
    margin-left: 5px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.pagelist>a:hover,
.pagelist>span {
    background-color: #363636;
    color: #fff !important;
}

/*分頁標籤樣式*/

.pagelist {

padding: 10px 0;

background: #f3f3f3;

text-align: center;

margin-top: 20px

}

.pagelist>span,

.pagelist>a {

background-color: #fff;

border: 1px#ddd solid;

color: #000;

margin-left: 5px;

padding: 4px 10px;

text-transform: uppercase;

}

.pagelist>a:hover,

.pagelist>span {

background-color: #363636;

color: #fff !important;

}

最後在 single.php 呼叫自訂的函式

single.php
PHP

<?php custom_wp_link_pages();?>

1

<?php custom_wp_link_pages();?>

完成後的效果如附圖

參考資料

http://www.111cn.net/wy/wordpress/87698.htm

http://lostsakura.com/14.html

http://bavotasan.com/2012/a-better-wp_link_pages-for-wordpress/

http://blog.brain1981.com/1267.html

https://prinzeugen.net/add-pagination-for-wordpress/