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

Вы хотите добавить меню слайд-панели на свой сайт WordPress? Добавление отзывчивого меню облегчит пользователям навигацию по вашему сайту при...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выберите тему для вашего отзывчивого меню

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

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

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

Вы также можете скрыть обычное меню, которое поставляется с вашей темой WordPress, чтобы ваши пользователи видели только новое меню слайд-панели. Для этого введите CSS-код в поле ‘Hide Theme Menu’.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий