Как да създадете отзивчиво мобилно меню в WordPress

Искате ли да създадете мобилно отзивчиво меню? Трафикът на мобилни устройства отдавна е надвишил трафика на настолни компютри на много ресурси. Добавянето на мобилно отзивчиво меню значително опростява навигацията за потребителите на вашия уебсайт. В тази статия ще ви покажем как лесно да създадете отзивчиво мобилно меню в WordPress.

вашата тема

В статията ще ви покажем как да реализирате плана си с приставка (за начинаещи, без код), а също и с код за по-напреднали потребители.

В края на материала ще научите как да създадете плъзгащо се мобилно меню, падащо меню, както и падащо меню за мобилни устройства.

Метод 1: Добавяне на адаптивно меню в WordPress с помощта на приставка

Този метод е съвсем прост и се препоръчва за начинаещи, тъй като не изисква добавяне на код.

Тук ще създадем сандвич меню, което се плъзга при мобилни резолюции на екрана.

wordpress

Първото нещо, което трябва да направите, е да инсталирате и активирате приставката Responsive Menu.

При активиране приставката ще добави нов елемент от менюто, наречен „Responsive Menu“ в администраторската лента. Кликването върху него ще ви отведе до страницата с настройки на приставката.

вашата тема

Първо, трябва да посочите ширината на екрана, при която приставката ще започне да показва адаптивното меню. По подразбиране е 800px и би трябвало да е добре за повечето сайтове.

След това трябва да изберете менюто, което искате да използвате за вашето отзивчиво меню. Ако все още не сте създали меню, можете да направите това на страницата Външен вид »Меню.

Последната опция на екрана е да зададете клас CSS за текущото ви неотзивчиво меню. Това ще позволи на приставката да скрие неотзивчивото ви меню на малки екрани.

Не забравяйте да кликнете върху бутона „Опции за актуализиране“, за да запазите промените си.

Сега отидете на сайта и преоразмерете прозореца на браузъра, за да видите отзивчивото меню в действие.

мобилно

Приставката има много други полезни опции, които ще ви позволят да промените поведението и външния вид на отзивчивото меню.

Текуща версия: 3.1.18

Метод 2: Добавете падащо меню с помощта на приставка

Друг начин да добавите адаптивно меню е да добавите падащо меню. Този метод също не изисква познаване на кода, поради което се препоръчва за начинаещи.

меню

Първо трябва да инсталирате и активирате приставката Responsive Select Menu.

След активиране отидете на Външен вид »Отзивчив избор за конфигуриране на приставката.