Как добавить меню в WordPress
С помощью хорошего меню можно направить посетителя на нужные страницы, подсветить определенные разделы, например, товары или контакты. Меню важно даже для лендинга: не все захотят вслепую листать страницу в поисках нужной информации. Отсутствие меню или плохая навигация по сайту могут подтолкнуть пользователя быстрее уйти с вашего ресурса.
Если вы только сели за создание меню WordPress и все выглядит непонятным, вы открыли правильную статью. В ней мы расскажем, как добавить меню в WordPress, и покажем 5 плагинов, которые сделают навигацию на вашем сайте более качественной и красивой.
Из статьи узнаете:
- Как создать меню WordPress
- Как сделать меню в WordPress-конструкторе Elementor
- Плагины для создания меню в WordPress
В WordPress работа с меню может происходить несколькими способами:
- через стандартную функцию движка;
- с помощью кода;
- с использованием плагинов.
В инструкции ниже мы расскажем, как создать меню в вордпресс первым способом. Вид и расположение такого меню определяет выбранный шаблон сайта. В бесплатных WordPress-темах обычно это простое меню в шапке или подвале сайта с выпадающим списком.
Если вы хотите сделать более интересное меню для вордпресса, с большими картинками, хорошими эффектами и подобным, вам понадобятся плагины навигации. О них мы расскажем ниже.
Также имейте в виду, что для большинства плагинов все равно сначала нужно создать стандартное меню для WordPress, поэтому лучше не пропускайте эту часть статьи.
Делайте блог на хостинге с предустановленным WordPress!
Наша теплая поддержка на связи 24/7
Как создать меню WordPress
Чтобы создать меню в WordPress, первым делом зайдите в панель администратора. В меню слева выберите «Внешний вид» и перейдите в раздел «Меню».
Раздел «Добавьте элементы меню» содержит страницы вашего сайта, записи, специальные ссылки и категории. Вы можете добавить любой из этих пунктов в меню всего за несколько кликов.
Но прежде чем начать добавлять элементы, дайте своему меню короткое название, например «навигация в шапке сайта». Посетитель сайта не будет видеть название меню, оно для вашего удобства: у вас может быть несколько разных вариантов меню на странице, например в хедере и футере. Так вам будет легче их различать.
Введите имя будущего меню в строке «Название меню» и нажмите «Создать меню».
Теперь слева вы можете добавлять элементы в свое меню. Это могут быть опубликованные страницы и записи с вашего сайта, произвольные ссылки или созданные вами категории.
Как добавить пункт меню в WordPress: выберите страницу, запись или категорию или укажите произвольную ссылку и нажмите «Добавить в меню».
Справа в области «Структура меню» можно перетаскивать пункты меню, чтобы расставлять их в нужном порядке, редактировать или удалять.
Как сделать подменю в WordPress и отредактировать название пункта:
Чтобы переместить пункт меню выше, ниже или сделать вложенный список, просто перетащите его в нужное место.
Чтобы изменить название элемента меню, нажмите на стрелку рядом с ним.
Дальше выберите, где вы хотите разместить созданное меню. Большинство тем WordPress имеют несколько разных опций, в которых можно добавить меню. В моем случае я использую стандартную тему Twenty Twenty One, поддерживающую два варианта расположения меню: главное меню и дополнительное. Я могу выбрать один из них или оба.
Область расположения вы можете выбрать двумя способами:
- внизу страницы, в разделе «Настройки меню», с помощью чекбокса «Область отображения»;
- перейдя вверху страницы на вкладку «Управление областями».
Если вы не уверены, где находится каждое предлагаемое расположение меню, попробуйте сохранить его в разных местах, параллельно заходя на свой сайт, чтобы увидеть, как оно выглядит «вживую».
В разделе «Настройки меню» также есть пункт «Автоматически добавлять страницы». Если вы поставите флажок в этом чекбоксе, WordPress будет автоматически добавлять в меню новые страницы, не относящиеся к каким-либо разделам или категориям.
Когда вас будет устраивать созданная навигация, нажмите «Сохранить меню».
�� Если в разделе «Внешний вид» вы не можете найти пункт «Меню», это значит, что для вашего сайта используется редактор страниц. Для управления меню перейдите на вкладку «Внешний вид» → «Редактор» и измените блок навигации.
Нажмите в редакторе «+» в месте, где вы хотите добавить меню. Из списка блоков выберите блок «Навигация».
Выделите блок с навигацией и измените его по своим пожеланиям.
Как сделать меню в WordPress-конструкторе Elementor
Если вы используете бесплатную версию Elementor, чтобы создать меню WordPress, вам нужно выполнить действия из предыдущего раздела.
Для того чтобы использовать стандартный виджет навигации Nav Menu, вам нужно установить любую платную версию Elementor Pro.
Хостинг с предустановленным WordPress и заботливой поддержкой 24/7 ��
При заказе хостинга на полгода — зарегистрируем �� домен в подарок!
При покупке на год — скидка 20%
☝️ Гарантируем вернуть деньги в течение 30 дней, если вам что-то не понравилось или не подошло.
Плагины для создания меню в WordPress
Как мы говорили в начале статьи, со стандартными инструментами WordPress и бесплатным шаблоном удастся сделать простое меню с минимумом функций. Если вам интересна кастомизация меню WordPress, но самостоятельно писать код навигации вы не готовы, рекомендуем использовать плагины.
В этом разделе собрали для вас 5 плагинов для настройки меню WordPress. Искали популярные, чтобы для них было достаточно инструкций, с нормальными бесплатными версиями и регулярно обновляемые.
В названии большинства плагинов меню вы увидите «mega menu». В WordPress мега-меню обычно называют большие меню, которые при расширении отображают все подменю сразу. Так посетителям вашего сайта не придется перемещаться по сложному меню с кучей вложений, чтобы найти страницу или продукт, который они ищут.
Наглядный пример: при наведении на «Каталог товаров» в меню отображается наполнение категорий «Поводки», «Игрушки», «Корм» и «Другое».
Кстати, это меню я сделала с помощью плагина Mega Menu Builder ��
✔️ Mega Menu Builder
Это мой личный фаворит: связка Elementor + ElementsKit Elementor addons, в котором находится Mega Menu Builder. Такой вариант показался мне наиболее удобным: с ним красивое и функциональное WordPress-меню можно сделать за 10-15 минут даже новичку.
Плагин можно использовать бесплатно, платная версия ElementsKit с большим количеством шаблонов меню стоит $39 в год для одного сайта. В плагине есть не только навигация по сайту, он предоставляет более 70 разнообразных расширений: ленты соцсетей, виджеты галереи, контактные формы, отзывы и другие удобные функции.
Очень советую посмотреть короткий видеоурок на английском по этой связке. В нем доступно и наглядно показано, как сделать меню на WordPress бесплатно с помощью Mega Menu Builder. Если не знаете английский, в описании видео есть текстовая пошаговая инструкция — используя Google Translate тоже удастся разобраться.
✔️ Max Mega Menu
Max Mega Menu — популярный плагин для создания WordPress-меню сайта, у него более 400 000 активных установок. Благодаря популярности расширения вы найдете много инструкций и видеоуроков с ним в сети.
Max Mega Menu автоматически интегрируется в существующее меню. Дальше вы можете добавить в него любой виджет WordPress, изменить стиль с помощью редактора тем и изменить поведение меню с помощью встроенных настроек.
Есть бесплатная версия плагина, есть платная $29 за один сайт в год. В платной версии есть «липкое» меню, меню-аккордеон, можно добавлять собственные шрифты, иконки, интеграцию с WooCommerce, а также у вас будет доступ к службе поддержки.
✔️ WordPress Mega Menu — QuadMenu
Плагин QuadMenu имеет щедрую бесплатную версию: доступны вертикальное и горизонтальное меню, «липкое» меню, различные шаблоны для них, поддержка Google Fonts, иконки, строки для поиска на сайте.
Платная версия стоит $49 для одного сайта. С ней вы получаете доступ к службе поддержки на год, а также:
- возможность добавлять вкладки в меню;
- меню с прокруткой-«каруселью»;
- опцию логина и регистрации пользователя на сайте через элемент в меню;
- меню с ссылками на социальные сети.
Также даже бесплатная версия QuadMenu поддерживает адаптивность, то есть новое меню будет хорошо смотреться на любом размере экрана.
✔️ Responsive Menu
В адаптивной навигации Responsive Menu есть более 150 настроек, которые можно комбинировать, чтобы создать желаемое меню. Плагин подходит для многоязычных сайтов. Он хорошо сочетается с WPML и Polylang и позволяет изменять меню в зависимости от языка сайта, который выбирают пользователи.
Платная Pro-версия стоит $49 в год для одного сайта. С ней вы получаете интеграцию меню из WooCommerce, отображение значков социальных сетей, поддержку шрифтов Google, более широкий выбор анимации кнопок и предпросмотр изменений.
✔️ If Menu — Visibility control for Menus
Этот плагин нужен не для каждого сайта, но, возможно, вы ищете именно такие функции. С If Menu можно гибко настраивать, как отображается меню для разных групп пользователей. Вы можете показать больше элементов меню для клиентов, изменять меню для пользователей из разных стран, скрывать меню для посетителей с мобильных телефонов.
Платная версия стоит $20 в год для одного сайта. С ней можно обращаться в службу поддержки, устанавливать правила отображения меню на основе геолокации посетителя, а также есть интеграция с другими плагинами.
Что о нас пишут клиенты:
Очень много плюсов. Стабильный хостинг, грамотная поддержка, быстрое и компетентное реагирование. А еще лояльное отношение к клиенту!
Надеемся, что нам удалось раскрыть тему, как сделать меню в вордпрессе. Главный совет — не бойтесь экспериментировать с плагинами. Выбирайте тот, который удовлетворит большую ваших потребностей и пожеланий. Присмотритесь к тем вариантам, которые мы описали выше. Все они имеют бесплатные версии, так что не придется тратиться зря.
Если в процессе захотите поделиться своими лайфхаками или советами, пишите в комментариях ��
Вам могут пригодиться другие статьи о WordPress ��
- Как выбрать лучший хостинг для WordPress
- Как ускорить сайт на WordPress
- Лучшие плагины для WordPress
- Лучшие бесплатные шаблоны для WordPress — ТОП 75
- Как добавить Favicon на WordPress
Hanna Chala
Редакторка блога HOSTiQ, в прошлом начальница смены службы поддержки HOSTiQ.ua. 4 года делает работу клиентов с хостингом немного проще. Может установить SSL-сертификат или направить домен на хостинг с закрытыми глазами.
Как в WordPress сделать меню с подменю
Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» — «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.
Структура меню
Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:
- Главная
- Отзывы клиентов
- Услуги
- Подбор оборудования
- Монтаж и прокладка ЛВС
- Виртуализация
- IP-телефония
- Видеонаблюдение
- Мониторинг
Уровень вложенности меню может быть любым, но на мой взгляд, сайты, у которых больше двух уровней вложенности очень неудобны в использовании. Пока ведёшь к подпункту, предыдущий пункт закрывается или постоянно скачет перед глазами. Это по большей части проблема программиста или автора темы, но факт остаётся фактом: самый частый вариант меню на сайтах — двухуровневый.
Некоторые сходятся в мысли, что перед тем, как создать страницы, следует создать меню из ссылок-пустышек, которые никуда не ведут и попросту не работают на сайте. Это нужно для того, чтобы заранее определиться с нужными пунктами и затем создавать структуру страниц по уже готовому варианту.
В принципе, это неплохо и можем пойти по такому же пути: сначала создадим структуру, посмотрим, всё ли нормально у нас и затем уже будем создавать страницы (создать страницы вы сможете и самостоятельно, я верю в вас!).
Заходим в раздел «Внешний вид» — «Меню»:
Создаём новый набор меню или используем уже существующий.
В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции Как добавить ссылку в меню):
Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки — #, а в поле «Текст ссылки» вставляем нужную нам фразу.
Читайте также: Как добавить ссылку в меню WordPress
После нажатия на кнопку «Добавить в меню» в правой части экрана появится созданный нами пункт:
Добавляем остальные пункты в меню
Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:
Давайте сохраним наш промежуточный результат и зайдём на сайт, чтобы посмотреть, как будет выглядеть первый вариант созданного только что меню:
Пока неплохо выглядит, я думаю можно продолжить дальше. Кстати, если вы не видите созданное только что меню, тогда вам следует обратить внимание на раздел «Области темы» в интерфейсе управления меню и выбрать там нужную вам опцию. У меня это выглядит так:
Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.
Результат должен получиться следующий:
Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с рубриками, но они сделали это удобнее, взгляните:
Вам достаточно захватить кнопкой мыши нужный вам пункт и просто перетянуть его под основной пункт меню. Что в итоге я сделал: перетащил «Подбор оборудования» под «Услуги», визуально пункт подменю получил отступ с левой стороны.
По аналогии сделаем и другие пункты:
Создание меню завершается нажатием на кнопку сохранения. После этого мы можем спокойно идти на главную страницу сайта и проверять промежуточный результат:
Что дальше?
Дальше всё просто:
- Создаёте нужные вам страницы с подстраницами для Услуг
- Удаляете по очереди каждый пункт меню-заглушку
- Вставляете ссылку на созданную страницу через раздел «Страницы» интерфейса управления меню
Читайте также: Как добавить рубрики в меню WordPress
Если какие-то из пунктов вам остались непонятными — напишите об этом в комментарии, я подготовлю более развёрнутую инструкцию на этот счёт, но, как мне кажется, этого материала будет достаточно, чтобы создать развёрнутое меню в WordPress. Успехов! ��
Видео
Автор
Александр Кадыров
Занимаюсь разработкой сайтов на WordPress около 10 лет, с тех же пор стал вести блог о WordPress. В итоге это всё вылилось в этот курс, где вы сейчас находитесь. В свободное время программирую на Ruby, PHP и Golang, увлекаюсь администрированием серверов и автоматизацией своей деятельности. Посмотреть все записи автора Александр Кадыров
Лучшая навигация: как в WordPress добавить выпадающее меню
От автора: WordPress имеет встроенную систему управления меню, которая позволяет легко добавить меню на ваш сайт. Однако, по мере того, как вы добавляете все больше и больше страниц, записей и другого контента, может оказаться невозможным включить каждый пункт в стандартную строку меню.
В этих случаях вы можете обеспечить легкий доступ ко всем разделам сайта, не загромождая строку меню, заменив стандартную горизонтальную строку меню раскрывающимся меню.
В этом кратком руководстве я расскажу о двух простых способах преобразования любого стандартного меню WordPress в раскрывающееся меню.
Лучшие плагины для меню навигации WordPress
Прежде чем мы начнем, я хочу упомянуть, что вы можете найти более 7000 лучших плагинов WordPress на CodeCanyon. За небольшую одноразовую плату вы можете приобрести эти высококачественные плагины WordPress для меню навигации или других задач.
Бесплатное видео-руководство по WordPress
Кроме того, вы можете ознакомиться с нашим подробным руководством по WordPress, которое включает более чем двухчасовую подробную видео-инструкцию для начинающих. Есть даже специальный урок, посвященный использованию меню WordPress.
Создайте как минимум одно стандартное меню WordPress
Вы можете добавить функционал выпадающего меню в любое меню WordPress. Если у вас нет стандартного меню, которое вы хотите преобразовать в выпадающее, вам нужно создать его.
Войдите в свою учетную запись WordPress, если вы еще этого не сделали. В левой боковой панели WordPress выберите «Внешний вид»> «Меню», а затем нажмите кнопку «Создать новое меню». Задайте имя для меню, а затем нажмите «Создать новое меню».
Обратите внимание, что название меню не отображается нигде на сайте, это исключительно для вас. В разделе «Добавить пункты меню» перечислены все страницы, записи, пользовательские ссылки, категории и форматы, которые можно добавить в меню. Нажмите на любой раздел, чтобы увидеть все доступные элементы в этой категории. Когда вы найдете элемент, который хотите добавить в меню, установите соответствующий флажок.
Когда вы будете довольны выбором, нажмите «Добавить в меню». Все эти элементы теперь будут добавлены в меню. На данный момент вы создали стандартное меню WordPress; ваша следующая задача — добавить выпадающий список.
Преобразуйте меню WordPress в выпадающее меню
Чтобы преобразовать обычное меню в выпадающее, вам нужно использовать перетаскивание для создания «родительских» элементов, которые будут отображаться как часть основного меню, и «дочерних» элементов, которые будут отображаться как часть родительских пунктов.
Например, на следующем снимке раздел «Settings» является родительским, а «Password Reset» и «Logout» — дочерними.
Это дает следующий выпадающий список:
Вы можете разделить пункты меню на родителей и потомков в области структуры меню. Сначала захватите любой элемент, который вы хотите превратить в дочерний. Перетащите его под родительский элемент, но пока не отпускайте мышь. Сдвиньте указатель мыши немного вправо от родительского элемента. Отпустите кнопку мыши, и пункт меню должен стать дочерним по отношению к родительскому элементу.
Когда вы будете довольны тем, как организовано выпадающее меню, нажмите Сохранить меню.
Управление местоположениями: Отображение вашего меню
Теперь нам нужно разместить это выпадающее меню на веб-сайте, поэтому нажмите на вкладку «Управление местоположениями».
В зависимости от того, как настроен ваш сайт, у вас могут быть разные варианты позиционирования меню. Однако, если вы хотите, чтобы ваше меню отображалось как часть заголовка сайта, вам, как правило, нужно выбрать Главное меню, Основное меню или Основное.
Когда вы будете довольны выбором, нажмите Сохранить изменения. Выпадающее меню должно теперь отображаться в верхней части сайта.
Создание выпадающих меню с помощью кастомизатора темы
Кроме того, вы можете создавать выпадающие меню с помощью функции предварительного просмотра и кастомизатора WordPress. В левом боковом меню WordPress выберите «Внешний вид»> «Меню».
Нажмите кнопку «Управление с предварительным просмотров». Вы будете перенаправлены в область Кастомизатора темы, где сможете создать стандартное меню WordPress, нажав кнопку «Создать новое меню». Задайте меню имя и нажмите «Далее».
Нажмите «Добавить элементы» и выберите элементы, который хотите отобразить как часть меню. Чтобы превратить стандартный элемент меню в дочерний, перетащите его под элемент, который вы хотите использовать в качестве родительского. Перед отпусканием мыши перетащите дочерний элемент немного вправо, а затем отпустите. Этот элемент теперь должен быть преобразован в дочерний элемент родительского элемента, и он появится как часть его выпадающего меню.
Когда вы разделите меню на родительские и дочерние элементы, ваши изменения будут автоматически отображены на предварительном просмотре. Повторите, пока вы не будете довольны настройкой выпадающего меню.
Укажите, где должно отображаться новое раскрывающееся меню, установив один из флажков «Расположение меню». Обратите внимание, что доступные параметры будут отличаться в зависимости от используемой вами темы WordPress. Когда вы будете довольны настройкой выпадающего меню, нажмите «Опубликовать». Новое выпадающее меню должно появиться на сайте.
Вывод
В этом кратком руководстве я показал вам, как создать стандартное меню WordPress, а затем преобразовать его в выпадающее. Реализовав на своем сайте выпадающее меню, вы сможете создать удобную систему навигации.
Автор: Jessica Thornsby
Редакция: Команда webformyself.
Как сделать выпадающее меню на php?
Всем привет! Как сделать чтобы при нажатии мыши на слово открывалось следующее подменю? Имеется сайта на WordPress. Через конструктор ничего не редактируется, только какие-то основные моменты. Нашел файл sidebar.php с кодом. Я так понимаю, что нужно именно здесь и редактировать
В интернете порылся и ничего не нашел подходящего. Сам в php не шарю. Нашел файл с надписью sidebar.less. Других подходящих нет Получается нужно редактировать в этом файле?
.sidebar < //flex: 0 0 260px; //max-width: 260px; width: 260px; height: auto; float: left; border-radius: 0 0 5px 5px; border: 2px solid @primary; border-top: none; margin-top: -1.5em; >.sidebar-menu < list-style: none; padding-left: 0; margin: 0; &__item < font-size: .93em; position: relative; &::after < content: ''; position: absolute; top: 0; left: 1.43em; right: 1.4em; height: 1px; background-color: #eee; >&:first-child::after < display: none; >> &__link < display: block; padding: 1.13rem 1.13rem 1.13rem 2.6rem; text-decoration: none; position: relative; cursor: pointer; &:hover < color: @primary; >> >
Отслеживать
задан 26 авг 2022 в 14:29
1 1 1 бронзовый знакВсякие интерактивные вещи, по типу выпадающих меню и тому подобного, не имеют особого отношения к PHP и как правило делаются при помощи CSS/JS. В приведенном Вами коде просто выводится разметка в которой списком с ссылками выводятся категории в сайдбаре (боковая панель), как можно заметить по названию файла который Вы редактировали.
26 авг 2022 в 14:34
Огромное спасибо!
26 авг 2022 в 14:53Для начала, опишите что Вы собрались редактировать и чтобы что? Если Вы отредактируете LESS файл, это ничего не даст, так как он должен быть скомпилирован в CSS и сам по себе он работать не будет. Если Вы не являетесь разработчиком, то лучшее вообще не трогать файлы. К тому же перед раедактированием какого либо файла темы, сделать дочернюю тему и редактировать файлы только в дочерней теме, иначе при следующем обновлении темы, все Ваши правки слетят.
26 авг 2022 в 15:24
Если посмотреть на одну из демок темы которой Вы пользуетесь, там есть меню с дропдауном, вид у него конечно не такой как Вам нужен, но судя по вопросам которые Вы задаете, ничем хорошим это не закончится, только время потеряете.
26 авг 2022 в 15:28
Хорошо, тема возможно и самописная, просто название совпадает с одной из премиальных. Это так не работает, что просто добавил переменную и все заработало 🙂 По идее Вам просто нужно перейти в Внешний вид -> Меню и просто добавить два дочерних пункта к нужному пункту меню. Если разработчики это предусмотрели, то там будет выпадающий список.