WordPress手动输入页号跳转翻页的方法(简单版)

详情
评论
问答
赞助

您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。

大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。

本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。

随着时间的推移,维持网站的运行需要支出高昂的服务器和带宽费用。为了能继续坚持免费做下去,如果觉得文章对您有用,希望您能动动发财的小手免费赞助狐狸,给狐狸加油打气!激励狐狸库继续创作下去!谢谢!

在互联网的浩瀚海洋中,我们的网站就像一座明亮的灯塔,为无数用户照亮前行的道路。它承载着知识的传递、梦想的交流,以及大家共同的回忆与期待。然而,运营和维护这样一个网站需要投入大量的心血与资金。

现在,您只需通过支付宝扫码领红包,就能轻松成为我们的赞助人。这不仅是一次简单的支持,更是您与网站共同成长的见证。操作简单,打开支付宝,扫描专属二维码,您的每一份心意都将化作网站发展的动力。

您的赞助,能让网站不断升级,提供更优质的服务,给大家带来更好的体验。让我们携手共进,让这座灯塔绽放更耀眼的光芒,照亮更多人的网络世界 。

下面是免费赞助的方法和流程

  1. 下面图一是本站的支付宝每日领红包二维码,使用支付宝扫描二维码后会自动显示红包金额,有任意小额金额红包。
  2. 点击“去使用”,再扫描第三张图的二维码进行付款即可。
  3. 上面扫到多少红包就输入多少金额,红包会自动抵扣金额,所以不需要额外费用。
  4. 如需赞助自定义金额请到【赞助狐狸】页面进行赞助。
  5. 这个扫码红包是每天都可以领的哦,支持同账号重复,每天花一分钟时间即可免费支持本站!
扫码红包 红包图 扫码支付

 

WordPress手动输入页号跳转翻页的方法(简单版)-狐狸库
wordpress

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>

添加显示当前页号,输入非数字字符或超出最大页数及小于数字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中。

调用代码

<?php zm_page_nav_form(); ?>

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

附加样式代码(如不需要可以自己写)

WordPress手动输入页号跳转翻页的方法(简单版)-狐狸库

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

.zm-page-nav-form {
 width: 126px;
 font-size: 16px;
 margin: 0 auto;
}
 
.zm-input-number:focus, 
.zm-input-number:hover {
 background: #ddd;
}
 
.zm-input-number {
 float: left;
 width: 62px;
 height: 62px;
 text-align: center;
 margin: 0 !important;
 border: 1px solid #444 !important;
 border-right: none !important;
}
 
.zm-page-button-box {
 position: relative;
 float: left;
}
 
.zm-page-button-box:after {
 position: absolute;
 top: 18px;
 right: 16px;
 content: \"跳转\";
 color: #fff;
 font-size: 15px;
 pointer-events: none;
}
 
.zm-page-button {
 float: left;
 width: 62px !important;
 height: 62px;
 text-align: center;
 background: #666 !important;
 border: 1px solid #444 !important;
}
 
.zm-page-button:hover {
 background: #444 !important;
 border: 1px solid #444 !important;
}
 
 
/** 隐藏箭头 **/
.zm-page-nav-form input::-webkit-outer-spin-button, 
.zm-page-nav-form input::-webkit-inner-spin-button {
 -webkit-appearance: none;
}
 
.zm-page-nav-form input[type=\"number\"]{
 -moz-appearance: textfield;
}

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


温馨提示:本文最后更新于2022/10/20 13:10:22。若文章内容或图片失效,请留言联系站长反馈!
© 版权声明
THE END
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容