上面是搬码源码网 abnma.com 经由过程收集网络收拾整顿的代码片断。搬码源码网小编此刻分享给各人，也给各人做个参考。
在年头的时辰给一个用户做网站用到了一个输出页码跳转的功效，用户假如需求跳转到那一页只要在输出框中输出响应的页面点击断定就可以跳转到指定页面，这个功效很是棒吧，上面就望望怎样应用 php 和 jquery 来完成这个功效。固然我之前本身写的阿谁是用 JS 完成的功效也比力简朴，明天在望到这个 jquery 版的写的很不错，在这里分享给各人。
导航代码
上面的页码输入函数显示进去的后果见上图：
function chenxing_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( !emptyempty($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>';
}
各人可以按照本身的需求改动下面的代码来转变输入的格局，在需求显示的位置加上<?php chenxing_pagenavi(); ?>举行挪用，再以 css 润色前台的结构就 OK 了，上面咱们还要完成跳转的功效。
jQuery 代码
既然是输出页码跳转，那必定要用到 js。上面的 js 代码来自阿树博客，请将 js 代码插手到 js 文件中即可，固然需求 jquery 撑持。思绪很简朴，就是在点击“跳转”按钮的时辰，获取输出的页码，再获取肆意一个页码链接，将页码数字替代失即可。本教程的页码链接类型为：http://www.demo/******/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; //跳转
});
$.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();
});
这段 jQuery 曾经集成了对应的分页跳转功效以及让输出框只能输出数字的限定，如许用户体验应该会比力棒。
以上是搬码源码网(abnma.com)为你网络收拾整顿的全数代码内容，但愿文章可以或许帮你解决所碰到的步伐开提问题。假如感觉搬码源码网网站内容还不错，接待将搬码源码网网站保举给步伐员挚友。
总结
以上是搬码源码网为你网络收拾整顿的WordPress分页导航添加输出页码跳转功效全数内容，但愿文章可以或许帮你解决WordPress分页导航添加输出页码跳转功效所碰到的步伐开提问题。
假如感觉搬码源码网网站内容还不错，接待将搬码源码网网站保举给步伐员挚友。
请先 ！