专注国内外云服务器
分享建站技术教程

在WordPress列表页添加跳转指定页面输入框方法

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

WordPress列表分页设置跳转第x页的跳转功能,用户手动输入要跳转的页码页,点击按钮可以直接跳转到指定页码页面,该功能可以有效提高用户体检,今天分享一下在WordPress列表页添加跳转指定页面输入框方法。

效果图

实现步骤:

1、在当前主题的functions.php文件添加以下函数代码:

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 ‘

’;

echo ‘

第’.$current.’/’.$total_pages.’页,共’.$wp_query->found_posts.’个结果

’;

if($total_pages>1){

echo ‘

跳转至:第

确认

’;

}

echo ‘

’;

echo ‘

’;

}

2、在要输入页码的文件,添加调用函数:

3、有主题header.php文件的上面添加以下js代码:

代码作用:点击“跳转”按钮的时候,获取输入的页码,再获取任意一个页码链接,将页码数字替换掉。

请修改下面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()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()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

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();

});

文章来源于wordpress教程:在WordPress列表页添加跳转指定页面输入框方法

相关推荐: 如何快速提高搜索引擎的竞价效果

吾上云WORDPRESS教程最新“如何快速提高搜索引擎的竞价效果”如何提高关键词搜索排名?要注意优化中的一个误区,不要盲目关注转化率的优化,这太片面了。当我第一次联系客户时,我关注并优化了转化率。词转换率越高,越早越好,但在随后的优化中,改进的空间会越来越小。…

赞(0)
未经允许不得转载:吾上云 » 在WordPress列表页添加跳转指定页面输入框方法
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们