跳转至第x页是资讯网站常见的文章列表分页跳转功能，用户手动输入要跳转的页码数，点击按钮就可以直接跳转到指定页码的页面，当网站分页数量非常大的时候，该功能可以有效提高用户体验，因为在页码部分隐藏时，用户不再需要一部分一部的点击页码才能达到想要到达的页码页面。那么对于WordPress的文章列表分页怎么实现这个功能呢？下面是阿树工作室分享的代码。
效果图
实现步骤：
1、在当前主题的functions.php文件添加以下函数代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
function ashuwp_pagenavi() { global $wp_query, $wp_rewrite; $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1; $pagination = array( 'base' => esc_url_raw( str_replace( 999999999, '%#%', get_pagenum_link( 999999999, false ) ) ), 'format' => '', 'total' => $wp_query->max_num_pages, 'current' => $current, 'show_all' => false, 'type' => 'plain', 'end_size'=>'1', 'mid_size'=>'3', 'prev_text' => '上一页', 'next_text' => '下一页' ); $total_pages = $wp_query->max_num_pages; if( !empty($wp_query->query_vars['s']) ) $pagination['add_args'] = array('s'=>get_query_var('s')); echo '<div class="page_nav"><div class="nav_wrap clearfix">'; echo '<div class="total"><span>第'.$current.'/'.$total_pages.'页,共</span><span class="blue">'.$wp_query->found_posts.'</span><span>个结果</span></div>'; if($total_pages>1){ echo '<div class="goto"> <span>跳转至：第</span> <input id="page_input" type="text" max="'.$total_pages.'" name="page_num" value="" /> <span>页</span> <a href="#" class="go_btn">确认</a> </div>'; } echo '<div class="page-nav clearfix"><nav>'; if ( $current !=1 ) { echo '<a class="page-numbers first" href="'. esc_html(get_pagenum_link(1)).'">首页</a>'; } echo paginate_links($pagination); if ( $current < $total_pages ) { echo '<a class="page-numbers last" href="'. esc_html(get_pagenum_link($total_pages)).'">尾页</a>'; } echo '</nav></div>'; echo '</div></div>'; } |
2、在要输入页码的文件，添加调用函数：
3、有主题header.php文件的</head>上面添加以下js代码：
代码作用：点击“跳转”按钮的时候，获取输入的页码，再获取任意一个页码链接，将页码数字替换掉。
本教程的页码链接类型为：http://www.boke8.net/wpuse/page/4 这种，如果你的不是这种，请修改下面js里面的页码替换部分。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> jQuery(document).ready( function($){ //.page_nav a.go_btn为确认按钮，点击执行 $('.page_nav a.go_btn').on('click',function(event){ event.preventDefault(); //取消默认动作 page_input = $('#page_input'); //获取输入框的值 page_max = page_input.attr('max'); //获取输入框中的max属性的值，就是最大页码 if(page_input.val()==''){ alert('请输入页码'); return false; } if((page_input.val()<1) || (page_input.val()>page_max)){ alert('请输入1至' + page_max + '之间的数字'); return false; } page_links = $('.page-nav a').eq(1).attr('href'); //从页码列表中获取任意一个链接,此处获取第一个链接 go_link = page_links.replace(///page//([0-9]{1,})/g, '/page/'+page_input.val()); //将页码数字替换 location.href = go_link; //跳转 }); }); </script> |
扩展教程：
前面两个步骤就可以实现页码跳转功能，但是如果加一个限制，只能输入数字的话会更好，所以完整的js代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
jQuery(document).ready( function($){ //.page_nav a.go_btn为确认按钮，点击执行 $('.page_nav a.go_btn').on('click',function(event){ event.preventDefault(); //取消默认动作 page_input = $('#page_input'); //获取输入框的值 page_max = page_input.attr('max'); //获取输入框中的max属性的值，就是最大页码 if(page_input.val()==''){ alert('请输入页码'); return false; } if((page_input.val()<1) || (page_input.val()>page_max)){ alert('请输入1至' + page_max + '之间的数字'); return false; } page_links = $('.page-nav a').eq(1).attr('href'); //从页码列表中获取任意一个链接,此处获取第一个链接 go_link = page_links.replace(///page//([0-9]{1,})/g, '/page/'+page_input.val()); //将页码数字替换 location.href = go_link; //跳转 }); $.fn.onlyNum = function onlyNum() { $(this).keypress(function (event) { var eventObj = event || e; var keyCode = eventObj.keyCode || eventObj.which; if ((keyCode >= 48 && keyCode <= 57)) return true; else return false; }).focus(function () { //禁用输入法 this.style.imeMode = 'disabled'; }).bind("paste", function () { //获取剪切板的内容 var clipboard = window.clipboardData.getData("Text"); if (/^/d+$/.test(clipboard)) return true; else return false; }); }; //#page_input为页码输入框 $('#page_input').onlyNum(); }); |
代码来自http://www.ashuwp.com/courses/supplement/817.html
原创文章，作者：carmelaweatherly，如若转载，请注明出处：https://blog.ytso.com/248509.html