wordpress页码添加输入框:输入页码跳转

给wordpress的页码添加页码输入框,输入页码后点击跳转到指定页码。

效果如图

page_input

第一步:添加页码函数。

下面的页码输出函数是阿树一直在用的,可放心直接使用。

 当然,在函数后面输出部分,可以按照自己的需求改动。
  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( !empty($wp_query->query_vars['s']) )
  18.     $pagination['add_args'] = array('s'=>get_query_var('s'));
  19.     echo '<div class="page_nav"><div class="nav_wrap clearfix">';
  20.   echo '<div class="total"><span>第'.$current.'/'.$total_pages.'页,共</span><span class="blue">'.$wp_query->found_posts.'</span><span>个结果</span></div>';
  21.   if($total_pages>1){
  22.   echo '<div class="goto">
  23.         <span>跳转至:第</span>
  24.         <input id="page_input" type="text" max="'.$total_pages.'" name="page_num" value="" />
  25.         <span>页</span>
  26.         <a href="#" class="go_btn">确认</a>
  27.       </div>';
  28.   }
  29.   echo '<div class="page-nav clearfix"><nav>';
  30.   if ( $current !=1 ) {
  31.     echo '<a class="page-numbers first" href="'. esc_html(get_pagenum_link(1)).'">首页</a>';
  32.   }
  33.   echo paginate_links($pagination);
  34.   if ( $current < $total_pages ) {
  35.     echo '<a class="page-numbers last" href="'. esc_html(get_pagenum_link($total_pages)).'">尾页</a>';
  36.   }
  37.   echo '</nav></div>';
  38.     echo '</div></div>';
  39. }

在需要输出页码的页面,执行该函数即可,即直接加上下面代码即可执行。

  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属性的值,就是最大页码
  7.     if(page_input.val()==''){
  8.       alert('请输入页码');
  9.       return false;
  10.     }
  11.     if((page_input.val()<1) || (page_input.val()>page_max)){
  12.       alert('请输入1至' + page_max + '之间的数字');
  13.       return false;
  14.     }
  15.     page_links = $('.page-nav a').eq(1).attr('href'); //从页码列表中获取任意一个链接,此处获取第一个链接
  16.     go_link = page_links.replace(/\/page\/([0-9]{1,})/g, '/page/'+page_input.val()); //将页码数字替换
  17.     location.href = go_link; //跳转
  18.   });
  19. });

第三步:拓展。
事实上有前面两个步骤以及可以正常工作了,但是如果加一个限制,只能输入数字,会更好,所以完整的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属性的值,就是最大页码
  7.     if(page_input.val()==''){
  8.       alert('请输入页码');
  9.       return false;
  10.     }
  11.     if((page_input.val()<1) || (page_input.val()>page_max)){
  12.       alert('请输入1至' + page_max + '之间的数字');
  13.       return false;
  14.     }
  15.     page_links = $('.page-nav a').eq(1).attr('href'); //从页码列表中获取任意一个链接,此处获取第一个链接
  16.     go_link = page_links.replace(/\/page\/([0-9]{1,})/g, '/page/'+page_input.val()); //将页码数字替换
  17.     location.href = go_link; //跳转
  18.   });
  19.   $.fn.onlyNum = function onlyNum() {
  20.      $(this).keypress(function (event) {
  21.          var eventObj = event || e;
  22.          var keyCode = eventObj.keyCode || eventObj.which;
  23.          if ((keyCode >= 48 && keyCode <= 57))
  24.            return true;
  25.          else
  26.              return false;
  27.      }).focus(function () {
  28.      //禁用输入法
  29.          this.style.imeMode = 'disabled';
  30.      }).bind("paste"function () {
  31.      //获取剪切板的内容
  32.          var clipboard = window.clipboardData.getData("Text");
  33.          if (/^\d+$/.test(clipboard))
  34.              return true;
  35.          else
  36.              return false;
  37.      });
  38.  };
  39.  //#page_input为页码输入框
  40.  $('#page_input').onlyNum();
  41. });

END。

已有9条评论

发表评论