Hotkeys для wordpress

В этой заметке, я расскажу как легко добавить в ваш блог поддержку hotkey's.

Hotkey - это определенное сочетание клавиш, по нажатию которых происходит определенное действие. Мы уже привыкли использовать ctrl+c/ctrl+v. Тенденции развития интернета диктуют свою моду и многие уже привыкли использовать для перехода между страницами сайта сочетание "ctrl+left" или "ctrl+right".

Для добавления этого функционала, первое что нам потребуется - плагин hotkey для библиотеки jquery.

jQuery hotkey

Теперь о том, как это сделать. У нас есть два варианта:

  • Генерировать код в самом шаблоне с помощью встроенных функций
  • Генерировать код "на лету", с помощью JS

Я выбрал второй вариант, т.к. он мне показался более правильным, во первых мы не напрягаем шаблон лишними вызовами, и главное мы уверенны что будем получать правильные ссылки. Ведь нам нужно на главной странице листать все записи, в категории листать записи категории, а внутри поста листать посты. Таким образом, всё что нам осталось, это добавить в header шаблон (скорее всего header.php) нижеприведенный код.

<script type="text/javascript" src="/js/jquery.hotkeys-0.7.9.min.js" >

Подразумевается, что вы уже скачали библиотеку и положили её в папку /js/ вашей темы. Также, обратите внимание, что код вызова библиотеки должен быть добавлен после вызова самого jQuery.

Далее дописываем наш обработчик.

jQuery(document).ready(function(){
    var nextlink = jQuery('.alignright a').attr('href');
    var prevlink = jQuery('.alignleft a').attr('href');

    if(nextlink != undefined){
        jQuery(document).bind('keydown', 'Ctrl+right', function(){
            location.href=nextlink;
        });
    }

    if(prevlink != undefined){
        jQuery(document).bind('keydown', 'Ctrl+left', function(){
            location.href=prevlink;
        });
    }

});

Теперь главное. Обратите внимание на строки где определяются ссылки.

var nextlink = jQuery('.alignright a').attr('href');
var prevlink = jQuery('.alignleft a').attr('href');

alignright и alignleft это название классов, в которых у меня генерируются ссылки на следующую и предыдущую страницу, так что вам наверняка потребуется поменять эти названия на ваши, в зависимости от используемой вами темы.

Собственно это всё. После проделывания данных ваш блог должен стать на ступеньку ближе к заветному "WEB 2.0".

Живой пример можете посмотреть в моём блоге, нажимая "Ctrl+Left" OR "Ctrl+Right"


blog, javascript, php, web2.0, wordpress