`
56553655
  • 浏览: 198041 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

阅读更多

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

  1. <div id= "postnavi" >  
  2.     <span class = "prev" ><?php next_post_link( '%link' ) ?></span>  
  3.     <span class = "next" ><?php previous_post_link( '%link' ) ?></span>  
  4.     <div class = "fixed" ></div>  
  5. </div>  

 

将其修改为:

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

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

[javascript] view plain copy
  1. <script language= "javascript" >  
  2.     document.onkeydown=gotoPage;  
  3.     var  preUrl = document.getElementById( "prePage" ).innerHTML.toLowerCase();  
  4.     var  start = preUrl.indexOf( 'http' );  
  5.     var  end = preUrl.indexOf( '" rel' );  
  6.     preUrl = preUrl.substring(start,end);  
  7.       
  8.     var  nextUrl = document.getElementById( "nextPage" ).innerHTML.toLowerCase();  
  9.     var  start = nextUrl.indexOf( 'http' );  
  10.     var  end = nextUrl.indexOf( '" rel' );  
  11.     nextUrl = nextUrl.substring(start,end);  
  12.     function  gotoPage(event)   
  13.     {  
  14.         event = event ? event : (window.event ? window.event : null );  
  15.         if  (event.keyCode==37)   
  16.         {  
  17.             if  (preUrl!= '' ){  
  18.                 window.location=preUrl;  
  19.             }  
  20.             else {  
  21.                 alert('This is already the first page."' );  
  22.             }  
  23.         }  
  24.         if  (event.keyCode==39)   
  25.         {  
  26.             if  (nextUrl!= '' ){  
  27.                 window.location=nextUrl;  
  28.             }  
  29.             else {  
  30.                 alert('This is already the last page."' );  
  31.             }  
  32.         }  
  33.     }  
  34. </script>  

 

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

本文出自:冯立彬的博客 (http://www.fenglibin.com ),原文地址:http://www.fenglibin.com/get_pre_and_next_page_url_in_wordpress.html

分享到:
评论

相关推荐

    WordPress 单页面上一页下一页的实现方法【附代码】

    WordPress的文章页页有实现上一篇下一篇的功能函数,不过我们想在单页page.php里面实现上一页下一页的功能,previous_post_link()和next_post_link() 函数还不能完全满足我的需要,所以就自己写函数实现。...

    WordPress获取当前页面URL地址的方法

    主要为大家介绍了WordPress获取当前页面URL地址的方法,给出了WordPress原生方法与自定义方法,是非常实用的技巧,需要的朋友可以参考下

    wordpress利用键盘左右键实现上下翻页的方法

    主要为大家介绍了wordpress利用键盘左右键实现上下翻页的方法,涉及针对js脚本的调用技巧,是非常实用的技巧,需要的朋友可以参考下

    WordPress中获取页面链接和标题的相关PHP函数用法解析

    主要介绍了WordPress中获取页面链接和标题的相关PHP函数用法解析,分别为get_permalink()和wp_title()函数的使用,需要的朋友可以参考下

    wordpress独立下载页面插件:xydown

    一直是个迷,有人说是在子目录新建立一个wordpress站点,但是事实上并不是这样,因为这样维护成本很大,而且还会增加服务器的负载,得不偿失。这些大牛的网站如异次元都是使用php动态生成的一个页面,通过伪静态处理...

    wordpress独立下载页面插件 v1.2.zip

    wordpress独立下载页面插件是一款应用于wordpress的下载页插件。 wordpress独立下载页面插件插件特色 1、全面兼容wordpress3.9以上系统 2、支持各种主题,保证兼容性 3、独立的下载页面方便自由化定制,插入广告...

    WordPress文章配图插件

    支持在文章内容页显示缩略图。 如果文章有缩略图,则会显示文章原缩略图。只有文章没有缩略图,才会显示插件自动获取的缩略图。 如果文章内容没有图片,可以配置是否在内容页显示缩略图,让文章图文并茂。 只有...

    WordPress漂亮的横幅翻页插件PageEar

    看到这个横幅翻页插件,我的第一印象就把它和分页插件给搞混了,呵呵,其实,它与分页插件是完全不同的,这款插件比较炫酷,此插件的效果是,在首页左/右上角掀起一个书页一般的小角,当鼠标移上去的时候,就会掀起...

    WordPress优化博客内部链接插件

    文章中添加内部链接,无非是手动添加内部链接,但这样比较繁琐,前台搜索文章、关键词,然后,后台进行添加内部链接,前后台的来回奔波,搜索、添加,这些工作对于Blooger来说,不能不说是一种折磨。有难处,就必有...

    wordpress获取文章链接函数:get_permalink()

    注意,在文章型页面(文章索引、存档等)的主循环外使用该标签时,如果没有指定ID参数,该标签将返回循环中最后一篇文章的URL,而不是当前页面的固定链接。 【函数用法】 【参数说明】 $id (mixed) (可选)文章或者...

    wordpress上一页下一页无插件分页函数实例

    主要为大家介绍了wordpress上一页下一页无插件分页函数,讲述了两个不同的分页函数实例,可适用于不同的应用场合,非常具有实用价值,需要的朋友可以参考下

    WordPress添加链接与版权插件Add Post URL

    如果你的博客中有很多质量比较高的好文章,那么它被转载的概率是非常的大,文章被转载是我们所期望的,可文章被转载后被稍加修改,就变成别人的文章了,虽然,我们对于这样的行为没有十分有效的办法,但是,我们最...

    添加关键词链接插件WordPress keyword Link

    前面介绍的Simple Link插件,walklty这位网友使用后发现有写问题,所以,重新找了款内部链接插件WordPress keyword Link,这款插件同样也是国人写的一款自动添加关键词链接的插件,内链优化这类的插件比较多,选这款...

    WordPress博客独立资源下载页面插件-Xydown美化

    一款Wordpress的独立下载页面插件,主要适用于wp建站用户使用,有些用户在发布文章的时候想要添加一些下载资源,使用这款插件可以把下载的内容独立出来,支持添加本地下载或者多种网盘的网址,并且可以自定义文件...

    xydown独立下载页面插件 wordpress下载单页插件免费下载

    xydown独立下载页面插件 特色 1、hyyxsoft全面兼容wordpress3.cn9以上系统 2、支持各种主题,保证兼容性 3、独立的下载页面方便自由化定制,插入广告 4、独立的查看演示页面,方便插入广告和自由化定制 5、包含...

    wordpress文章同步微信插件

    自己在用的wordpress微信机器人插件,可同步wordpress文章内容,亲测可用!后台上传后按照说明设置。

    wordpress技巧:获取文章的第一个链接地址

    前面我们讲了wordpress获取文章中的第一张图片的方法,接下来我为大家介绍如何在wordpress中获取文章的第一个链接,方法也很简单,将如下函数添加至你主题的functions.php文件中,如何在模板文件的循环(Loop)中...

Global site tag (gtag.js) - Google Analytics