Як створити адаптивне меню WordPress для мобільних пристроїв

Більше половини всього трафіку веб-сайту надходить з мобільних пристроїв. Якщо ваше навігаційне меню погано працює на смартфонах і планшетах, велика частина вашої аудиторії може важко зорієнтуватися на вашому сайті.

У цьому посібнику ми покажемо вам, як створити адаптивне меню WordPress для мобільних пристроїв.

Навіщо створювати адаптивне меню WordPress для мобільних пристроїв?

Добре розроблене меню навігації допоможе відвідувачам орієнтуватися на вашому веб-сайті. Однак те, що ваше меню чудово виглядає на настільних комп’ютерах, не означає автоматично, що воно також добре виглядатиме на смартфонах і планшетах.

На мобільних користувачів припадає близько 58% усього інтернет-трафіку. Тим не менш, якщо ваше меню не виглядає добре або не працює належним чином на мобільних пристроях, ви ризикуєте втратити половину аудиторії. Це ускладнить досягнення ключових цілей, таких як розширення вашого списку розсилки, збільшення продажів і розвиток вашого бізнесу.

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

Адаптивна слайд-панель – це навігаційне меню, яке ковзає по екрану, коли відвідувач торкається або клацає перемикач.

Таким чином, меню завжди під рукою, але за умовчанням не займає місця на екрані. Це особливо важливо, оскільки смартфони та планшети мають набагато менші екрани порівняно з настільними комп’ютерами.

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

Найпростіший спосіб додати слайд-панель, готову до роботи на мобільних пристроях, — це скористатися адаптивним меню.

Примітка. Існує преміум-версія Responsive Menu з додатковими темами та додатковими функціями, такими як умовна логіка. Однак у цьому посібнику ми будемо використовувати безкоштовний плагін, оскільки він містить усе необхідне для створення меню, готового для мобільних пристроїв.

Перше, що вам потрібно зробити, це встановити та активувати плагін Responsive Menu. Щоб дізнатися більше, перегляньте наш покроковий посібник із встановлення плагіна WordPress.

Після активації ви можете використовувати плагін для налаштування будь-якого меню WordPress, яке ви створили раніше. Якщо вам потрібно створити нове меню, перегляньте наш посібник про те, як додати меню навігації в WordPress.

Якщо ваша тема WordPress уже має вбудоване мобільне меню, вам знадобиться знати клас CSS цього меню, щоб ви могли його приховати. Якщо ви пропустите цей крок, користувачі мобільних пристроїв побачать на вашому веб-сайті два перекриваються меню. Щоб отримати покрокові інструкції, перегляньте наш посібник про те, як приховати мобільне меню в WordPress.

Зробивши це, перейдіть на  сторінку адаптивного меню » Меню  та натисніть кнопку «Створити нове меню».

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

Ми використовуємо «Тему за замовчуванням» у наших зображеннях, але ви можете використовувати будь-яку тему. Після прийняття рішення натисніть «Далі».

Тепер ви можете ввести назву для меню. Це лише для довідки, тому ви можете використовувати все, що забажаєте.

Зробивши це, натисніть «Посилання на меню WordPress» і виберіть меню, яке ви хочете використовувати.

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

Якщо ви оновите плагін преміум-класу, ви отримаєте кілька додаткових налаштувань. Наприклад, користувачі Pro можуть приховати меню на певних сторінках або пристроях.

Коли ви задоволені тим, як налаштовано меню, натисніть «Створити меню».

Тепер ви побачите попередній перегляд вашого веб-сайту WordPress праворуч на екрані та деякі налаштування ліворуч.

Щоб побачити, як ваш сайт виглядає на мобільному пристрої, клацніть піктограму мобільного пристрою чи планшета в нижньому лівому куті екрана.

Щоб налаштувати вигляд і роботу меню на мобільних пристроях, виберіть «Мобільне меню».

Потім натисніть «Контейнер».

Тут ви знайдете багато різних налаштувань.

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

