首页 / WordPress开发 / 键盘操作代替鼠标，实现WordPress翻页

键盘操作代替鼠标，实现WordPress翻页

    • 珂李斯

    发布于

    by

         鼠标点击WordPress博客下方的页码导航来翻页，很麻烦？如果使用键盘的翻页键或左右箭头键来实现翻…

         鼠标点击WordPress博客下方的页码导航来翻页，很麻烦？如果使用键盘的翻页键或左右箭头键来实现翻页，你觉得是不是比用鼠标更方便一些呢？有疑问的童鞋请自觉在最百科体验一下利用键盘进行翻页的效果吧！

         昨日偶然看到中关村在线的文章内分页增加了对键盘翻页的支持，效果很不错。查看了一下源码，和自己想的一样，这个效果是通过一段js代码来实现的。那么WordPress是否也能实现这个翻页效果呢？

         照例先放狗搜，果不其然，《WordPress 帖内 左右 翻页 代码 JS》就给我们提供了这么一段js：

    document.onkeydown = chang_page;
function chang_page() {
    if (event.keyCode == 37 || event.keyCode == 33)
        location = "<?php echo get_permalink(get_adjacent_post(false, '', false)); ?>";
    if (event.keyCode == 39 || event.keyCode == 34)
        location = "<?php echo get_permalink(get_adjacent_post(false, '', true)); ?>";
}

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

    如何兼容

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

    document.onkeydown = chang_page;

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

         目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的，也就是Trident，而FireFox是基于Gecko内核的。首先说说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 = "<?php echo get_permalink(get_adjacent_post(false, '42', false)); ?>";
    if (keycode == 39 || keycode == 34)
        location = "<?php echo get_permalink(get_adjacent_post(false, '42', true)); ?>";
}

         将上面给出的翻页代码复制到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 = "<?php echo get_previous_posts_page_link(); ?>";
    if (keycode == 39 || keycode == 34)
        location = "<?php echo get_next_posts_page_link(); ?>";
}

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

    此处省略n个字…

    感谢最百科的投稿，本文略有删改；
    原文链接：http://www.zuibaike.com/2011/05/04/WordPress-keyboard-pagenavi/

    — 完 —

    类别：WordPress开发、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT


  • 评论功能已经关闭!