给 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 。