如何实现WordPress移动端输入页码跳转功能

投稿   懿古今  2016-12-09 07:19:31  206 人阅读  9 条评论

现在很多WordPress主题的移动端的文章列表页的翻页效果都不太理想,要么就是跟PC端的样式一样,但是在移动端显示不太美观;要么就是移动端和PC端分开,但是移动端的翻页功能也不太理想。就好比懿古今使用的Nana主题,移动端的翻页功能就不理想,需要一页一页地翻看,非常不人性化。所以决定优化Nana主题的移动端翻页功能,即是可以直接输入页码跳转到相应分页中。

如何实现WordPress移动端输入页码跳转功能

本文以Nana主题为例说明(同样适用于懿古今主题),其他主题请自行参考折腾。

Nana主题移动端增加输入页码跳转功能步骤:

一、修改主题文件夹中的style.css文件

1、找到以下代码

  1. .pages,.screen-reader-text

修改为

  1. .pages,.screen-reader-text,.current-page-selector

2、找到以下代码

  1. .page-numbers{display:none;padding:5px;line-height:25px}

修改为

  1. .page-numbers{display:none;padding:4px;line-height:25px}

3、找到以下代码

  1. @media screen and (max-width:550px){

在后面增加以下代码

  1. .current-page-selector {padding0px 5px;font-size11px;margin: 0;text-aligncenter;background-color:#fff;}
  2. .pagesym{display:none}

 二、修改Nana\inc\functions\pagenavi.php文件

找到以下代码

  1. if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'><span class='pages'>第</span>{$i}<span class='pages'>页</span></span>" : p_link( $i );

修改为

  1. if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'><span class='pages'>第</span><input class='current-page-selector' id='current-page-selector' type='text' max='{$max_page}' size='2' name='paged_selectors' value='{$i}'><span class='pagesym'>{$i}</span><span class='pages'>页</span></span>" : p_link( $i );

三、修改Nana\js\script.js文件

找到以下代码

  1. $(document).ready(function(){

在下方增加以下代码

  1. // 移动端输入页码跳转    
  2. $('#current-page-selector').keypress(function(event){
  3.     var page_input = $(this).val();
  4.     var page_max = $(this).attr('max');
  5.     if(event.keyCode == '13')
  6.     {
  7.         if (!(/(^[1-9]\d*$)/.test(page_input))) {
  8.       alert('请输入正整数页码!');
  9.       return false;
  10.     }
  11.         if(page_input ==''){
  12.             alert('请输入正整数页码!');
  13.             return false;
  14.         }
  15.         if(page_input<1 || page_input>Number(page_max)){
  16.             alert('请输入1至' + page_max +'之间的正整数页码!');
  17.         return false;
  18.         }
  19.         page_links = $('.nav-links a').eq(2).attr('href');//从页码列表中获取任意一个链接,此处获取第二个链接
  20.         go_link = page_links.replace(/\/page\/([0-9]{1,})/g, '/page/'+page_input); //将页码数字替换
  21.         location.href = go_link; //跳转   
  22.     }
  23. });

说明:这个JS代码里面已经对输入的值进行正整数判断,如果输入的值不是正整数,或者小于1或大于总页数都会弹出信息框提示。

至此,Nana主题的移动端翻页功能就已经有了输入页码按回车键(手机端按输入法上面的开始或其他回车键)即可自动跳转到指定页码的分页中,再也不用一直按翻页键一页一页地翻看了。

赞赏作者

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:http://yigujin.cn/1027.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 明月登楼的博客
    明月登楼的博客 【队长】 @回复

    感觉在移动端,都是看完就走的,很少会关注这样的细节的!

  2. 木庄网络博客
    木庄网络博客 【队长】 @回复

    已收藏~已收藏~

  3. 金榜台博客
    金榜台博客 【市长】 @回复

    来看看,这个功能挺不错的

  4. 动感单车
    动感单车 【省长】 @回复

    这个用在PC端也是很不错的,既简洁并且使用起来方便快捷!

  5. 雅兮网
    雅兮网 【省长】 @回复

    这个号 WordPress做的太粗糙了 还得自己上手

  6. Koolight
    Koolight 【省长】 @回复

    跳码是个很高大上的发明啊!

  7. 李主席
    李主席 【村长】 @回复

    [呲牙] 会集成到下一个NANA版本吗?