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

Опубликовано: 2022-11-16

Если вы являетесь разработчиком WordPress или дизайнером тем WordPress, вы можете добавить пользовательское меню в редактор тем, чтобы управлять параметрами меню. Однако панель администратора WordPress по умолчанию не имеет опции меню панели слайдов . Это означает, что вам нужно обратиться к стороннему плагину или шаблону, чтобы добавить эту функцию в свои темы. Поэтому сегодня мы собираемся объяснить, как добавить меню слайд-панели в темы WordPress.

Меню панели слайдов в темах WordPress: зачем его включать?

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

Шаг первый: установите плагин адаптивного меню

Установка и включение плагина адаптивного меню — это первый шаг. Существует две разные версии этого плагина: платная и бесплатная . Хотя платная версия Responsive Menu предлагает некоторые приятные дополнения, такие как условная логика и дополнительные параметры темы, в этом руководстве мы будем использовать плагин с открытым исходным кодом. После включения адаптивного меню перейдите в «Адаптивное меню» > «Меню». Как только вы окажетесь там, подойдите к панели инструментов и нажмите кнопку «Создать новое меню». Дайте вашему новому меню имя и сохраните свою работу. Не волнуйтесь, если он говорит, что он пуст.

Плагины WordPress в меню загрузки.
Плагин Responsive Menu необходим для создания слайд-меню в WordPress.

Шаг второй: выберите тему

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

Если вы хотите, чтобы ваши посетители видели только новое меню панели слайдов, вы также можете скрыть меню по умолчанию, которое появляется в вашей теме WordPress. Для этого используйте область с надписью «Скрыть меню темы» , чтобы ввести код CSS. Нажмите кнопку «Подробнее», чтобы получить дополнительную информацию о том, как ввести соответствующий код для выбранной вами темы. Версия Pro добавляет еще несколько параметров настройки для пользователя.

Шаг третий: настроить

После того, как вы настроили параметры по своему вкусу, вы можете создать свое меню, нажав кнопку «Создать меню». После того, как вы это сделаете, вы найдете предварительный просмотр вашего сайта справа с возможностью переключения в режим мобильного телефона, планшета или рабочего стола внизу . Слева вы увидите дополнительные настройки для персонализации. Обратите внимание на язык, который отображается над параметрами меню. Здесь показаны как заголовок меню, так и строка «Дополнительный контент», как его называет плагин.

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

Выберите «Мобильное меню», а затем «Контейнер» в боковом меню, чтобы внести изменения или скрыть текст. В области «Текст заголовка» вы можете ввести что угодно, от «Главного меню» до «Навигации». Чтобы отключить строку заголовка, просто переведите переключатель с надписью «Заголовок» в положение «Выкл.». Сделав это, перейдите к опции «Дополнительный контент». У вас есть возможность отключить эту функцию или заменить текст любым другим. Когда вы закончите настройку меню, не забудьте нажать кнопку «Обновить» внизу страницы.

Шаг четвертый: протестируйте

Перед запуском важно провести предварительное тестирование. Чтобы убедиться, что все работает правильно, вы можете использовать браузер, отличный от тех, которые вы обычно используете для доступа к своему сайту. В этом примере мы использовали браузер Google Chrome. Чтобы получить доступ к сайту на мобильных устройствах, мы загрузили приложение под названием « Internet Explore for Android». Мы скопировали и вставили URL-адрес этого сайта в приложение, и результаты были поразительными. Мы обнаружили, что меню было правильно отформатировано как в альбомной, так и в портретной ориентации, и все ссылки работали должным образом. Однако ваш пробег может отличаться, когда речь идет о мобильных устройствах. Мы рекомендуем вам протестировать свое меню на как можно большем количестве устройств и браузеров, прежде чем запускать его. Если вы обнаружите какие-либо проблемы, сейчас самое время их исправить.

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

Шаг пятый: выход в эфир

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

Вывод

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