За замовчуванням плагін додає назву та текст «Додати більше вмісту…».

Ви можете замінити це своїм власним повідомленням або навіть повністю видалити текст. Щоб змінити заголовок, клацніть, щоб розгорнути розділ «Назва».

Тепер ви можете вводити власні повідомлення в поле «Текст заголовка».

Ви також можете додати посилання до заголовка або додати шрифти та зображення значків.

Щоб налаштувати вигляд заголовка, натисніть вкладку «Стилі».

Тут ви можете змінити колір фону, колір тексту, розмір шрифту тощо.

Якщо ви не бажаєте відображати жодного тексту заголовка, клацніть, щоб дезактивувати перемикач біля пункту «Назва».

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

Щоб замінити “Додати більше вмісту тут…” текст із вашими власними повідомленнями, натисніть, щоб розгорнути область «Додатковий вміст».

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

Щоб повністю видалити текст, просто клацніть, щоб деактивувати перемикач.

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

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

Щоб спробувати різні макети стовпців, натисніть, щоб розгорнути розділ «Меню».

Тепер ви можете відкрити спадне меню «Стовпці контейнера меню» та вибрати кількість стовпців, які ви хочете використовувати.

У цей момент ви можете побачити текст «Потрібне оновлення». Якщо ви бачите це повідомлення, клацніть його, щоб оновити попередній перегляд за допомогою нових налаштувань стовпця.

За замовчуванням Responsive Menu додає панель пошуку до вашого меню WordPress. Це може допомогти відвідувачам знайти цікавий вміст, але також може зайняти дорогоцінний простір на екрані.

За бажанням ви можете видалити рядок пошуку для мобільних користувачів, вимкнувши перемикач біля пункту «Пошук».

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

Коли ви задоволені тим, як налаштовано навігаційне меню, натисніть «Оновити».

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

Інший варіант – додати адаптивне меню на весь екран. Це меню, яке автоматично підлаштовується під різні розміри екрана, тому навігаційне меню завжди виглядатиме добре, незалежно від того, яким пристроєм користується відвідувач.

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

Найпростіший спосіб створити повноекранне меню — це використовувати FullScreen Menu – Mobile Friendly and Responsive. Цей плагін дозволяє створювати повноекранне меню лише для мобільних пристроїв, або ви можете показувати те саме меню на смартфонах, планшетах і настільних комп’ютерах, щоб усі відвідувачі мали однакові враження.

Перше, що вам потрібно зробити, це встановити та активувати плагін FullScreen Menu. Щоб отримати докладніші відомості, ви можете переглянути наш покроковий посібник із встановлення плагіна WordPress.

Після активації виберіть «Параметри повноекранного меню»  в меню WordPress і встановіть прапорець «Активувати анімоване повноекранне меню».

Ми також рекомендуємо встановити прапорець «Показувати меню лише для адміністраторів». Це дозволяє вам бачити зміни під час налаштування меню, але відвідувачі не побачать мобільне меню, доки ви не опублікуєте його.

За умовчанням плагін показуватиме повноекранне меню на всіх пристроях. Якщо ви хочете відображати повноекранне меню лише на смартфонах і планшетах, поставте прапорець біля пункту «Лише для мобільних пристроїв».

Зробивши це, ви готові точно налаштувати вигляд меню, натиснувши вкладку «Дизайн / Вигляд».

Тут ви можете вибрати кольори, шрифт і параметри анімації для повноекранного меню.

Вносячи ці зміни, майте на увазі, що «Початкове фонове меню» — це значок перемикача меню. Тим часом «Відкрите фонове меню» — це колір розширеного повноекранного меню мобільного пристрою.

Після вибору кольорів меню перейдіть до розділу «Вигляд меню». Тут ви можете змінити колір шрифту меню, сімейство шрифтів і розмір шрифту.

