Как использовать жесты при навигации в постах WordPress

Сегодня мы поговорим о том, как использовать жесты на тачпаде или сенсорном устройстве для навигации в постах и статьях сайта на базе WordPress. Это довольно просто, потому сразу приступим к рассмотрению этой процедуры.

| Демонстрация |

Поскольку вся индустрия веб-дизайна движется в сторону отзывчивого дизайна и верстки, а число посетителей сайтов, которые заходят с мобильных устройств, растет, то разумным будет оснастить ваш сайт одной из таких современных технологий навигации — речь о жестах. Для решения данной задачи будем использовать библиотеку jQuery и старый добрый код на PHP под WordPress.

В качестве демо-версии у нас будет тема, созданная специально для данного поста. Так что давайте, открывайте свой любимый текстовый редактор и начнем!

Шаг 1. Регистрируем и включаем наши скрипты

Для работы мы используем отличный jQuery-плагин для создания навигации при помощи жестов под названием Hammer.js. У него есть все нужные нам функции для навигации по сайту при помощи жестов.

Начнем с того, что отберем все требуемые файлы для того, чтобы на нашем сайте заработала поддержка жестов. Вы можете или скачать эти файлы на свой компьютер, или же использовать их онлайн-версию.

Нам надо будет настроить и включить такие скрипты:

• hammer.js
• query.hammer.js

Содержимое этих скриптов войдет в состав нашего файла под названием functions.php. Я предпочитаю сначала создать функцию для регистрации новой функциональности и уже в эту функцию включить все требуемые скрипты. Выглядеть это будет примерно так:

function vsgt_enqueue_scripts() {
    // Register Hammer.js from external link
    wp_register_script( 'hammer', 'http://eightmedia.github.com/hammer.js/hammer.js' );
    // Register jQuery Hammer from external link
    // Set jQuery and Hammer as dependencies so that we only enqueue this and we get them all
    wp_register_script( 'jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery.hammer.js', array( 'jquery', 'hammer' ) );
    // Enqueue our scripts
    wp_enqueue_script( 'jquery_hammer' );
}
add_action( 'wp_enqueue_scripts', 'vsgt_enqueue_scripts' );

Далее нам надо создать пустой файл JavaScript, который мы позже используем для написания своего скрипта с поддержкой жестов. Создайте файл, зарегистрируйте его и наполните его содержимое функцией, которая нам нужна для встраивания функции, библиотек и самих вспомогательных скриптов:

// Register our Custom JS Script
wp_register_script( 'custom_js', get_template_directory_uri() . '/js/jquery.custom.js', array( 'jquery_hammer' ), '1.0', true );
wp_enqueue_script( 'custom_js' );

Если вы не уверены на счет своей способности самостоятельно настроить и включить скрипты, то воспользуйтесь данным руководством.

Шаг 2. Настраиваем нашу навигацию

Теперь когда мы подготовили скрипты, мы должны убедиться, что мы можем переходить туда-сюда в пределах отдельно взятого поста в нашем блоге. Сделать это можно, добавив следующий код в цикл для WordPress в файле single.php:

<div class="primary_navigation">
    <span class="nav-previous"><?php previous_post_link('%link') ?></span>
    <span class="nav-next"><?php next_post_link('%link') ?></span>
</div>

Навигацию оформим тегом div для лучшего управления и гибкости выбора стилей, а также используем span для оформления ссылок перехода вперед и назад в постах (эти ссылки генерирует WordPress). Мы их оформим классами span, чтобы напрямую обращаться к конкретным ссылкам в будущем, если нам это понадобится. Почитать подробнее о функциях next и previous вы можете в WordPress Codex.

И наконец нам нужен открывающий тег body. К нему мы применим отдельный класс gesture для функции body_class():

<body <?php body_class( 'gesture' ); ?>>

Нам надо это сделать, поскольку позже мы этот класс используем в файле JavaScript, который будет вести себя как контейнер для проверки, использует ли посетитель сайта движение пальцев по экрану или тачпаду при навигации по блогу.

Шаг 3. Пишем скрипт для жестов

Теперь, когда мы настроили навигацию, самое время перейти к "листанию" постов. Нам надо написать JavaScript для включения такого способа навигации. Начнем с того, что откроем пустой JavaScript-файл, созданный нами ранее, и напишем в нем функцию, которая будет выглядеть вот так:

jQuery(document).ready(function($) {
    function runGesture() {
        // Our code will go in here
    }
});

