Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Мобільний трафік становить близько половини всього трафіку веб-сайту в Інтернеті (можливо, і більше для вашої ніші), тому майже кожна тема WordPress зараз рекламує себе як адаптивна.

Але ось у чому справа – «адаптивний» означає лише те, що ваш сайт адаптуватиметься до різних пристроїв. І це не означає, що мобільні відвідувачі отримають якісний функціонал. Про те, що вони в результаті побачать, маємо подбати саме ви.

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Меню WP Mobile – це безкоштовний плагін (є преміум плани), який додає більш зручне та функціональне навігаційне меню в мобільну версію вашого сайту WordPress, незалежно від вашої теми.

В огляді WP Mobile Menu ми покажемо, що може зробити для вас, і як це працює на живому сайті WordPress.

Можливості WP Mobile Menu

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

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

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

  • оверлів,
  • висувний контент,
  • ковзання за змістом,
  • ковзання зверху.

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

Крім можливості включати звичайні посилання меню, WP Mobile Menu також додає деякі спеціальні функції для опцій:

  • Живий пошук Ajax - Користувачі можуть ввести свій запит і миттєво переглянути результати пошуку - перезавантаження сторінки не потрібно.
  • Профіль користувача – увімкніть профіль користувача та аватар як частину вашого меню. Це відмінний варіант для будь-якого типу сайту чи спільноти.
  • Логотип - Додайте свій логотип як частину меню.
  • WooCommerce - спеціальна інтеграція з WooCommerce допоможе вам увімкнути кошики покупок користувачів, а також фільтри для покупок. Можна додати липкий кошик у меню футера.

Крім основної функціональності, ви отримуєте тонни налаштувань:

  • колір,
  • шрифти,
  • іконки,
  • функціональність,
  • і багато іншого.

Якому сайту потрібний WP Mobile Menu

WP Mobile Menu може допомогти будь-якому сайту WordPress. Базова функціональність – створення кращого мобільного меню – корисна для будь-якого типу сайту WordPress, оскільки все більше сайтів стають мобільними.

Однак є кілька типів сайтів, де WP Mobile Menu працює дуже добре:

  • Магазини WooCommerce – інтеграція WP Mobile Menu з WooCommerce дозволяє вам зробити покупки зручнішими для користувача, спрощуючи покупцям доступ до їх кошиків та фільтрів товарів.
  • Сайти для передплатників / онлайн-курси – оскільки ви можете створювати спеціальні меню, призначені лише для користувачів, що увійшли до системи. Вони спростять учасникам, які увійшли до системи, переміщення по сайту. Крім того, функція профілю користувача дозволяє додати їх аватар / профіль до меню (нижче ви побачите це в дії).
  • Соціальні мережі/форуми - Така сама ідея, як і для сайтів членства.

Як працює WP Mobile Menu

Щоб перевірити роботу плагіна, виберемо випадкову тему з WordPress.org – ColorMag. Ось як виглядає мобільне меню за промовчанням – це простий значок гамбургера, який розкриває список меню:

Огляд WP Mobile Menu WordPress

Тепер встановимо WP Mobile Menu, використовуючи його для створення інтерфейсу користувача.

WP Mobile Menu – початок

Після активації плагіна WP Mobile Menu необхідно призначити меню позицію WP Mobile Menu. Тепер ви отримуєте меню гамбургера ліворуч і піктограму пошуку праворуч. Меню також набагато компактніше, що дозволяє відвідувачам відразу побачити більше вашого контенту:

Огляд WP Mobile Menu WordPress

Меню гамбургера відкриває повнорозмірне меню:

Огляд WP Mobile Menu WordPress

А значок пошуку відкриває пошук у реальному часі Ajax, який автоматично пропонує контент, коли відвідувачі вводять запити у поле пошуку:

Огляд WP Mobile Menu WordPress

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

Вкладка «Загальні параметри»

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

Вгорі ви можете встановити власні контрольні точки і вибрати, які меню використовувати. Знову ж таки, ви отримуєте три різні пункти меню:

  • Ліве меню (заголовок).
  • Праве меню (заголовок).
  • Меню у футері.

