给wordpress的页码添加页码输入框,输入页码后点击跳转到指定页码。
效果如图
第一步:添加页码函数。
下面的页码输出函数是阿树一直在用的,可放心直接使用。
当然,在函数后面输出部分,可以按照自己的需求改动。
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 ''; }
在需要输出页码的页面,执行该函数即可,即直接加上下面代码即可执行。
第二步:js文件。
既然是输入页码跳转,那肯定要用到js。下面的js代码阿树加了注释,请将js代码加入到js文件中即可,当然需要jquery支持。
思路很简单,就是在点击“跳转”按钮的时候,获取输入的页码,再获取任意一个页码链接,将页码数字替换掉即可。
本教程的页码链接类型为:http://www.ashuwp.com/courses/page/4 这种,如果你的不是这种,请修改下面js里面的页码替换部分。
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; //跳转 }); });
第三步:拓展。
事实上有前面两个步骤以及可以正常工作了,但是如果加一个限制,只能输入数字,会更好,所以完整的js代码如下:
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(); });
END。
原文链接:https://www.ashuwp.com/courses/supplement/817.html
关注公众号『窗外天空』
获取更多建站运营运维新知!互联网创业、前沿技术......
最新评论
想要aarch64_generic架构的,用的是Rockchip RK3308 ARMv8 Cortex-A35
水淀粉vdfv
有其他下载方式么,网站上的点击下载后没有任何反应,或者直接发给我一下?[email protected]
你好,我的型号ELECOM WRC-X3200GST3,ARMv8 Processor rev 4构架,CPU mediatek/mt7622,找了很久没有找到
我的也是这样。一直无法确认ARCH架构,或是不支持。一直没办法用。不知道怎么办了