WordPress教程

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(); ?>


样式是依据 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.     }

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

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

已有 253 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!