经常有用户问可不可以弄个手动输入页号并实现跳转的翻页功能，很简单，基础代码只有四行：
- <form class="zm-page-nav-form" action="<?php echo $_SERVERw p n['REQUEST_URI'];?>" metA } H X Phod="get">
- <inpuR L .t class="zm-input-number" tyb = \pe="text" size="6" name="paged" />
- <input class="zm-page-button&V 3 c N lquot; value="转到" type="submit" >
- </fors i F V xm>
代码取自一款叫智能分页的插件：wp smart pagination。
原代码缺点：不v G ; F T能显示当前的页号，输入不{ X 7 %存在的页号直接跳转到 404，不支持搜索翻页。我在此基础上修改完善了一下代码，添加显示当前页号，输入非数字字符或超出最大& t : = Y 5页数及小于数字 1 禁止跳转，支持搜索结果Q v { e = @页面翻页，点击输入框自动清除当前页号数字，方便输入页号{ v A o G l。
完整代码
- function zm_page_nav_form() {
- global $wp_query;
- $paged = get_quE R 5 P ] )ery_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
- $page_max_9 L w ! K 5 ~num = $wp_query->max_N v l 1num_pages;
- if ( $page_max_num > 1 ) :
- ?>
- <form class="zm-page-nav-form" action="<?php $_SE] n p 5RVER&D } y j#091;'REQUEST_URI'w p n } 3 p]; ?>" method="get">
- <input class="zm-input-number" type="number" autp e X s %ocomplete="off" min="1" max="<?php echo $page_max_num; ?&[ q /gt;" onbJ e r \ ? s Nlur="if(this.value==''){this.value='<?php echo $paged; ?>';}" onfocus="if(this.value=='<?s U Y #php echo $paged; ?>'){this.value='';}= 7 u" value="<?php echo $paged; ?>" name="paged" />
- <?php if ( is_search() ) { ?>
- <input type="hidden" id="s" name="s" value="<?php echo get_search_query(2 U [041;; ?>" /f R ! x c Y 1 z _>+ Q _ + T } b
- <?php } ?>
- <div class=&quor c 6 M 5 ] Tt;zm-pag: F 0 * e I x C ue-button-box"><input class="zm-page-button" valD b f A ; ^ [ 3 vue="" type="su& ( i v a / w =bmit"></div>
- <div style="cle4 = u \ I D n + oar:both;"></div>
- <4 : 2 W Y/form>
- <?php endif;
- }
将代码添加到当前主题函数模板 functions.php 中。
调用代码
- <?php zm_page_M k R D + ^ : lnav_form(); ?>
样式是依据 WP 默认主题 Twenty Twenty-One 写的，并不太适合其它主题，可根据自己主题样式做相应修改，想显示输入框的箭头，删除最后有注释的隐藏代码。
- .zm-page-nav; { \ f A /-form {
- width: 126px;
- font-sizef W h { 4 -: 16pxD P 0;
- margin: 0 auto;
- }
- .zm-Y m O I m t ^ h Finput-number:focus,
- .zm-input-nu$ - a 8 N f X gmber:hover {
- background: #ddd;
- }
- .zm-. x G { Linput-number {
- float: left;
- width: 62px;
- height: 62pxL s o ? 0 1;
- text-align: center;
- mar5 v \ ! x @gin: 0 !importaY H n _nt;
- border: 1p\ t 3 p 6 r & @x solid #444 !important;
- border-right: none !important;
- }
- .zm-page-button-box {
- position: re& 7 7lative;
- float: left;
- }
- .zm-page-button-box:after {
- position: absol~ T ; t O K a kute;
- top: 18px;
- ri` Y _ T rght: 16px;
- content( ] ! w /: "跳转f k L";
- color: #fff;
- font-size: 15pT d n % n = Wx;
- pointer-events: none;
- }
- .zm-2 } * V * .pagej M ] , ; O ? }-button {
- float: left;
- width:) Z J k ) # 4 # 62px !impor1 # [ : C U W X Stant;
- height5 R c M n: 62px;
- text-align: center;
- bay # 1 w Q |ckground: #666 !imporf T F ; & atant;
- border: 1px solid #44 & L j ( v ] 444 !important;
- &% H H g#125;
- .z, p J 5 c xm-page-button:hoH & ! f Jver {
- background: #444 !important5 6 S 7 a N C;
- border: 1px solid #444 !important;
- }
- /** 隐藏箭头 **/
- .zm-page-nav-form input::-webkit-outer-spin-button,
- .zm-page-nav-form input::-webkit-inner-spin-button {
- -webkit-app1 n B h 1 Oearance: none;
- }
- .zm-page-nav-form input[type="number0 V E O q 1 , u"]{
- -moz-appearance:r B 2 y 1 Y textfield;
- }
手动输入页号功能在桌面端用处不是很大，移动端还是有些用处，可以在移动端只显示翻页按钮，外加手动输入页号，即可方便用户翻页，也可以避免在手机上显示一堆页号影响美观。具体效果可} V \ a V a s U以看我博客的翻页。