Далее создадим парочку переменных. Вставьте следующий код в функцию runGesture:

// Set our gesture container variable
var gestureContainer;
// Set our variable to be 'hammered'
var hammeredGesture;

Далее мы назначим переменные для нужных нам задач. Мы будем использовать gestureContainer для назначения классов к тегу body, a затем мы инициализируем плагин Hammer.js в переменной hammeredGesture. Вставьте следующий код в функцию runGesture:

// Assign our container to the ID
gestureContainer = $('body.gesture');
// Hammer our Gesture
hammeredGesture = $(gestureContainer).hammer();

Теперь, когда мы задали фундаментальные переменные, мы можем перейти к привязке событий и жестов к нашему контейнеру, который инициализируется через плагин Hammer.js. Сделаем мы это путем выполнения функции bind в переменной hammeredGesture для последующего действия, связанного с жестами; в особенности это касается такого события как "перетаскивание пальцами". Откроем функцию, которую мы пишем, и добавим к ней процедуру выполнения определенного события в ответ на жест. Добавьте следующий код в функцию runGesture:

// Bind our Hammer to the event we want to run
hammeredGesture.bind("drag", function ( evnt ) {
    // Here we will handle the code for the drag event
});

Теперь разберемся с той частью кода, которая отвечает за навигацию. В нашей функции bind мы создадим переменную под названием url. Ее будем использовать для получения значения href от предыдущей и следующей ссылки на сайте. Также мы протестируем работу функции и переменной путем перетаскивания страницы, перелистывания ее влево и вправо, и в зависимости от направления жеста мы назначим значения для href соответственно переменной value. И в конце мы проверим значение адреса в переменной url, и если это значение не пустое, то мы будем перенаправлять пользователя в окно, содержимое которого соответствует значению параметра url. Для этой цели нам надо добавить такой код:

// Set up a URL variable and set it to false
var url = false;
/*
Test if the direction we are swipeing is right
if TRUE then get the span with class 'nav-next'
and pass the href link to the URL
*/
if ( evnt.direction == 'right' ) {
    url = jQuery('.nav-next a').attr('href');
}
/*
Same as the right key but change the value
of the URL to get the previous link
*/
if ( evnt.direction == 'left' ) {
    url = jQuery('.nav-previous a').attr('href');
}
/*
If the URL has a value then change the get
the window and pass the URL location to it
*/
if ( url ) {
    window.location = url;
}

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

Шаг 4. Определяем браузер пользователя

WordPress дает нам возможность определить, какую страницу просматривает клиент, при помощи body_class, который отлично подходит для настройки стилей и кросс-браузерной совместимости; мы немного расширим функциональность и добавим корректное определение клиентского браузера. Благодаря Натану Райсу у нас уже есть решение для этой цели. Убедитесь, что вы правильно применили body_class к тегу body (как было показано выше), а затем откройте файл functions.php и добавьте следующий код:

function browser_body_class($classes) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
    if($is_lynx) $classes[] = 'lynx';
    elseif($is_gecko) $classes[] = 'gecko';
    elseif($is_opera) $classes[] = 'opera';
    elseif($is_NS4) $classes[] = 'ns4';
    elseif($is_safari) $classes[] = 'safari';
    elseif($is_chrome) $classes[] = 'chrome';
    elseif($is_IE) $classes[] = 'ie';
    else $classes[] = 'unknown';
    if($is_iphone) $classes[] = 'iphone';
    return $classes;
}
add_filter( 'body_class', 'browser_body_class' );

Шаг 5. Инициализация работы

И вот мы настроили определение браузера со стороны клиента, написали полный скрипт по распознаванию и обработке жестов и закончили с обработкой навигации. Давайте вернемся и откроем наш скрипт custom.jquery.js и добавим в него код из внешней функции runGesture:

// Only run the gestures on an iPhone or mobile device
if ( $('.gesture').hasClass( 'iphone' ) ) {
    runGesture();
}

Код, который мы только что добавили, выполняет финальную проверку насчет того, использует ли посетитель сайта в данный момент мобильное устройство: для такого клиента запускается скрипт работы с жестами, в противном случае не происходит ничего.

Вот и все! Как видите, все довольно просто: вы теперь можете листать страницы на своем смартфоне или планшете для навигации между постами, и при этом ваш WordPress сайт будет работать совершенно нормально и обычно на настольных устройствах (ноутбуках и ПК).

Источник: WP.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/