首页 / WordPress开发 / WordPress页码添加输入框：输入页码跳转

WordPress页码添加输入框：输入页码跳转

    • 珂李斯

    发布于

    by

    给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’));
    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。

    类别：WordPress开发、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！