Сьогодні ми поговоримо про те, як використовувати жести на тачпаді або сенсорному пристрої для навігації у постах та статтях сайту на базі 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щоб безпосередньо звертатися до конкретних посилань у майбутньому, якщо нам це знадобиться. Читати докладніше про функції наступний и попередній ви можете у WordPress Codex.
І нарешті нам потрібний тег, що відкриває тіло. До нього ми застосуємо окремий клас жест для функції 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 для призначення класів до тега тіло, а потім ми ініціалізуємо плагін Hammer.js у змінній забитий жест. Вставте наступний код у функцію runGesture:
// Assign our container to the ID
gestureContainer = $('body.gesture');
// Hammer our Gesture
hammeredGesture = $(gestureContainer).hammer();Тепер, коли ми задали фундаментальні змінні, ми можемо перейти до прив'язування подій та жестів до нашого контейнера, який ініціалізується через плагін Hammer.js. Зробимо ми це шляхом виконання функції пов'язувати у змінній забитий жест для подальшої дії, пов'язаної з жестами; особливо це стосується такої події як "перетягування пальцямиВідкриємо функцію, яку ми пишемо, і додамо до неї процедуру виконання певної події у відповідь на жест. Додайте наступний код у функцію 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
});Тепер розберемося з частиною коду, що відповідає за навігацію. У нашій функції пов'язувати ми створимо змінну під назвою URL. Її використовуватимемо для отримання значення href від попереднього та наступного посилання на сайті. Також ми протестуємо роботу функції та змінної шляхом перетягування сторінки, перегортання її вліво та вправо, і в залежності від напрямку жесту ми призначимо значення для href відповідно змінною значення. І наприкінці ми перевіримо значення адреси у змінній 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 до тега тіло (як було показано вище), а потім відкрийте файл 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
Коментарі до запису: 2
Android 4.0.4, Google Chrome останній – жести не працюють у демонстрації.
windows7 - chrome 23 не працюють