1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress分页导航添加输入页码跳转功能

在年初的时候给一个用户做网站用到了一个输入页码跳转的功能,用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面,这个功能非常棒吧,下面就看看如何使用 php 和 jquery 来实现这个功能。当然我之前自己写的那个是用 JS 实现的功能也比较简单,今天在看到这个 jquery 版的写的很不错,在这里分享给大家。
WordPress分页导航添加输入页码跳转功能-云模板

导航代码

下面的页码输出函数显示出来的效果见上图:

  1.     function chenxing_pagenavi() {
  2.       global $wp_query, $wp_rewrite;
  3.       $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
  4.       $pagination = array(
  5.         'base' => esc_url_raw( str_replace( 999999999, '%#%', get_pagenum_link( 999999999, false ) ) ),
  6.         'format' => ",
  7.         'total' => $wp_query->max_num_pages,
  8.         'current' => $current,
  9.         'show_all' => false,
  10.         'type' => 'plain',
  11.         'end_size'=>'1',
  12.         'mid_size'=>'3',
  13.         'prev_text' => '上一页',
  14.         'next_text' => '下一页'
  15.       );
  16.       $total_pages = $wp_query->max_num_pages;
  17.       if( !emptyempty($wp_query->query_vars['s']) )
  18.         $pagination['add_args'] = array('s'=>get_query_var('s'));
  19.         echo '<div class="page_nav"><div class="nav_wrap clearfix">';
  20.       echo '<div class="total"><span>第'.$current.'/'.$total_pages.'页,共</span><span class="blue">'.$wp_query->found_posts.'</span><span>个结果</span></div>';
  21.       if($total_pages>1){
  22.       echo '<div class="goto">
  23.             <span>跳转至:第</span>
  24.             <input id="page_input" type="text" max="'.$total_pages.'" name="page_num" value="" />
  25.             <span>页</span>
  26.             <a href="#" class="go_btn">确认</a>
  27.           </div>';
  28.       }
  29.       echo '<div class="page-nav clearfix"><nav>';
  30.       if ( $current !=1 ) {
  31.         echo '<a class="page-numbers first" href="'. esc_HTML(get_pagenum_link(1)).'">首页</a>';
  32.       }
  33.       echo paginate_links($pagination);
  34.       if ( $current < $total_pages ) {
  35.         echo '<a class="page-numbers last" href="'. esc_html(get_pagenum_link($total_pages)).'">尾页</a>';
  36.       }
  37.       echo '</nav></div>';
  38.         echo '</div></div>';
  39.     }

大家可以根据自己的需要修改上面的代码来改变输出的格式,在需要显示的位置加上<?php chenxing_pagenavi(); ?>进行调用,再以 css 修饰前台的布局就 OK 了,下面我们还要实现跳转的功能。

jQuery 代码

既然是输入页码跳转,那肯定要用到 js。下面的 js 代码来自阿树博客,请将 js 代码加入到 js 文件中即可,当然需要 jquery 支持。思路很简单,就是在点击“跳转”按钮的时候,获取输入的页码,再获取任意一个页码链接,将页码数字替换掉即可。本教程的页码链接类型为:http://www.demo/******/page/4 这种,如果你的不是这种,请修改下面 js 里面的页码替换部分。

  1.     jQuery(document).ready( function($){
  2.       //.page_nav a.go_btn为确认按钮,点击执行
  3.       $('.page_nav a.go_btn').on('click',function(event){
  4.         event.preventDefault(); //取消默认动作
  5.         page_input = $('#page_input'); //获取输入框的值
  6.         page_max = page_input.attr('max'); //获取输入框中的max属性的值,就是最大页码
  7.         if(page_input.val()=="){
  8.           alert('请输入页码');
  9.           return false;
  10.         }
  11.         if((page_input.val()<1) || (page_input.val()>page_max)){
  12.           alert('请输入1至' + page_max + '之间的数字');
  13.           return false;
  14.         }
  15.         page_links = $('.page-nav a').eq(1).attr('href'); //从页码列表中获取任意一个链接,此处获取第一个链接
  16.         go_link = page_links.replace(//page/([0-9]{1,})/g, '/page/'+page_input.val()); //将页码数字替换
  17.         location.href = go_link; //跳转
  18.       });
  19.       $.fn.onlyNum = function onlyNum() {
  20.          $(this).keypress(function (event) {
  21.              var eventObj = event || e;
  22.              var keyCode = eventObj.keyCode || eventObj.which;
  23.              if ((keyCode >= 48 && keyCode <= 57))
  24.                return true;
  25.              else
  26.                  return false;
  27.          }).focus(function () {
  28.          //禁用输入法
  29.              this.style.imeMode = 'disabled';
  30.          }).bind("paste", function () {
  31.          //获取剪切板的内容
  32.              var clipboard = window.clipboardData.getData("Text");
  33.              if (/^d+$/.test(clipboard))
  34.                  return true;
  35.              else
  36.                  return false;
  37.          });
  38.      };
  39.      //#page_input为页码输入框
  40.      $('#page_input').onlyNum();
  41.     });

这段 jQuery 已经集成了对应的分页跳转功能以及让输入框只能输入数字的限制,这样用户体验应该会比较棒。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/88993

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注