鍵盤操作代替鼠標(biāo)，實(shí)現(xiàn)WordPress翻頁

鼠標(biāo)點(diǎn)擊WordPress博客下方的頁碼導(dǎo)航來翻頁，很麻煩？如果使用鍵盤的翻頁鍵或左右箭頭鍵來實(shí)現(xiàn)翻頁，你覺得是不是比用鼠標(biāo)更方便一些呢？有疑問的童鞋請自覺在最百科體驗(yàn)一下利用鍵盤進(jìn)行翻頁的效果吧！

昨日偶然看到中關(guān)村在線的文章內(nèi)分頁增加了對鍵盤翻頁的支持，效果很不錯。查看了一下源碼，和自己想的一樣，這個效果是通過一段js代碼來實(shí)現(xiàn)的。那么WordPress是否也能實(shí)現(xiàn)這個翻頁效果呢？

照例先放狗搜，果不其然，《WordPress 帖內(nèi) 左右 翻頁 代碼 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文件內(nèi)，IE下可以實(shí)現(xiàn)按"→"或者"pagedown"切換到下一篇文章，按"←"或者"pageup"切換到上一篇文章。可惜的是，該代碼也僅限于在IE瀏覽器下有效，F(xiàn)irefox等瀏覽器下使用鍵盤翻頁是沒有任何反應(yīng)的。

如何兼容
我們首先了解一下如何初始化該鍵盤事件，基本語句如下：

document.onkeydown = chang_page;
當(dāng)瀏覽器讀到這個語句時，無論按下鍵盤上的哪個鍵，都將呼叫chang_page()函數(shù)。

目前常用的瀏覽器主要有基于IE和基于Mozilla兩大類。Maxthon是基于IE內(nèi)核的，也就是Trident，而FireFox是基于Gecko內(nèi)核的。首先說說FF，因?yàn)镕ireFox的實(shí)現(xiàn)要比IE麻煩一點(diǎn)點(diǎn)。我們可以給chang_page()函數(shù)添加一個參數(shù)，這里使用字母"e"來表示這個參數(shù)：

chang_page(e)

變量e表示發(fā)生擊鍵事件，尋找是哪個鍵被按下，要使用which這個屬性：

e.which
而IE不需要e變量，用event.keyCode來代替e.which

var keycode = event.keyCode;

搞明白上面的區(qū)別和用法，接下來想辦法整合一下，讓代碼既適用于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)); ?>";
}

將上面給出的翻頁代碼復(fù)制到single.php內(nèi)保存，無論是IE還是FF，均能完美實(shí)現(xiàn)鍵盤翻頁。說明：get_adjacent_post()函數(shù)中的42是指排除分類ID為42的文章——也就是說，在翻頁過程中會自動跳過該分類下的文章（因?yàn)楸菊綢D=42的分類被用于改造個人微博，并不想與文章一起翻頁展示）。如果沒有特殊要求，這個參數(shù)留空即可，讀者可根據(jù)個人博客的實(shí)際需要自行修改。

舉一反一
文章列表頁面（如首頁、分類頁面、存檔頁面等）是否也可以實(shí)現(xiàn)鍵盤翻頁呢？我們只需使用get_previous_posts_page_link()和get_next_posts_page_link()代替上述代碼中的get_adjacent_post()函數(shù)即可達(dá)到目的：

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(); ?>";
}

將上面的代碼放置到相應(yīng)頁面，自己試試吧！

此處省略n個字…

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