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

最新推荐文章于 2023-11-26 22:29:40 发布

来一下吧

最新推荐文章于 2023-11-26 22:29:40 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fdyufgf/article/details/86672902

本文详细介绍如何在WordPress 3.4.1版本的iNove主题中，通过修改single.php文件并添加JavaScript代码，实现使用键盘方向键进行文章翻页的功能，提高阅读效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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