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


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


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

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

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

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

完整代码


 
  1. function zm_page_nav_form() {
  2. global $wp_query;
  3. $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
  4. $page_max_num = $wp_query->max_num_pages;
  5. if ( $page_max_num > 1 ) :
  6. ?>
  7.  
  8. <form class="zm-page-nav-form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="get">
  9. <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" />
  10. <?php if ( is_search() ) { ?>
  11. <input type="hidden" id="s" name="s" value="<?php echo get_search_query(); ?>" />
  12. <?php } ?>
  13. <div class="zm-page-button-box"><input class="zm-page-button" value="" type="submit"></div>
  14. <div style="clear:both;"></div>
  15. </form>
  16.  
  17. <?php endif;
  18. }

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

调用代码


 
  1. <?php zm_page_nav_form(); ?>

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

配套样式

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

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

 

 

 
  1. .zm-page-nav-form {
  2. width: 126px;
  3. font-size: 16px;
  4. margin: 0 auto;
  5. }
  6.  
  7. .zm-input-number:focus,
  8. .zm-input-number:hover {
  9. background: #ddd;
  10. }
  11.  
  12. .zm-input-number {
  13. float: left;
  14. width: 62px;
  15. height: 62px;
  16. text-align: center;
  17. margin: 0 !important;
  18. border: 1px solid #444 !important;
  19. border-right: none !important;
  20. }
  21.  
  22. .zm-page-button-box {
  23. position: relative;
  24. float: left;
  25. }
  26.  
  27. .zm-page-button-box:after {
  28. position: absolute;
  29. top: 18px;
  30. right: 16px;
  31. content: "跳转";
  32. color: #fff;
  33. font-size: 15px;
  34. pointer-events: none;
  35. }
  36.  
  37. .zm-page-button {
  38. float: left;
  39. width: 62px !important;
  40. height: 62px;
  41. text-align: center;
  42. background: #666 !important;
  43. border: 1px solid #444 !important;
  44. }
  45.  
  46. .zm-page-button:hover {
  47. background: #444 !important;
  48. border: 1px solid #444 !important;
  49. }
  50.  
  51.  
  52. /** 隐藏箭头 **/
  53. .zm-page-nav-form input::-webkit-outer-spin-button,
  54. .zm-page-nav-form input::-webkit-inner-spin-button {
  55. -webkit-appearance: none;
  56. }
  57.  
  58. .zm-page-nav-form input[type="number"]{
  59. -moz-appearance: textfield;
  60. }

 

 

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

 

打赏