WordPress实现箭头翻页功能(代码版)

2012-11-07 840 0

用键盘代替鼠标操作,实现wordpress翻页,最简单的方法是使用插件实现,下面主要介绍下如何通过代码实现这个效果。

用键盘实现wordpress翻页效果是通过一段js代码来实现的,将以下代码插入到single.php文件内,IE下可以实现按“→”或者“pagedown”切换到下一篇文章,按“←”或者“pageup”切换到上一篇文章。可惜的是,该代码也仅限于在IE浏览器下有效,Firefox等浏览器下使用键盘翻页是没有任何反应的。

document.onkeydown = chang_page;function chang_page() {
if (event.keyCode == 37 || event.keyCode == 33) location = '';
if (event.keyCode == 39 || event.keyCode == 34) location = '';
}

现在只在IE浏览器下有效,那如何才能兼容其它浏览器呢?

兼容其它浏览器

我们首先了解一下如何初始化该键盘事件,基本语句如下:

document.onkeydown = chang_page; function chang_page()

当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫chang_page()函数。

目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的,而FireFox和Opera是基于Mozilla内核的。首先先说说FF,因为FireFox的实现要比IE麻烦一点点。我们定义的chang_page()函数可以设置一个隐藏变量,一般我们使用字母“e”来表示这个变量:

chang_page(e)

变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性:

e.which

而IE不需要e变量,用event.keyCode来代替e.which

var keycode = event.keyCode;

搞明白上面的区别和用法,接下来想办法整合一下,让代码既适用于IE,又能在FF下使用:

document.onkeydown = chang_page;function chang_page(e) {
var e = e || event,
keycode = e.which || e.keyCode;
if (keycode == 37 || keycode == 33) location = '';
if (keycode == 39 || keycode == 34) location = '';
}

将上面给出的翻页代码复制到single.php内保存,无论是IE还是FF,均能完美实现键盘翻页。说明:get_adjacent_post()函数中的42是指排除分类ID为42的文章——也就是说,在翻页过程中会自动跳过该分类下的文章(因为本站ID=42的分类被用于改造个人微博,并不想与文章一起翻页展示)。如果没有特殊要求,这个参数留空即可,读者可根据个人博客的实际需要自行修改。

文章列表页实现键盘翻页

文章列表页面(如首页、分类页面、存档页面等)是否也可以实现键盘翻页呢?我们只需使用get_previous_posts_page_link()和get_next_posts_page_link()代替上述代码中的get_adjacent_post()函数即可达到目的:

document.onkeydown = chang_page;function chang_page(e) {
var e = e || event,
keycode = e.which || e.keyCode;
if (keycode == 37 || keycode == 33) location = '';
if (keycode == 39 || keycode == 34) location = '';
}

将上面的代码放置到相应页面,自己试试吧!

转载至:http://www.chenwentao.com.cn/wordpress-tech/105

相关文章

MySQL 设置优化记录
来自 WPJAM 的修改,给图片文件名增加时间戳
wordpress 博客使用 CloudFlare 的页面规则缓存设置教程
Better Search Replace – 简单强大易用的数据库替换工具
WordPress获取文章所有图片和图片数量
删除 WooCommerce 产品页中的简介 – Remove Woocommerce Product Short Description

发布评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据