Просто майте на увазі, що завантаження додаткових шрифтів може вплинути на продуктивність і швидкість вашого сайту WordPress. Це не завжди хороший вибір для мобільних пристроїв, які зазвичай мають меншу обчислювальну потужність порівняно з настільними комп’ютерами. Деякі відвідувачі також можуть мати погане мобільне з’єднання з Інтернетом, через що ваш сайт завантажуватиметься ще повільніше.

Зробивши це, прокрутіть до «Налаштування анімації».

Для початку ви можете вибрати спосіб розгортання меню, коли відвідувач натискає значок перемикача. Просто відкрийте спадне меню «Тип анімації» та виберіть опцію зі списку, наприклад «Зверху вниз» або «Зліва направо».

Коли ви задоволені тим, як налаштовано меню, настав час додати вміст, натиснувши вкладку «Вміст меню».

Відкрийте спадне меню «Вибрати меню» та виберіть меню, яке потрібно відобразити на весь екран.

Якщо ви ще не створили навігаційне меню, перегляньте наш посібник про те, як додати навігаційне меню в WordPress.

Якщо ви хочете показати додатковий вміст у меню, ви можете додати його у вікно «Безкоштовний HTML / короткі коди». Це діє як міні-редактор сторінок, тож ви можете вводити текст, змінювати форматування, додавати маркери та нумеровані списки тощо.

Також є прапорець, який додасть посилання на вашу сторінку політики конфіденційності.

Далі ви можете додати піктограми соціальних мереж у своє меню WordPress. Ці піктограми відображатимуться в рядку внизу повноекранного меню.

Щоб додати ці піктограми, просто клацніть, щоб розгорнути вікно «Соціальна піктограма 1».

Тепер ви можете ввести назву піктограми, наприклад «Facebook».

Після цього клацніть стрілку поруч із «Піктограмою соціальних мереж» і виберіть піктограму, яку ви хочете показувати мобільним відвідувачам.

Нарешті, введіть адресу, яку ви хочете використовувати, у полі «URL-адреса соціальної мережі».

Щоб додати більше значків, просто натисніть кнопку «Додати інший значок».

Нарешті, ви можете додати панель пошуку WordPress, щоб допомогти відвідувачам знайти те, що вони шукають. Для цього просто встановіть прапорець біля пункту «Додати панель пошуку».

За умовчанням плагін показуватиме повідомлення «Шукати щось…». Однак ви можете замінити це власним користувацьким повідомленням, ввівши в поле «Пошуковий заповнювач введення».

Наприклад, якщо ви керуєте магазином WooCommerce, ви можете використовувати такий текст, як «Почати покупки» або «Пошук продуктів».

Коли ви задоволені тим, як налаштовано меню, натисніть кнопку «Зберегти зміни».

Тепер просто відвідайте свій веб-сайт за допомогою мобільного пристрою, щоб побачити повноекранне меню в дії.

Ви також можете переглянути мобільну версію свого веб-сайту за допомогою настроювача тем WordPress.

Бонус: як додати адаптивне меню до цільових сторінок

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

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

Після створення дизайну за допомогою SeedProd ви можете додати на сторінку адаптоване для мобільних пристроїв меню за допомогою готового блоку Nav Menu SeedProd. Цей блок дозволяє створювати окремі меню як для меню пристроїв, так і для робочого столу.

Таким чином, ви можете використовувати інший макет і навіть показувати різні посилання залежно від пристрою користувача.

Щоб дізнатися більше, перегляньте наш посібник про те, як додати власні навігаційні меню в WordPress.

Після додавання блоку Nav до вашого дизайну просто клацніть вкладку «Додатково».

Тут натисніть, щоб розгорнути розділ «Видимість пристрою».

Після цього натисніть перемикач «Сховати на робочому столі», щоб активувати його. Тепер це меню з’являтиметься лише на мобільних пристроях.

Тепер ви можете додавати посилання та змінювати макет меню за допомогою налаштувань у меню ліворуч.

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

Якщо вам сподобалася ця стаття, підпишіться на наш канал YouTube, щоб отримати відеоінструкції з WordPress. Ви також можете знайти нас у  Twitter  і Facebook.