Як зробити просте адаптивне меню для WordPress сайту

Почавши адаптацію своїх тем оформлення для мобільних пристроїв, ви не повинні обмежуватись лише встановленням адаптивної теми для WordPress. Організація адаптивної навігації сайту допоможе зробити ваш сайт зручним для користувачів широкого спектру мобільних пристроїв. У цьому уроці ми розповімо про 5 простих кроків для додавання специфічної верстки адаптивного меню під мобільні пристрої.

Дивіться також:

• Адаптивні теми WordPress: єдиний сайт для всіх пристроїв
• Як адаптувати WordPress сайт до мобільних пристроїв
• 8 безкоштовних WordPress-плагінів для адаптації сайту під мобільні пристрої
• 20 безкоштовних тем WordPress з адаптивною версткою на 2013 рік

Ось приклад адаптивного меню, над яким ми працюватимемо

З цілого ряду причин вашу навігацію та сайт потрібно адаптувати під менші розміри екранів на мобільних пристроях:

• Обмежена місткість екрану: довге меню навігації просто не поміститься на невеликій діагоналі екрану. Потрібно скоротити меню та зробити його продуманим для доступу до ключових розділів, які цікавлять користувачів.
• Зміна пріоритетів сторінок для мобільних користувачів: мобільні користувачі зазвичай частіше звертаються до інших сторінок, ніж це роблять користувачі настільних браузерів.
• Створення версій сторінок лише для мобільних сторінок: Вам також слід створити спеціальні версії сторінок тільки для мобільних браузерів.

є 2 варіанти оформлення меню. Або ви відразу визначаєте платформу і браузер і показуєте відвідувачам конкретне меню, або показуєте все меню, а потім підлаштовуєте сторінку під конкретну роздільну здатність екрана. Для цього надсилається та обробляється ряд запитів виду @media до таблиць стилів вашого меню.

Нам підходить другий варіант, тому що він пов'язаний із технікою адаптивного дизайну для сайту. Наприклад ми взяли тему Двадцять тринадцять для WordPress 3.6.

1. Створення дочірньої теми

Якщо дочірньої теми у вас ще немає, саме її час створити. Тому що кастомізація та експерименти з налаштуваннями — це те, що краще робити на дочірній темі, а не на основній, щоби нічого не поламати. Скопіюйте вміст header.php з поточної теми та створіть порожній файл functions.php.

2. Додавання нового розташування меню

Додавання меню до вашого мобільного варіанту дозволить вам задати локацію без необхідності щоразу переписувати таблицю стилів. Саме тому треба додати наступний код functions.php:

function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'twentythirteen' ));
}
add_action( 'after_setup_theme', 'extra_setup' );

Установки для мобільної версії меню

Тепер переходимо до Зовнішній вигляд → Меню і там бачимо 2 можливі варіанти розташування меню на екрані. Створюємо нове меню і призначаємо йому нове місце, де можна тестувати ваше меню.

3. Додаємо нове розташування для шапки сторінки

Відкриємо header.php, знаходимо існуючий виклик виду wp_nav_menu і відразу після цього рядка додаємо наступний код:

<?php wp_nav_menu( array( 'theme_location' => 'primary mobile', 'menu_class' => 'nav-menu' ) ); ?>;

Він генерує HTML для нашого нового меню та його нового розташування на екрані.

4. Задаємо CSS-класи для меню

Для відображення відповідного меню перейдемо до використання запитів @media для перемикання між відображенням головного та мобільного меню на екрані.

За промовчанням WordPress використовує для оформлення меню тег DIV з ім'ям класу, взятим із назви меню. Ми можемо просто використовувати імена цих класів у своїй таблиці стилів, але тоді щоразу при коригуванні імен нам доведеться вручну оновлювати всю таблицю стилів. Ми хочемо цього уникнути.

Для більшої гнучкості ми поставимо загальне ім'я для класів і контейнера, який міститиме класи. Зробити це можна досить просто, застосувавши фільтр wp_nav_menu_args.

Переходимо до файлу functions.php і додаємо наступне:

function set_container_class ($args) {
$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')

І тут треба налаштувати container_class на розташування теми і при цьому ще додати-нав'. Ми зареєстрували 2 положення: первинний и primary mobileЩоб WordPress виводив одне з двох меню в складі елементівdiv class="primary-nav"> іdiv class="primary-mobile-nav">.

5. Призначаємо таблицю стилів контролю за відображенням меню на екрані

І завершальний крок – це додавання стилів до вибраного меню. Відкрийте файл styles.css і додайте наступний код:

.primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}

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

Щоб переконатися, що мобільним користувачам ми показуємо тільки мобільну версію меню за певної роздільної здатності екрана, потрібно вказати параметри екрана, прив'язавши їх до відповідного запиту @media. Для теми оформлення TwentyThirteen це 643px, а для своєї теми ви додатково можете задати, за якої діагоналі екрана та кількості пікселів задавати мобільне меню.

І можна, само собою, встановити параметри для будь-якої кількості меню і цільових розмірів екрану, просто додавши додаткові меню і оновивши таблицю стилів з необхідними запитами @media.

Висновок

У цьому пості ми розглянули 5 простих кроків для того, щоб швидко та легко додати адаптивне меню до вашої теми оформлення для WordPress.

Джерело: wpmu.org

Олексій Шевченко

редактор wpcafe

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