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

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

效果如图

第一步：添加页码函数。

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

当然，在函数后面输出部分，可以按照自己的需求改动。

ashuwp_pagenavi() {
$wp_query, $wp_rewrite;
$wp_query->query_vars[‘paged’] > 1 ? $current = $wp_query->query_vars[‘paged’] : $current = 1;
$pagination = (
‘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;
( !($wp_query->query_vars[‘s’]) )
$pagination[‘add_args’] = (‘s’=>get_query_var(‘s’));
echo ‘<div =“page_nav”><div =“nav_wrap clearfix”>’;
echo ‘<div =“total”><span>第’.$current.’/’.$total_pages.’页,共</span><span =“blue”>’.$wp_query->found_posts.'</span><span>个结果</span></div>’;
($total_pages>1){
echo ‘<div =“goto”>
<span>跳转至：第</span>
<input id=“page_input” type=“text” max=“‘.$total_pages.'” name=“page_num” value=“” />
<span>页</span>
<a href=“#” =“go_btn”>确认</a>
</div>’;
}
echo ‘<div =“page-nav clearfix”><nav>’;
( $current !=1 ) {
echo ‘<a =“page-numbers first” href=“‘. esc_html(get_pagenum_link(1)).'”>首页</a>’;
}
echo paginate_links($pagination);
( $current < $total_pages ) {
echo ‘<a =“page-numbers last” href=“‘. esc_html(get_pagenum_link($total_pages)).'”>尾页</a>’;
}
echo ‘</nav></div>’;
echo ‘</div></div>’;
}

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

<?php ashuwp_pagenavi(); ?>

第二步：js文件。

既然是输入页码跳转，那肯定要用到js。下面的js代码阿树加了注释，请将js代码加入到js文件中即可，当然需要jquery支持。

思路很简单，就是在点击“跳转”按钮的时候，获取输入的页码，再获取任意一个页码链接，将页码数字替换掉即可。

本教程的页码链接类型为：http://www.ashuwp.com/courses/page/4 这种，如果你的不是这种，请修改下面js里面的页码替换部分。

jQuery(document).ready( ($){
//.page_nav a.go_btn为确认按钮，点击执行
$(‘.page_nav a.go_btn’).on(‘click’,(event){
event.preventDefault(); //取消默认动作
page_input = $(‘#page_input’); //获取输入框的值
page_max = page_input.attr(‘max’); //获取输入框中的max属性的值，就是最大页码
(page_input.val()==”){
alert(‘请输入页码’);
;
}
((page_input.val()<1) || (page_input.val()>page_max)){
alert(‘请输入1至’ + page_max + ‘之间的数字’);
;
}
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( ($){
//.page_nav a.go_btn为确认按钮，点击执行
$(‘.page_nav a.go_btn’).on(‘click’,(event){
event.preventDefault(); //取消默认动作
page_input = $(‘#page_input’); //获取输入框的值
page_max = page_input.attr(‘max’); //获取输入框中的max属性的值，就是最大页码
(page_input.val()==”){
alert(‘请输入页码’);
;
}
((page_input.val()<1) || (page_input.val()>page_max)){
alert(‘请输入1至’ + page_max + ‘之间的数字’);
;
}
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 = onlyNum() {
$().keypress( (event) {
eventObj = event || e;
keyCode = eventObj.keyCode || eventObj.which;
((keyCode >= 48 && keyCode <= 57))
;
;
}).focus( () {
//禁用输入法
.style.imeMode = ‘disabled’;
}).bind(“paste”, () {
//获取剪切板的内容
clipboard = window.clipboardData.getData(“Text”);
(/^d+$/.test(clipboard))
;
;
});
};
//#page_input为页码输入框
$(‘#page_input’).onlyNum();
});

END。

文章版权归作者所有，未经允许请勿转载。

THE END