Rpsl

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

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

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

jQuery hotkey

• Скачать
• Демо

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

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

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

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.hotkeys-0.7.9.min.js"></script>

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

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

<script type="text/javascript">
    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;
            });
        }
    });
</script>

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

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

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

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

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