如何修改 WordPress 分頁連結樣式？當前頁面無法改樣式的方法

在 WordPress 裡面如果文章內容太長，希望能分頁的話通常都會加上「<!--nextpage-->」的控制碼，加上之後就會在文章下方顯示 Page 1, 2, 3.... 等分頁頁數，如果你想修改這些分頁連結的樣式，通常改個 CSS 就能正常顯示顏色、調整字體大小..等。

不過在原始 WordPress 的設定中，只能調整其他分頁連結的樣式，當前頁面連結的樣式卻無法動，只能跟著前面「Page」的文字樣式走，如果想修改當前頁面的頁數樣式，可以依照下面方法修改：

改好之後就像這樣：

WordPress 分頁閱讀樣式

一、在 佈景主題的 functions.php 檔案加入以下控制碼： （以後要在佈景上用 custom_wp_link_pages 顯示分頁閱讀的頁數 ）

1. 
   
2. 
   
3. function custom_wp_link_pages( $args = '' ) {
   
4.         $defaults = array(
   
5.                 'before' => '<p id="post-pagination">' . __( 'Pages:' ),
   
6.                 'after' => '</p>',
   
7.                 'text_before' => '',
   
8.                 'text_after' => '',
   
9.                 'next_or_number' => 'number',
   
10.                 'nextpagelink' => __( 'Next page' ),
    
11.                 'previouspagelink' => __( 'Previous page' ),
    
12.                 'pagelink' => '%',
    
13.                 'echo' => 1
    
14.         );
    
15. 
    
16.         $r = wp_parse_args( $args, $defaults );
    
17.         $r = apply_filters( 'wp_link_pages_args', $r );
    
18.         extract( $r, EXTR_SKIP );
    
19. 
    
20.         global $page, $numpages, $multipage, $more, $pagenow;
    
21. 
    
22.         $output = '';
    
23.         if ( $multipage ) {
    
24.                 if ( 'number' == $next_or_number ) {
    
25.                         $output .= $before;
    
26.                         for ( $i = 1; $i < ( $numpages + 1 ); $i = $i + 1 ) {
    
27.                                 $j = str_replace( '%', $i, $pagelink );
    
28.                                 $output .= ' ';
    
29.                                 if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
    
30.                                         $output .= _wp_link_page( $i );
    
31.                                 else
    
32.                                         $output .= '<span class="current-post-page">';
    
33. 
    
34.                                 $output .= $text_before . $j . $text_after;
    
35.                                 if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
    
36.                                         $output .= '</a>';
    
37.                                 else
    
38.                                         $output .= '</span>';
    
39.                         }
    
40.                         $output .= $after;
    
41.                 } else {
    
42.                         if ( $more ) {
    
43.                                 $output .= $before;
    
44.                                 $i = $page - 1;
    
45.                                 if ( $i && $more ) {
    
46.                                         $output .= _wp_link_page( $i );
    
47.                                         $output .= $text_before . $previouspagelink . $text_after . '</a>';
    
48.                                 }
    
49.                                 $i = $page + 1;
    
50.                                 if ( $i <= $numpages && $more ) {
    
51.                                         $output .= _wp_link_page( $i );
    
52.                                         $output .= $text_before . $nextpagelink . $text_after . '</a>';
    
53.                                 }
    
54.                                 $output .= $after;
    
55.                         }
    
56.                 }
    
57.         }
    
58. 
    
59.         if ( $echo )
    
60.                 echo $output;
    
61. 
    
62.         return $output;
    
63. }
    

複製代碼

以上程式碼引用自：https://wordpress.org/support/to ... ss-for-current-page




二、在 loop-single.php 或 single.php 裡面的適當位置（通常是文章下方）加入類似下方的控制碼：（程式碼需依實際狀況修改，裡面的「twentyten」是我的佈景主題名稱）

1. <?php custom_wp_link_pages( array( 'before' => '<div class="page-link">' . __( '翻頁閱讀 »  ', 'twentyten' ), 'after' => '</div>' ) ); ?>

複製代碼

三、然後修改 style.css 樣式表，加入  page-link 的樣式控制與 current-post-page 當前頁數的樣式控制

如：

1. .page-link {
   
2.         clear: both;
   
3.         font-size: 32px;
   
4.         font-weight: 900;
   
5.         word-spacing: 0.0001em;
   
6.         color: #ff4b33;
   
7.         background: #FFFFFF;
   
8.         margin: -20px 0 20px 0;
   
9. }
   
10. .page-link a:link,
    
11. .page-link a:visited {
    
12.         background: #f1f1f1;
    
13.         color: #333;
    
14.         font-weight: normal;
    
15.         padding: 0.06em 0.6em;
    
16.         text-decoration: none;
    
17. }
    
18. 
    
19. .page-link a:active,
    
20. .page-link a:hover {
    
21.         color: #FFFFFF;
    
22.         background: #ff4b33;
    
23. }
    
24. 
    
25. .current-post-page {
    
26.         color: #FFFFFF;
    
27.         background: #ff4b33;
    
28.         padding: 0.06em 0.6em;
    
29. }
    
30. 
    

複製代碼