В этой заметке, я расскажу как легко добавить в ваш блог поддержку 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"