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

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

如何实现WordPress移动端输入页码跳转功能-第1张-boke112百科(boke112.com)

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

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

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

1、找到以下代码

.pages,.screen-reader-text

修改为

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

2、找到以下代码

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

修改为

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

3、找到以下代码

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

在后面增加以下代码

.current-page-selector {padding: 0px 5px;font-size: 11px;margin: 0;text-align: center;background-color:#fff;}
.pagesym{display:none}

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

找到以下代码

if ( $i > 0 && $i <= $max_page ) $i == $paged ? print “第{$i}页” : p_link( $i );

修改为

if ( $i > 0 && $i <= $max_page ) $i == $paged ? print “第<input class=’current-page-selector’ id=’current-page-selector’ type=’text’ max='{$max_page}’ size=’2′ name=’paged_selectors’ value='{$i}’>{$i}页” : p_link( $i );

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

找到以下代码

$(document).ready(function(){

在下方增加以下代码

// 移动端输入页码跳转
$(‘#current-page-selector’).keypress(function(event){
var page_input = $(this).val();
var page_max = $(this).attr(‘max’);
if(event.keyCode == ’13’)
{
if (!(/(^[1-9]\d*$)/.test(page_input))) {
　　　　　　alert(‘请输入正整数页码！’);
　　　　　　return false;
　　　　}
if(page_input ==”){
alert(‘请输入正整数页码！’);
return false;
}
if(page_input<1 || page_input>Number(page_max)){
alert(‘请输入1至’ + page_max +’之间的正整数页码！’);
return false;
}
page_links = $(‘.nav-links a’).eq(2).attr(‘href’);//从页码列表中获取任意一个链接,此处获取第二个链接
go_link = page_links.replace(/\/page\/([0-9]{1,})/g, ‘/page/’+page_input); //将页码数字替换
location.href = go_link; //跳转
}
});

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

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

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

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

相关文章

最新文章

热门标签