在Wordpress的文章页面获取上一页及下一页的链接URL地址，实现通过键盘的前进后退键进行翻页

柔光的暖阳◎ 2022-06-09 03:12 278阅读 0赞

先说明一下，我使用的WORDPRESS版本是3.4.1，使用的模板主题是[NeoEase][]开发的iNove，可以点击[这里][Link 1]进行下载。我之所以想要在文章页面获取上一下及下一页的地址，只是想要实现一个功能，增加使用键盘的前进"->"及后退"<-"按钮进行翻页的功能，这个功能虽然简单，但是却比较实用，可以省去我拖拉页面到底部，然后再去点击下一页的时间，以下我就讲一下我的实现步骤。打开主题页面下的single.php这个文件，找到以下内容：

<div id="postnavi">
    	<span class="prev"><?php next_post_link('%link') ?></span>
    	<span class="next"><?php previous_post_link('%link') ?></span>
    	<div class="fixed"></div>
    </div>

将其修改为：

<div id="postnavi">
    	<span class="prev" id="prePage"><?php next_post_link('%link') ?></span>
    	<span class="next" id="nextPage"><?php previous_post_link('%link') ?></span>
    	<div class="fixed"></div>
    </div>

在文件的末尾增加如下JS：

<script language="javascript">
    	document.οnkeydοwn=gotoPage;
    	var preUrl = document.getElementById("prePage").innerHTML.toLowerCase();
    	var start = preUrl.indexOf('http');
    	var end = preUrl.indexOf('" rel');
    	preUrl = preUrl.substring(start,end);
    	
    	var nextUrl = document.getElementById("nextPage").innerHTML.toLowerCase();
    	var start = nextUrl.indexOf('http');
    	var end = nextUrl.indexOf('" rel');
    	nextUrl = nextUrl.substring(start,end);
    	function gotoPage(event) 
    	{
    		event = event ? event : (window.event ? window.event : null);
    		if (event.keyCode==37) 
    		{
    			if (preUrl!=''){
    				window.location=preUrl;
    			}
    			else{
    				alert('This is already the first page."');
    			}
    		}
    		if (event.keyCode==39) 
    		{
    			if (nextUrl!=''){
    				window.location=nextUrl;
    			}
    			else{
    				alert('This is already the last page."');
    			}
    		}
    	}
    </script>

OK，搞定收工，这下就可能通过键盘的前进后退键进行翻页了。

本文出自：**[冯立彬的博客][Link 2]** ([http://www.fenglibin.com][Link 2])，原文地址：[http://www.fenglibin.com/get\_pre\_and\_next\_page\_url\_in\_wordpress.html][http_www.fenglibin.com_get_pre_and_next_page_url_in_wordpress.html]

[NeoEase]: http://www.neoease.com/
[Link 1]: http://wordpress.org/extend/themes/download/inove.1.4.6.zip
[Link 2]: http://www.fenglibin.com
[http_www.fenglibin.com_get_pre_and_next_page_url_in_wordpress.html]: http://www.fenglibin.com/get_pre_and_next_page_url_in_wordpress.html

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP实现分页功能（一）上一页/下一页（含有分类功能的分页）

以下方法是基于THINKPHP5框架开发，实现上一页/下一页按钮式的分页功能，如下图 ![在这里插入图片描述][20200917151500115.png_pic_cent

我会带着你远行/ 2022年12月08日 04:18/ 0 赞/ 391 阅读

相关 tp5 实现文章上一篇和下一篇翻页

文章翻页功能，为了避免id加一和减一不存在的情况，通过tp5 where条件查询实现同时查出所有id的集合存放在数组，当id为第一个的时候，最后一篇即上一篇，当id为最后一

太过爱你忘了你带给我的痛/ 2022年11月27日 01:55/ 0 赞/ 147 阅读

相关 php上下页翻页,php实现网页上一页下一页翻页过程详解

前言这几天做项目因为数据太多，需要对信息进行上下翻页展示，就自己写了翻页的代码大致功能就是页面只显示几条信息，按上一页、下一页切换内容，当显示第一页时上一页和首页选项不

╰+攻爆jí腚メ/ 2022年11月19日 04:05/ 0 赞/ 296 阅读

相关 swiper-添加控制按钮（可以控制翻页上一页和下一页）

本次内容我们介绍在swiper页面当中添加控制按钮（可以控制翻页上一页和下一页）。首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div（.swipe

川长思鸟来/ 2022年09月23日 04:00/ 0 赞/ 1180 阅读

相关在Wordpress的文章页面获取上一页及下一页的链接URL地址，实现通过键盘的前进后退键进行翻页

先说明一下，我使用的WORDPRESS版本是3.4.1，使用的模板主题是[NeoEase][]开发的iNove，可以点击[这里][Link 1]进行下载。我之所以想要在文章页面

柔光的暖阳◎/ 2022年06月09日 03:12/ 0 赞/ 279 阅读

相关 js获取上一页下一页地址,当前页地址前进和后退

`history.back(-1)` `//直接返回当前页的上一页，数据全部消息，是个新页面` `history.go(-1)` `//也是返回当前页的上一页，不过表单里的数

拼搏现实的明天。/ 2022年06月03日 07:30/ 0 赞/ 241 阅读

相关获取上一页面的URL和本页的URL

1、获取上一个网页的URL： String url=request.getHeader("Referer"); 2、获取本网页的URL： String url=re

港控/mmm°/ 2022年05月22日 05:44/ 0 赞/ 219 阅读

相关在Wordpress的文章页面获取上一页及下一页的链接URL地址，实现通过键盘的前进后退键进行翻页 ...

先说明一下，我使用的WORDPRESS版本是3.4.1，使用的模板主题是[NeoEase][] 开发的iNove，可以点击[这里][Link 1] 进行下载。我之所以想要在文

本是古典何须时尚/ 2022年04月15日 00:29/ 0 赞/ 214 阅读

相关每日一bug：列表页的翻页功能

产品列表页，订单列表页都有一个共同的功能，就是翻页功能。翻页功能很简单，点击下一页，或者具体的页数，就加载相应的数据显示就可以了；就因为简单，往往也是很容易忽略测试的一个功

ゞ浴缸里的玫瑰/ 2022年01月22日 03:25/ 0 赞/ 346 阅读

相关 wordpress实现文章页上一篇/下一篇功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

雨点打透心脏的1/2处/ 2021年09月08日 17:06/ 0 赞/ 509 阅读