# WordPress实现箭头翻页功能（代码版）

- Link: https://yjyj.net/learn/wordpress-learn/1697.html
- Published: 2012-11-07T00:32:29+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 单篇文章页可用方向键和 PageUp/PageDown 切换上一篇、下一篇。
 * 兼容写法用 e || event 与 e.which || event.keyCode，IE 和 Firefox 都能用。
 * 列表页分页可改用上一页/下一页链接函数，直接套模板即可。

用键盘代替鼠标操作，实现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

❓ 延伸问答与排错指南（FAQ）

WordPress文章页怎么用键盘翻页？

把键盘监听代码放进 single.php，监听左右方向键和 PageUp/PageDown，再根据按键跳转到
上一篇或下一篇文章即可。核心是用 JavaScript 绑定 onkeydown 事件，并在模板里输出对应
链接。

为什么原始代码只在IE下有效？

因为旧写法直接读取 event.keyCode，偏向 IE 的事件模型。要兼容其他浏览器，应把函数
参数写成 e，并用 e = e || event、keycode = e.which || e.keyCode 统一取值。

文章列表页也能做键盘翻页吗？

可以。首页、分类页、存档页这类列表页面，改用上一页和下一页分页链接函数即可实现键盘
翻页。做法和文章页类似，都是监听按键后跳转到对应分页地址。

📚 【[WordPress 学习](https://yjyj.net/category/learn/wordpress-learn)】专栏延伸
阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [修改wordpress全站友情链接仅首页显示](https://yjyj.net/learn/wordpress-learn/1695.html)
 * [去掉Wordpress title中文章标题前的»](https://yjyj.net/learn/wordpress-learn/1687.html)
 * [终于找到一个能用的WordPress不同分类下的文章使用不同样式的模板](https://yjyj.net/learn/wordpress-learn/1700.html)
 * [win2k3+iis下wordpress的伪静态设置httpd.ini](https://yjyj.net/learn/wordpress-learn/1704.html)
 * 热门必读[重置 Mac 的 SMC](https://yjyj.net/learn/7596.html)
 * 热门必读[CSS 盒模型边界重叠 (Margin Collapse) 原理与解决方案](https://yjyj.net/css/3536.html)