Как добавить меню панели слайдов в темы WordPress

Как добавить меню панели слайдов в темы WordPress


Хотите добавить слайд-меню на свой сайт WordPress?

Добавление адаптивного меню облегчит пользователям навигацию по вашему сайту при использовании мобильных устройств. Когда они коснутся значка вашего меню, на экране появится меню панели с красивой анимацией.

В этой статье мы покажем вам, как добавить меню слайд-панели в темы WordPress без написания кода.

Зачем добавлять меню слайд-панели в темы WordPress?

Хорошо продуманные меню помогают вашим посетителям ориентироваться на вашем сайте WordPress. Многие из ваших посетителей будут использовать мобильные устройства, поэтому важно просмотреть мобильную версию вашего сайта WordPress, чтобы увидеть, как ваше меню навигации выглядит на небольших экранах.

К счастью, многие темы WordPress поставляются со встроенными стилями, которые автоматически отображают меню для мобильных устройств при просмотре на маленьком экране.

Однако вы можете еще больше настроить мобильную навигацию и добавить полноэкранное адаптивное меню или анимированное меню слайд-панели.

Имея это в виду, давайте посмотрим, как добавить меню слайд-панели в темы WordPress.

Как добавить меню панели слайдов в темы WordPress

Первое, что вам нужно сделать, это установить и активировать Адаптивное меню плагин. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

Существует премиум-версия адаптивного меню с дополнительными темами и дополнительными функциями, такими как условная логика, но для этого руководства мы будем использовать бесплатный плагин.

После активации перейдите к Адаптивное меню » Меню страница. Оказавшись там, вы должны нажать кнопку «Создать новое меню» в верхней части экрана.

Создайте новое адаптивное меню

Затем вы увидите четыре темы, которые вы можете использовать для своего нового адаптивного меню. Дополнительные темы доступны для покупки.

В этом уроке мы будем использовать автоматически выбранную тему. Затем вы можете нажать кнопку «Далее».

READ  Как включить автозамену на Андроид: активация автоисправления текста
Выберите тему для адаптивного меню

Вы попадете на страницу настроек меню. Здесь вы можете ввести имя для своего адаптивного меню, а затем выбрать, какое меню WordPress вы хотите отображать на панели.

Для этого урока мы выбрали меню «Навигация». Если вам нужно создать новое меню, вы можете узнать, как это сделать, следуя нашему руководству о том, как добавить меню навигации в WordPress.

Дайте меню имя и свяжите его с меню WordPress, которое вы хотите использовать

Вы также можете скрыть обычное меню, которое поставляется с вашей темой WordPress, чтобы ваши пользователи видели только новое меню панели слайдов. Вы делаете это, вводя код CSS в поле «Скрыть меню темы».

Код, который вам нужно ввести здесь, зависит от темы, и вы можете узнать больше, нажав на ссылку «Подробнее».

У пользователей версии Pro есть несколько дополнительных настроек. Например, пользователи Pro могут выбирать устройства и страницы, на которых должно отображаться меню.

Если вы довольны настройками, нажмите кнопку «Создать меню» внизу страницы. Вы перейдете на страницу, где сможете завершить настройку меню.

Вы увидите предварительный просмотр своего веб-сайта в правой части экрана, а внизу есть кнопки для переключения между режимами телефона, планшета и рабочего стола. Вы также найдете параметры настройки слева.

Теперь вы можете настроить адаптивное меню

Обратите внимание, что над меню отображается текст. Это текст заголовка меню и строка текста, которую плагин называет «дополнительным содержимым».

Вы можете отредактировать или скрыть текст, щелкнув «Мобильное меню», а затем «Контейнер» в меню в левой части страницы.

Настройте или скройте текст, отображаемый в верхней части меню

Вы можете ввести что угодно в поле «Текст заголовка», например «Главное меню» или «Навигация». Если вы не хотите отображать заголовок, просто сдвиньте переключатель «Заголовок» в положение «выключено».

После этого вам нужно прокрутить вниз до настройки «Дополнительный контент». Вы можете отключить этот параметр или ввести альтернативный контент. На снимке экрана ниже вы заметите, что переключатель был выключен, поэтому слова «Добавить сюда больше контента…» теперь скрыты.

READ  7 способов диагностировать падение трафика
Настройте или скройте дополнительный контент для вашего меню

Если вы довольны настройками меню, не забудьте нажать кнопку «Обновить» внизу страницы, чтобы сохранить настройки.

Плагин Responsive Menu поставляется со многими другими параметрами, которые позволяют вам изменить поведение и внешний вид меню панели слайдов. Вы можете изучить эти параметры на странице настроек плагина и настроить их по мере необходимости.

Теперь вы можете посетить свой веб-сайт, чтобы увидеть меню в действии. Вот как это выглядит на нашем демо-сайте. Обратите внимание, если текущая страница находится в меню, то она выделяется цветной полосой.

Анимация меню панели слайдов в WordPress

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

Если вам понравилась эта статья, то, пожалуйста, подпишитесь на нашу Канал YouTube для видеоуроков WordPress. Вы также можете найти нас на Твиттер а также Фейсбук.





Source link