Огляд WP Mobile Menu WordPress

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

Огляд WP Mobile Menu WordPress

Вкладка «Заголовок»

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

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

  • Липкий заголовок.
  • Прозорий заголовок.

Огляд WP Mobile Menu WordPress

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

  • логотип,
  • центрування,
  • іконки,
  • пошук,
  • багато іншого.

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

Плагін Admin Menu Tweaker для налаштування меню в адмінці WordPress.

Вкладка «Футер»

Якщо ви включили меню у футері, вкладка «Футер» дозволяє налаштувати його роботу, в тому числі вказувати, чи потрібно автоматично приховувати меню футера під час прокручування користувачем:

Огляд WP Mobile Menu WordPress

Ось приклад того, як може виглядати меню у футері:

Огляд WP Mobile Menu WordPress

Ліве та праве меню

Вкладки «Ліве меню» та «Праве меню»» містять ідентичні набори параметрів тільки для їх відповідної позиції.

У верхній частині можна використовувати елементи керування перетягуванням та видимістю, щоб керувати відображенням вмісту:

  • Ліве меню – це вміст поточного меню WordPress («Зовнішній вигляд» → «Меню»).
  • Профіль користувача – це виділена функція, яка відображає профіль користувача.
  • Логотип – Ви можете увімкнути логотип вашого сайту.
  • Пошук – можна додати пошук у меню.

Огляд WP Mobile Menu WordPress

Наприклад, якщо ви додали профіль користувача над лівим меню, ось як може виглядати ваше меню. Перегляньте, який цікавий ефект профілю користувача відображається в мобільній версії. Це чудово підходить для членських сайтів або магазинів:
Огляд WP Mobile Menu WordPress

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

Крім цих важливих налаштувань, плагін дає безліч варіантів управління:

  • Значки.
  • Фонове зображення / колір для вашого меню.
  • Визначення розмірів/інтервал.

Варіанти ідентичні для правої/лівої позиції меню.

Вкладка "WooCommerce"

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

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

Огляд WP Mobile Menu WordPress

Можна додати фільтри продуктів, які будуть відображатися лише на сторінках вашого магазину та архіву. І ви отримуєте чудові функції, такі як можливість автоматично відкривати панель кошика покупок після того, як покупець додає товар до кошика та обмежує пошук за заголовком тільки продуктами WooCommerce:

Огляд WP Mobile Menu WordPress

Вкладки «Кольори» та «Шрифти»

Як випливає з назв, вкладки «Кольори» та «Шрифти» надають повний контроль над кольорами та шрифтами для всіх опцій меню.

Налаштування тут досить докладні:

Огляд WP Mobile Menu WordPress

WP Mobile Menu: скільки це буде коштувати

WP Mobile Menu має базову безкоштовну версію, доступний на WordPress.org.

У преміум варіанті є два основних плани, залежно від того, чи потрібна вам функціональність WooCommerce:

  • Професійний - $ 4.99 на місяць - всі преміальні функції, крім WooCommerce.
  • Бізнес – $ 7.99 на місяць – всі професійні функції плюс підтримка WooCommerce.

Крім того, існує корпоративний план вартістю 29,99 дол. США на місяць, який дає вам приватний канал Slack та персонального менеджера.

Усі плани пропонують 14-денну гарантію повернення грошей.

Усі «за» WP Mobile Menu

Той факт, що WP Mobile Menu працює з будь-якою темою, означає, що ви зможете запропонувати користувачам покращений мобільний інтерфейс незалежно від того, яка у вас тема.

Завдяки безлічі параметрів налаштування WP Mobile Menu, ви зможете точно контролювати, як виглядають та працюють ваші меню.

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

Тому, незалежно від того, яку тему ви використовуєте, рекомендуємо ознайомитися з WP Mobile Menu, особливо якщо у вас великий відсоток відвідувачів з мобільних пристроїв.

Джерело: wplift.com

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 2

Юрій:

Цікаво виглядає. Можна спробувати самому написати таке.

Олександр:

Добридень! "Пошук - можна додати пошук у меню". Як? Не знайшов.

Додати коментар або відгук