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. <form class="zm-page-nav-form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="get">
  8. <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" />
  9. <?php if ( is_search() ) { ?>
  10. <input type="hidden" id="s" name="s" value="<?php echo get_search_query(); ?>" />
  11. <?php } ?>
  12. <div class="zm-page-button-box"><input class="zm-page-button" value="" type="submit"></div>
  13. <div style="clear:both;"></div>
  14. </form>
  15. <?php endif;
  16. }

将代码添加到当前主题函数模板 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. .zm-input-number:focus,
  7. .zm-input-number:hover {
  8. background: #ddd;
  9. }
  10. .zm-input-number {
  11. float: left;
  12. width: 62px;
  13. height: 62px;
  14. text-align: center;
  15. margin: 0 !important;
  16. border: 1px solid #444 !important;
  17. border-right: none !important;
  18. }
  19. .zm-page-button-box {
  20. position: relative;
  21. float: left;
  22. }
  23. .zm-page-button-box:after {
  24. position: absolute;
  25. top: 18px;
  26. right: 16px;
  27. content: "跳转";
  28. color: #fff;
  29. font-size: 15px;
  30. pointer-events: none;
  31. }
  32. .zm-page-button {
  33. float: left;
  34. width: 62px !important;
  35. height: 62px;
  36. text-align: center;
  37. background: #666 !important;
  38. border: 1px solid #444 !important;
  39. }
  40. .zm-page-button:hover {
  41. background: #444 !important;
  42. border: 1px solid #444 !important;
  43. }
  44. /** 隐藏箭头 **/
  45. .zm-page-nav-form input::-webkit-outer-spin-button,
  46. .zm-page-nav-form input::-webkit-inner-spin-button {
  47. -webkit-appearance: none;
  48. }
  49. .zm-page-nav-form input[type="number"]{
  50. -moz-appearance: textfield;
  51. }

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

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 删除未引用或所有TAG标签

2022-4-6 11:13:17

WordPress教程

给WooCommerce的运费(Shipping Method)增加自定义描述字段

2022-4-8 11:01:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索