Сегодня мы освоим процесс создания меню на платформе WordPress, научимся вносить изменения в его элементы и разберемся, как определять область, в которой это меню будет отображаться.
Кроме того, мы рассмотрим более сложные настройки пунктов меню, которые могут быть незнакомы многим опытным пользователям, а также узнаем, как разместить меню в боковой панели (виджете).
Для начала, чтобы создать меню, вам необходимо зайти в административную панель WordPress и перейти в раздел «Внешний вид» -> «Меню». Здесь вы сможете создать новое меню, выбрав его название и нажав кнопку «Создать меню». После этого вам станет доступен выбор страниц, записей, категорий и произвольных ссылок, которые вы можете добавлять в ваше меню.
Не забывайте, что вы можете перетаскивать пункты меню для изменения их порядка и создавать подменю, располагая дочерние элементы под родительскими. Это особенно полезно для организации многоуровневой структуры навигации на сайте.
Также, важно установить меню в нужной области. В разделе «Управление местоположениями» вы сможете выбрать, где ваше меню будет отображаться: верхнее меню, нижнее меню, меню в боковой панели и т.д. Это зависит от вашей темы WordPress и доступных областей для меню.
Наконец, не забывайте про возможность добавления пользовательских ссылок в меню и изменения его внешнего вида с помощью CSS. Это даст вам больше гибкости в дизайне и поможет сделать навигацию на вашем сайте более интуитивной.
Как создать новое меню
В административной панели вашего сайта наведите курсор на раздел «Внешний вид» в боковом меню и выберите пункт «Меню». Затем нажмите на него.
Увеличить.
Внешний вид — Меню
Если ранее были созданы какие-либо меню, они появятся в выпадающем списке. Но нас интересует процесс создания нового меню. Кликаем на подходящую ссылку.
Увеличить.
Создать новое меню
Система предложит ввести название для нового меню. Это название будет видно только в административной панели, поэтому следует выбрать понятное имя. Например, можно назвать его «Верхнее меню», «Нижнее меню», «Меню с иконками» и т.д.
Почему стоит называть меню по признаку местоположения или внешнего вида? Многие шаблоны позволяют выводить несколько меню одновременно (в верхней части, внизу, в боковой панели, на отдельных страницах и прочее). Таким образом, вы быстрее поймете, о каком меню идет речь, и сможете оперативно внести нужные изменения.
Мы только что создали новое меню, но оно пока пустое!
Теперь давайте добавим элементы в наше новое меню. Для этого в левой части экрана вы увидите блоки с доступными страницами, записями, категориями и произвольными ссылками. Выберите необходимые пункты и нажмите кнопку «Добавить в меню». Они появятся в правом блоке, где вы можете перетаскивать их для изменения порядка отображения.
Не забудьте сохранить изменения, нажав кнопку «Сохранить меню». После сохранения, ваше меню станет доступным для отображения на сайте в выбранных вами местах. Также вы можете назначить это меню для использования в определенной области, если ваш шаблон поддерживает несколько навигационных меню.
При редактировании элементов меню вы можете указать дополнительные настройки, такие как ссылки, описание и классы CSS, что поможет вам настроить внешний вид и функциональность элементов в соответствии с вашими потребностями.
Как наполнить меню пунктами и отредактировать
Давайте заполним его. Для этого используем левую боковую панель в настройках меню.
Увеличить.
Добавление пунктов меню
По умолчанию в доступе находятся Страницы, Записи, Рубрики и Произвольные ссылки. В зависимости от установленной темы или плагинов могут появляться и другие таксономии (типы записей/страниц).
Теперь рассмотрим пример. Нам нужно добавить в верхнее меню следующие пункты:
- Главная
- Карта сайта
- Мы на YouTube
- Контакты
Некоторые страницы уже созданы, поэтому выделяем их галочками и нажимаем «Добавить в меню». Если каких-то страниц не хватает, просто создайте их, и они отобразятся в этом списке.
Пункт меню «Мы на YouTube» будет вести на сторонний ресурс, поэтому необходимо добавить произвольную ссылку. Укажите адрес вашего канала на YouTube и текст ссылки.
Увеличить.
Произвольные ссылки меню
Пункты меню добавлены, но порядок пока не тот, что нам нужен.
Увеличить.
Меню почти готово
WordPress позволяет упорядочить пункты меню методом перетаскивания (drag & drop). Просто «схватите» пункт меню левой кнопкой мыши и переместите его на нужное место, затем отпустите кнопку.
Увеличить.
Перетаскиваем пункт меню
Теперь нам нужно указать, что это меню должно отображаться в верхней части сайта.
Для этого прокрутите страницу вниз до секции «Местоположение меню». Здесь вы увидите разные области для размещения меню, в зависимости от вашей темы. Убедитесь, что выбрано нужное местоположение (например, «Главное меню» или «Верхнее меню»). После этого не забудьте нажать кнопку «Сохранить меню» в правом верхнем углу, чтобы сохранить ваши изменения.
Также есть возможность добавлять подменю. Для этого просто перетащите пункт меню немного вправо под нужный элемент. Это создаст вложенность и сделает ваш сайт более структурированным и удобным для навигации.
Не забывайте время от времени обновлять меню, добавляя новые страницы или удаляя устаревшие ссылки, чтобы ваши посетители всегда могли легко найти актуальную информацию.
Область отображения меню
Обратите внимание на параметр «Область отображения» внизу настроек созданного вами меню.
У данной темы сайта есть две области меню: «Верхнее» и «Нижнее».
Если отметить галочку рядом с «Верхнее», то меню отобразится именно там.
В других темах может быть предложено больше вариантов для размещения меню, и некоторые плагины могут добавлять свои области. Например:
Увеличить.
Сайт с несколькими областями меню
Обычно разработчики тем и плагинов подписывают названия областей так, чтобы было понятно пользователю.
Вы можете выбрать несколько областей для одного меню, и тогда оно будет отображаться в них одновременно.
Кроме того, рекомендуется настраивать порядок пунктов меню, чтобы улучшить навигацию по сайту. Порядок можно изменить простым перетаскиванием пунктов в интерфейсе редактирования меню.
Также обратите внимание, что можно добавлять пользовательские ссылки, используя опцию «Произвольная ссылка,» что позволяет создать уникальные элементы меню. Это может быть полезно для ссылок на внешние ресурсы или специальные страницы.
Не забудьте о загрузке изображений для создания более визуально привлекательного меню, особенно если ваша тема это поддерживает. Это также может включать значки для пунктов меню, которые помогут пользователю легче ориентироваться.
Нажмите «Сохранить меню», и все готово. Проверьте, как меню выглядит на фронтальной части сайта.
Аналогичным образом вы можете создать меню для нижней части сайта с другим набором пунктов.
Как сделать выпадающее меню
Создадим в нашем новом меню элемент с выпадающим списком. Например, пункт «Рубрики», в котором будут перечислены наши рубрики.
Ваша тема должна поддерживать выпадающее меню, не во всех таких функция реализована.
Создадим произвольный пункт «Рубрики» с символом решетки # вместо ссылки. Клик по этому пункту не должен никуда перенаправлять, поскольку общей страницы «Рубрики» на сайте просто нет и она не требуется.
Увеличить.
Создаем пункт Рубрики
Теперь добавим в меню наши существующие рубрики сайта.
Увеличить.
Добавляем рубрики сайта
Они были добавлены в общий список в конце меню. Это не совсем то, что нам нужно.
Увеличить.
Рубрики в общем списке
Теперь щелкаем на нужную рубрику левой кнопкой мыши и перетаскиваем ее ниже пункта «Рубрики», немного смещая вправо.
Увеличить.
Смешение подпункта меню
Таким образом, мы создали иерархию пунктов, получив тем самым выпадающее меню. В пункте «Прочие материалы» я добавил еще одно вложение, т.е. при наведении мыши на этот пункт появятся дополнительные подпункты.
Увеличить.
Создаем сложную структуру меню
Дополнительные опции пунктов меню
В верхнем правом углу находится кнопка «Настройки экрана».
Разобьем это по пунктам.
Цель ссылки
При активном этом пункте появляется возможность указать, что ссылка должна открываться в новой вкладке браузера. Тем, кто знаком с HTML, будет понятно, что эта опция добавляет к пункту меню атрибут target=»_blank».
Увеличить.
Открыть в новой вкладке
Атрибут title
Этот пункт добавляет поле ввода названия для вашего пункта меню, которое будет появляться при наведении на него. В HTML это параметр title=»» у ссылки (привет SEO).
Классы CSS (Классы для li)
Позволяет задать индивидуальный класс для элемента li в списке. Это может использоваться разработчиками для назначения индивидуальных стилей или привязки неких сценариев JS к этому пункту. Но большинство пользователей, вероятно, никогда не воспользуются этой функцией.
Отношение к ссылке (XFN)
Это поле выводит значение в атрибуте rel. На практике чаще всего применяются nofollow или noindex для оптимизации в поисковых системах. Но у этого атрибута есть и другие возможности, о которых можно узнать здесь.
Описание
Это текст, который может появляться при наведении на пункт меню или рядом с его названием. В зависимости от дизайна темы это может реализовываться по-разному. На практике такой функционал используется довольно редко.
Иконки
Это не стандартная функция WordPress и зависит от конкретной темы. В нашем случае используется тема Romb, которая поддерживает иконки для пунктов меню в верхней части сайта, а также в произвольном меню. У иконок можно менять цвет.
Увеличить.
Иконки в меню
Достаточно выбрать любую иконку из предоставленного окна.
Увеличить.
Окно выбора иконок
Аналогично вы можете выбрать цвет иконки в появляющейся палитре.
Как вывести меню в сайдбаре
Для этого переходим в боковую консоль админки сайта в раздел «Внешний вид» — «Виджеты».
Добавляем из списка виджет «Меню навигации» и в его настройках выбираем ранее созданное меню.
Если обратиться к теме Romb, то у нее предусмотрен специальный виджет, который будет отображать также и иконки, которые вы уже выбрали.
Увеличить.
Меню с иконками
На этом всё. Если у вас возникли вопросы, не стесняйтесь задавать их в комментариях.