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"

Сюда приходят по следующим фразам

, , , ,   7 комментариев   11 мая 2009   CMS  

  • http://barteg.net.ru Retsky

    Тоже делал подобное, но немного иначе, использовал плагин WP Flipper. В нём тоже заявлен листинг по Ctrl+Left, Ctrl+Right, но листается только по клавишам со стрелками %(

    • http://rpsl.info Rpsl

      Ну тут на деле то 10 строчек, зачем лишние плагины вешать.

  • http://wpbook.ru/ nomad

    Даже не знал об этом. Спасибо. Буду пробовать WP Flipper

  • Alexander Maltsev

     RPSL, никак не могу заставить код работать. Не пойму в чём дело. Делаю в локалке на примере простого html-файла — всё работает. На сайте же нет. Вот пример страницы:

    JQuery hotkey как только не подключал, и через header.php напрямую, и через functions.php. Обработчик такой:

    jQuery(document).ready(function(){ var nextlink = jQuery('.nav-next a').attr('href'); var prevlink = jQuery('.nav-previous 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;        });    }});

    • http://blog.rpsl.info Rpsl

       У тебя где то в JS ошибка, может даже не в этом, но суть в том что ломается. Проверяй весь JS по очереди

      • Alexander Maltsev

        Спасибо. Проверил, ошибка в самом коде, обработчике клавиш (http://meninamenino.com/wp-content/themes/twentyten-min/js/common.js). Я и версию JQuery менял — тоже самое. Убираю код взятый из твоего примера: всё работает без ошибок. Вставляю — опять ошибка. Если в /js/common.js меняю строки:
        jQuery('#next').attr('href'); (тут оно ведёт на не существующий id (#next) — то тоже работает. 

        Но как только я меню его на правильный: jQuery('.nav-next a').attr('href'); выдаёт ошибку.

        :(

      • Alexander Maltsev

        Спасибо. Проверил, ошибка в самом коде, обработчике клавиш (http://meninamenino.com/wp-content/themes/twentyten-min/js/common.js). Я и версию JQuery менял — тоже самое. Убираю код взятый из твоего примера: всё работает без ошибок. Вставляю — опять ошибка. Если в /js/common.js меняю строки:
        jQuery('#next').attr('href'); (тут оно ведёт на не существующий id (#next) — то тоже работает. 

        Но как только я меню его на правильный: jQuery('.nav-next a').attr('href'); выдаёт ошибку.

        :(