WordPress 最简单的手动输入页号跳转翻页的方法

经常有用户问可不可以弄个手动输入页号并实现跳转的翻页功能，很简单，基础代码只有四行：

<form class="zm-page-nav-form" action="<?php echo $_SERVER['REQUEST_URI'];?>" method="get">
<input class="zm-input-number" type="text" size="6" name="paged" />
<input class="zm-page-button" value="转到" type="submit" >
</form>

代码取自一款叫智能分页的插件：wp smart pagination。

原代码缺点：不能显示当前的页号，输入不存在的页号直接跳转到404，不支持搜索翻页。

我在此基础上修改完善了一下代码，添加显示当前页号，输入非数字字符或超出最大页数及小于数字1禁止跳转，支持搜索结果页面翻页，点击输入框自动清除当前页号数字，方便输入页号。

function zm_page_nav_form() {
global $wp_query;
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$page_max_num = $wp_query->max_num_pages;
if ( $page_max_num > 1 ) :
?>
<form class="zm-page-nav-form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="get">
<input class="zm-input-number" type="number" autocomplete="off" min="1" max="<?php echo $page_max_num; ?>" onblur="if(this.value==''){this.value='<?php echo $paged; ?>';}" onfocus="if(this.value=='<?php echo $paged; ?>'){this.value='';}" value="<?php echo $paged; ?>" name="paged" />
<?php if ( is_search() ) { ?>
<input type="hidden" id="s" name="s" value="<?php echo get_search_query(); ?>" />
<?php } ?>
<div class="zm-page-button-box"><input class="zm-page-button" value="" type="submit"></div>
<div style="clear:both;"></div>
</form>
<?php endif;
}

将代码添加到当前主题函数模板functions.php中。

添加到主题模板翻页代码适当的位置。

样式是依据WP默认主题Twenty Twenty-One写的，并不太适合其它主题，可根据自己主题样式做相应修改，想显示输入框的箭头，删除最后有注释的隐藏代码。

手动输入页号功能在桌面端用处不是很大，移动端还是有些用处，可以在移动端只显示翻页按钮，外加手动输入页号，即可方便用户翻页，也可以避免在手机上显示一堆页号影响美观。具体效果可以看我博客的翻页。

友情链接