Сегодня мы рассмотрим, как настроить жесты для навигации по сообщениям WordPress. Это действительно просто, так что давайте окунемся!
Вступление
Поскольку мы продвигаемся вперед в адаптивном дизайне сайтов и количество пользователей, посещающих сайты на мобильных устройствах, растет, было бы хорошо, если бы мы могли заставить наш сайт работать с удивительными технологиями, такими как жесты. Для этого мы будем использовать библиотеку jQuery, а также несколько хороших старых PHP и WordPress.
Демо — это урезанная тема, которая была создана только для целей этого урока.
Так что откройте ваш любимый текстовый редактор и начнем!
Шаг 1 Регистрация / постановка в очередь наших скриптов
Мы будем использовать отличный плагин jQuery для создания нашей жестовой навигации под названием Hammer.js . Они предоставляют нам все функции для использования различных видов жестов на наших веб-сайтах.
Давайте начнем с получения всех необходимых файлов, необходимых для работы жестов. Вы можете загрузить файлы локально на свой компьютер или использовать их онлайн-версию.
Нам нужно поставить в очередь следующие скрипты:
Мы поставим эти скрипты в наш файл « functions.php ». Мой предпочтительный метод — сначала создать функцию, чтобы зарегистрировать и поставить в очередь каждый скрипт внутри этой функции. Это будет выглядеть примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
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, который мы позже будем использовать для написания сценария жестов. Создайте файл, зарегистрируйте и поставьте его в очередь в той же функции, которую мы использовали для регистрации и постановки в очередь всех наших других библиотек и скриптов:
|
1
2
3
|
// 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’ );
|
Если вы не уверены в необходимости ставить сценарии, следуйте этому руководству: Как включить JavaScript и CSS в ваши темы и плагины WordPress
Шаг 2 Настройка нашей навигации
Теперь, когда наши сценарии готовы, мы должны убедиться, что мы можем перемещаться вперед и назад при чтении одного сообщения в блоге. Мы делаем это, вставляя следующий код в наш цикл WordPress внутри нашего файла » single.php «:
|
1
2
3
4
|
<div class=»primary_navigation»>
<span class=»nav-previous»><?php previous_post_link(‘%link’) ?>
<span class=»nav-next»><?php next_post_link(‘%link’) ?>
</div>
|
Мы обертываем нашу навигацию в div для лучшей гибкости управления и стиля, а затем используем диапазон, чтобы обернуть наши следующие и предыдущие ссылки, сгенерированные WordPress. Мы заключаем его в классы span, чтобы мы могли нацеливать ссылки, которые нам понадобятся позже. Вы можете прочитать больше о следующих и предыдущих функциях в Кодексе WordPress.
Наконец, нам нужно перейти к открывающему тегу <body> и применить к нему класс. Я буду добавлять класс « gesture » в body_class() : <body <?php body_class( 'gesture' ); ?>> <body <?php body_class( 'gesture' ); ?>> Мы применяем класс к тегу body, потому что позже мы будем использовать его в нашем файле JavaScript, где он будет выполнять роль контейнера для проверки, проводил ли пользователь пальцем по экрану для навигации.
Шаг 3 Написание сценария нашего жеста
Теперь, когда наша навигация настроена, она должна позволять вам перемещаться вперед и назад при чтении одного сообщения в блоге. Далее нам нужно написать наш JavaScript для навигации с помощью жестов. Давайте начнем с открытия нашего пустого файла JavaScript, который мы создали ранее, и создания функции. Ваш документ должен выглядеть примерно так:
|
1
2
3
4
5
6
7
|
jQuery(document).ready(function($) {
function runGesture() {
// Our code will go in here
}
});
|
Далее мы собираемся создать некоторые переменные. Вставьте следующий код в нашу функцию runGesture :
|
1
2
3
4
5
|
// Set our gesture container variable
var gestureContainer;
// Set our variable to be ‘hammered’
var hammeredGesture;
|
После этого мы собираемся назначить переменные для их соответствующих задач. Мы будем использовать gestureContainer для назначения класса тегу body, а затем инициализируем плагин Hammer.js для нашей переменной hammeredGesture . Вставьте следующий код в нашу функцию runGesture и наш код должен выглядеть следующим образом:
|
1
2
3
4
5
|
// Assign our container to the ID
gestureContainer = $(‘body.gesture’);
// Hammer our Gesture
hammeredGesture = $(gestureContainer).hammer();
|
Теперь, когда у нас есть наши основные принципы, мы можем двигаться дальше и привязать наше событие жеста к нашему контейнеру, который был инициализирован с помощью плагина Hammer.js . Мы делаем это, запустив функцию bind нашей переменной hammeredGesture и передавая событие жеста; в частности, мы будем использовать событие «перетаскивания». Затем откройте функцию, в которую мы напишем всю обработку события жеста. Вставьте следующий код в нашу функцию runGesture :
|
1
2
3
4
5
6
|
// 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 в переменную url . Наконец, мы проверим, есть ли значение для url , и, если оно есть, мы перенаправим окно на значение url . Следующий код должен отображать это:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 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 и вставьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
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 :
|
1
2
3
4
|
// Only run the gestures on an iPhone or mobile device
if ( $(‘.gesture’).hasClass( ‘iphone’ ) ) {
runGesture();
}
|
Код, который мы только что вставили, выполняет один последний тест, чтобы проверить, находимся ли мы на мобильном устройстве и запускаем ли мы сценарий жестов, в противном случае ничего не делаем.
Это оно! Просто верно? Вы можете смахивать влево и вправо на своих мобильных устройствах через сообщения, и ваш сайт WordPress будет работать нормально на настольных компьютерах! Получайте удовольствие, играя с различными событиями.
Я хотел бы сказать ОГРОМНОЕ спасибо за то, что потратили время на чтение моего урока, надеюсь, это помогло. Пожалуйста, не стесняйтесь оставлять комментарии, и я сделаю все возможное, чтобы помочь и ответить на них. Если нет, вы всегда можете связаться со мной напрямую через мой сайт: www.VinnySingh.co