---
title: "WordPress实现箭头翻页功能（代码版）"
url: "https://yjyj.net/learn/wordpress-learn/1697.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2012-11-07T00:32:29+08:00"
updated_at: "2013-01-04T17:33:39+08:00"
categories: "WordPress 学习"
tags: "JavaScript交互, WordPress优化, WordPress开发, 前端开发实战"
summary: "本文讲解如何在 WordPress 文章页与列表页用键盘方向键实现翻页，重点解决单篇上一篇/下一篇切换与首页、分类、存档页分页跳转。通过兼容 IE 与 Firefox 的 JavaScript 事件写法，给出可直接放入模板的实战代码，适合想提升浏览体验的站长快速上手。"
source: "生猛大蝦 (https://yjyj.net)"
---

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

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/wordpress-learn/1697.html) · 作者：小 虾 · 发布时间：2012-11-07

## 30 秒核心看点 (TL;DR)

- 单篇文章页可用方向键和 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 统一取值。

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

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)