Создание меню WordPress
В CMS WordPress можно делать произвольное меню, которое встраивается в любую тему и редактируется через панель администрирования. Попробуем создать такое меню.
Для начала нам потребуется включить возможность создания пользовательских меню в нашей теме. Для этого откроем файл functions.php в папке с темой и добавим туда вызов функции register_nav_menus, в котором будет массив с названиями мест, куда может быть встроено наше меню код:
'Верхнее меню', 'bottom' => 'Нижнее меню' ));Функция «register_nav_menus» регистрирует меню. Сами меню настраиваются в панели администрировани и в дальнейшем будут выводиться в шаблоне с помощью функции «wp_nav_menu».
Таким образом мы зарегистрировали два меню с идентификаторами «top» и «bottom». Теперь перейдём в панель администрирования. В закладке «Внешний вид» — «Меню» найдите вкладку «Управление областями». Вы увидите в списке название «Верхнее меню» и «Нижнее меню» — это области темы, которые мы зарегистрировали под меню ранее с помощью функции «register_nav_menus». В выпадающих списках выберите меню, которые необходимо отображать в этих областях. Чтобы создать сами меню и настроить пункты используйте закладку «Редактировать меню». В ней создайте меню и сохраните его. Затем вернитесь на вкладку «Управление областями» и выберите созданное меню для отображения в нужной области.
После окончания изменения меню в панели администрирования попробуем добавить его в тему сайта. Для этого откройте нужный файл шаблона и добавьте в него следующий PHP код с вызовом функции «wp_nav_menu»:
'', // (строка) Расположение меню в шаблоне. Ключ, под которым было зарегистрировано меню в функции register_nav_menus (в нашем случае это "top" или "bottom") 'menu' => '', // (строка) Название выводимого меню. Если не указать, то берётся название из панели администрирования. Если указано, то параметр 'theme_location' игнорируется. Можно вместо названия указывать id меню - целое число. 'container' => 'div', // (строка - название тега) Чем обрамляется меню. Если не указано, то это тег div. 'container_class' => '', // (строка) содержание атрибута class контейнера (div тега) 'container_id' => '', // (строка) id контейнера (div тега) 'menu_class' => 'menu', // (строка) содержание атрибута class меню (списка ul) 'menu_id' => '', // (строка) id меню (списка ul) 'echo' => true, // (логическая) Выводить меню (при значении "true") или возвращать код вывода в переменную (при значении "false"). 'fallback_cb' => 'wp_page_menu', // (строка) Резервная функция, если меню не существует 'before' => '', // (строка) Текст перед каждым пунктом меню 'after' => '', // (строка) Текст после каждого пункта меню 'link_before' => '', // (строка) Текст перед анкором ссылки 'link_after' => '', // (строка) Текст после анкора ссылки 'depth' => 0, // (целое число) Глубина вложенности (0 - нет ограничений, 2 - два уровня меню) 'walker' => '', // (объект) Класс собирающий меню. По умолчанию объект класса Walker_Nav_Menu ));Пустые параметры можно не указывать, поэтому код выше можно переписать так:
'top', 'container' => 'div', ));Проверка существования регистрации меню
В WordPress есть функция has_nav_menu, которая проверяет было ли зарегистрировано меню по заданному идентификатору (в нашем случае значения «top» и «bottom»). Эту функцию часто используют при выведении меню. К примеру, так:
'top', 'container' => 'div', )); >else
Создание и настройка меню в WordPress
Приветствую друзья! В этом уроке вы узнаете как создать меню в WordPress и как добавить страницу в меню. В прошлых уроках мы уже разобрались с Вами как создавать страницы и записи в WordPress, а сегодня мы научимся и пошагово разберем как создать меню и как добавить вторую вкладку в шапке сайта (выпадающее подменю) в WordPress.
Создание меню в WordPress
1. Для начала необходимо перейдите в панели администратора в Внешний вид — Меню.
2. Теперь необходимо создать меню, для этого нажимаем по «Создайте новое меню».
3. В текстовом поле вводим название для меню WordPress и нажимаем кнопку «Создать меню».
4. Меню создано. Теперь необходимо добавить нужные Вам страницы, записи, метки, рубрики и т.п. в меню WordPress. Для этого нужно выбрать необходимый пункт, например «Страницы» и отметить галочками те, которые Вы хотите добавить. После этого нажимаем «Добавить в меню».
После того как вы добавили нужные страницы, рубрики или записи в меню нажмите «Сохранить меню».
Важно! Если Вы не видите в списке нужные пункты, нажмите в верхнем правом углу «Настройка экрана» и проставьте галочки на необходимых пунктах. После этого они появятся в списке и вы сможете добавить их в меню.
5. Для того, чтобы созданное меню отображалось на главной странице сайта WordPress, необходимо перейти в «Управление областями» и выбрать в списке созданное нами меню, после чего нажать «Сохранить изменения».
Вот и все! Как видите, всего за несколько шагов можно легко создать новое меню в WordPress.
Порядок размещения меню в WordPress
Для того чтобы изменить порядок пунктов в меню, необходимо зажать левой кнопкой мыши нужный нам пункт и перетянуть его выше или ниже. Для сохранения изменений нажмите «Сохранить меню».
В этом примере страницу «Роланд Дискейн» передвигаем в меню после «Добавление видео»
Создание выпадающего меню в WordPress
Для того чтобы сделать выпадающее подменю, необходимо зажать левой кнопкой мыши нужный нам пункт и перетянуть его левее под пункт меню, из которого будет выпадать наше подменю.
В этом примере страницу «Пример страницы» делаем выпадающим подменю для пункта меню «Роланд Дискейн»
Если у вас возникли вопросы по созданию меню, задавайте их в комментариях.
Приветствую друзья! В этом уроке вы узнаете как создать меню в WordPress и как добавить страницу в меню. В прошлых уроках мы уже разобрались с Вами как создавать страницы и записи в WordPress, а сегодня мы научимся и пошагово разберем как создать меню и как добавить вторую вкладку в шапке сайта (выпадающее подменю) в WordPress. Создание меню в WordPress 1. Для начала необходимо перейдите в панели администратора в Внешний вид — Меню. 2. Теперь необходимо создать меню, для этого нажимаем по «Создайте новое меню». 3. В текстовом поле вводим название для меню WordPress и нажимаем кнопку «Создать меню». 4. Меню создано. Теперь необходимо добавить нужные Вам страницы,…
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Как в WordPress сделать меню с подменю
Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» — «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.
Структура меню
Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:
- Главная
- Отзывы клиентов
- Услуги
- Подбор оборудования
- Монтаж и прокладка ЛВС
- Виртуализация
- IP-телефония
- Видеонаблюдение
- Мониторинг
Уровень вложенности меню может быть любым, но на мой взгляд, сайты, у которых больше двух уровней вложенности очень неудобны в использовании. Пока ведёшь к подпункту, предыдущий пункт закрывается или постоянно скачет перед глазами. Это по большей части проблема программиста или автора темы, но факт остаётся фактом: самый частый вариант меню на сайтах — двухуровневый.
Некоторые сходятся в мысли, что перед тем, как создать страницы, следует создать меню из ссылок-пустышек, которые никуда не ведут и попросту не работают на сайте. Это нужно для того, чтобы заранее определиться с нужными пунктами и затем создавать структуру страниц по уже готовому варианту.
В принципе, это неплохо и можем пойти по такому же пути: сначала создадим структуру, посмотрим, всё ли нормально у нас и затем уже будем создавать страницы (создать страницы вы сможете и самостоятельно, я верю в вас!).
Заходим в раздел «Внешний вид» — «Меню»:
Создаём новый набор меню или используем уже существующий.
В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции Как добавить ссылку в меню):
Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки — #, а в поле «Текст ссылки» вставляем нужную нам фразу.
Читайте также: Как удалить меню в WordPress
После нажатия на кнопку «Добавить в меню» в правой части экрана появится созданный нами пункт:
Добавляем остальные пункты в меню
Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:
Давайте сохраним наш промежуточный результат и зайдём на сайт, чтобы посмотреть, как будет выглядеть первый вариант созданного только что меню:
Пока неплохо выглядит, я думаю можно продолжить дальше. Кстати, если вы не видите созданное только что меню, тогда вам следует обратить внимание на раздел «Области темы» в интерфейсе управления меню и выбрать там нужную вам опцию. У меня это выглядит так:
Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.
Результат должен получиться следующий:
Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с рубриками, но они сделали это удобнее, взгляните:
Вам достаточно захватить кнопкой мыши нужный вам пункт и просто перетянуть его под основной пункт меню. Что в итоге я сделал: перетащил «Подбор оборудования» под «Услуги», визуально пункт подменю получил отступ с левой стороны.
По аналогии сделаем и другие пункты:
Создание меню завершается нажатием на кнопку сохранения. После этого мы можем спокойно идти на главную страницу сайта и проверять промежуточный результат:
Что дальше?
Дальше всё просто:
- Создаёте нужные вам страницы с подстраницами для Услуг
- Удаляете по очереди каждый пункт меню-заглушку
- Вставляете ссылку на созданную страницу через раздел «Страницы» интерфейса управления меню
Читайте также: Как добавить ссылку в меню WordPress
Если какие-то из пунктов вам остались непонятными — напишите об этом в комментарии, я подготовлю более развёрнутую инструкцию на этот счёт, но, как мне кажется, этого материала будет достаточно, чтобы создать развёрнутое меню в WordPress. Успехов! ��
Видео
Автор
Александр Кадыров
Занимаюсь разработкой сайтов на WordPress около 10 лет, с тех же пор стал вести блог о WordPress. В итоге это всё вылилось в этот курс, где вы сейчас находитесь. В свободное время программирую на Ruby, PHP и Golang, увлекаюсь администрированием серверов и автоматизацией своей деятельности. Посмотреть все записи автора Александр Кадыров
Как добавить меню в 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-сертификат или направить домен на хостинг с закрытыми глазами.