【狂人論壇】

 找回密碼
 註冊
搜索

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

[複製鏈接]

5231

主題

1萬

金錢

156

積分

不來恩

積分
156
brian 發表於 2015-7-10 15:29 | 顯示全部樓層 |閱讀模式
在 WordPress 裡面如果文章內容太長,希望能分頁的話通常都會加上「<!--nextpage-->」的控制碼,加上之後就會在文章下方顯示 Page 1, 2, 3.... 等分頁頁數,如果你想修改這些分頁連結的樣式,通常改個 CSS 就能正常顯示顏色、調整字體大小..等。

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

改好之後就像這樣:

WordPress 分頁閱讀樣式

WordPress 分頁閱讀樣式





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


  1. function custom_wp_link_pages( $args = '' ) {
  2.         $defaults = array(
  3.                 'before' => '<p id="post-pagination">' . __( 'Pages:' ),
  4.                 'after' => '</p>',
  5.                 'text_before' => '',
  6.                 'text_after' => '',
  7.                 'next_or_number' => 'number',
  8.                 'nextpagelink' => __( 'Next page' ),
  9.                 'previouspagelink' => __( 'Previous page' ),
  10.                 'pagelink' => '%',
  11.                 'echo' => 1
  12.         );

  13.         $r = wp_parse_args( $args, $defaults );
  14.         $r = apply_filters( 'wp_link_pages_args', $r );
  15.         extract( $r, EXTR_SKIP );

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

  17.         $output = '';
  18.         if ( $multipage ) {
  19.                 if ( 'number' == $next_or_number ) {
  20.                         $output .= $before;
  21.                         for ( $i = 1; $i < ( $numpages + 1 ); $i = $i + 1 ) {
  22.                                 $j = str_replace( '%', $i, $pagelink );
  23.                                 $output .= ' ';
  24.                                 if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
  25.                                         $output .= _wp_link_page( $i );
  26.                                 else
  27.                                         $output .= '<span class="current-post-page">';

  28.                                 $output .= $text_before . $j . $text_after;
  29.                                 if ( $i != $page || ( ( ! $more ) && ( $page == 1 ) ) )
  30.                                         $output .= '</a>';
  31.                                 else
  32.                                         $output .= '</span>';
  33.                         }
  34.                         $output .= $after;
  35.                 } else {
  36.                         if ( $more ) {
  37.                                 $output .= $before;
  38.                                 $i = $page - 1;
  39.                                 if ( $i && $more ) {
  40.                                         $output .= _wp_link_page( $i );
  41.                                         $output .= $text_before . $previouspagelink . $text_after . '</a>';
  42.                                 }
  43.                                 $i = $page + 1;
  44.                                 if ( $i <= $numpages && $more ) {
  45.                                         $output .= _wp_link_page( $i );
  46.                                         $output .= $text_before . $nextpagelink . $text_after . '</a>';
  47.                                 }
  48.                                 $output .= $after;
  49.                         }
  50.                 }
  51.         }

  52.         if ( $echo )
  53.                 echo $output;

  54.         return $output;
  55. }
複製代碼
以上程式碼引用自: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. .page-link a:active,
  19. .page-link a:hover {
  20.         color: #FFFFFF;
  21.         background: #ff4b33;
  22. }

  23. .current-post-page {
  24.         color: #FFFFFF;
  25.         background: #ff4b33;
  26.         padding: 0.06em 0.6em;
  27. }

複製代碼




您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

手機版|聯絡站長|重灌狂人|狂人論壇

GMT+8, 2020-9-21 01:28

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回復 返回頂部 返回列表