文章分頁功能與樣式美化

共计 2577 个字符，预计需要花费 7 分钟才能阅读完成。

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

• 原本的主題是在 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= 下一頁'); 
  ?>

效果就像是「上一頁 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;
  }

• 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;
  }

• 新增完函式後 自訂 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;
  }

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

  <?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/