給 WordPress 的頁碼添加頁碼輸入框，輸入頁碼後點擊跳轉到指定頁碼。

效果如圖

第一步：添加頁碼函數。

下面的頁碼輸出函數是阿樹一直在用的，可放心直接使用。

 當然，在函數後面輸出部分，可以按照自己的需求改動。

  1. function ashuwp_pagenavi() {
  2.   global $wp_query, $wp_rewrite;
  3.   $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
  4.   $pagination = array(
  5.     'base' => esc_url_raw( str_replace( 999999999, '%#%', get_pagenum_link( 999999999, false ) ) ),
  6.     'format' => '',
  7.     'total' => $wp_query->max_num_pages,
  8.     'current' => $current,
  9.     'show_all' => false,
  10.     'type' => 'plain',
  11.     'end_size'=>'1',
  12.     'mid_size'=>'3',
  13.     'prev_text' => '上一頁',
  14.     'next_text' => '下一頁'
  15.   );
  16.   $total_pages = $wp_query->max_num_pages;
  17.   if( !emptyempty($wp_query->query_vars['s']) )
  18.     $pagination['add_args'] = array('s'=>get_query_var('s'));
  20.     echo '<div class="page_nav"><div class="nav_wrap clearfix">';
  23.   echo '<div class="total"><span> 第'.$current.'/'.$total_pages.'頁, 共</span><span class="blue">'.$wp_query->found_posts.'</span><span> 個結果</span></div>';
  25.   if($total_pages>1){
  26.   echo '<div class="goto">
  27.         <span> 跳轉至：第</span>
  28.         <input id="page_input" type="text" max="'.$total_pages.'" name="page_num" value="" />
  29.         <span> 頁</span>
  30.         <a href="#" class="go_btn"> 確認</a>
  31.       </div>';
  32.   }
  33.   echo '<div class="page-nav clearfix"><nav>';
  34.   if ( $current !=1 ) {
  35.     echo '<a class="page-numbers first" href="'. esc_html(get_pagenum_link(1)).'"> 首頁</a>';
  36.   }
  38.   echo paginate_links($pagination);
  40.   if ( $current < $total_pages ) {
  41.     echo '<a class="page-numbers last" href="'. esc_html(get_pagenum_link($total_pages)).'"> 尾頁</a>';
  42.   }
  43.   echo '</nav></div>';
  44.     echo '</div></div>';
  45. }

在需要輸出頁碼的頁面，執行該函數即可，即直接加上下面代碼即可執行。

  1. <?php ashuwp_pagenavi(); ?>

第二步：js 文件。

既然是輸入頁碼跳轉，那肯定要用到 js 。下面的 js 代碼阿樹加了註釋，請將 js 代碼加入到 js 文件中即可，當然需要 jquery 支持。

思路很簡單，就是在點擊 「跳轉」 按鈕的時候，獲取輸入的頁碼，再獲取任意一個頁碼鏈接，將頁碼數字替換掉即可。

本教程的頁碼鏈接類型為：http://www.ashuwp.com/courses/page/4  這種，如果你的不是這種，請修改下面 js 裏面的頁碼替換部分。

  1. jQuery(document).ready( function($){
  2.   //.page_nav a.go_btn 為確認按鈕，點擊執行
  3.   $('.page_nav a.go_btn').on('click',function(event){
  4.     event.preventDefault(); //取消默認動作
  5.     page_input = $('#page_input'); //獲取輸入框的值
  6.     page_max = page_input.attr('max'); //獲取輸入框中的 max 屬性的值，就是最大頁碼
  8.     if(page_input.val()==''){
  9.       alert('請輸入頁碼');
  10.       return false;
  11.     }
  12.     if((page_input.val()<1) || (page_input.val()>page_max)){
  13.       alert('請輸入 1 至' + page_max + '之間的數字');
  14.       return false;
  15.     }
  17.     page_links = $('.page-nav a').eq(1).attr('href'); //從頁碼列表中獲取任意一個鏈接, 此處獲取第一個鏈接
  18.     go_link = page_links.replace(//page/([0-9]{1,})/g, '/page/'+page_input.val()); //將頁碼數字替換
  20.     location.href = go_link; //跳轉
  21.   });
  22. });

第三步：拓展。
事實上有前面兩個步驟以及可以正常工作了，但是如果加一個限制，只能輸入數字，會更好，所以完整的 js 代碼如下：

  1. jQuery(document).ready( function($){
  2.   //.page_nav a.go_btn 為確認按鈕，點擊執行
  3.   $('.page_nav a.go_btn').on('click',function(event){
  4.     event.preventDefault(); //取消默認動作
  5.     page_input = $('#page_input'); //獲取輸入框的值
  6.     page_max = page_input.attr('max'); //獲取輸入框中的 max 屬性的值，就是最大頁碼
  8.     if(page_input.val()==''){
  9.       alert('請輸入頁碼');
  10.       return false;
  11.     }
  12.     if((page_input.val()<1) || (page_input.val()>page_max)){
  13.       alert('請輸入 1 至' + page_max + '之間的數字');
  14.       return false;
  15.     }
  17.     page_links = $('.page-nav a').eq(1).attr('href'); //從頁碼列表中獲取任意一個鏈接, 此處獲取第一個鏈接
  18.     go_link = page_links.replace(//page/([0-9]{1,})/g, '/page/'+page_input.val()); //將頁碼數字替換
  20.     location.href = go_link; //跳轉
  21.   });
  23.   $.fn.onlyNum = function onlyNum() {
  24.      $(this).keypress(function (event) {
  25.          var eventObj = event || e;
  26.          var keyCode = eventObj.keyCode || eventObj.which;
  27.          if ((keyCode >= 48 && keyCode <= 57))
  28.            return true;
  29.          else
  30.              return false;
  31.      }).focus(function () {
  32.      //禁用輸入法
  33.          this.style.imeMode = 'disabled';
  34.      }).bind("paste", function () {
  35.      //獲取剪切板的內容
  36.          var clipboard = window.clipboardData.getData("Text");
  37.          if (/^d+$/.test(clipboard))
  38.              return true;
  39.          else
  40.              return false;
  41.      });
  42.  };
  43.  //#page_input 為頁碼輸入框
  44.  $('#page_input').onlyNum();
  46. });

END 。