Плагины, темы и скрипты
собственной разработки

Обратная связь

Меню сайта на WordPress: как создать и отредактировать

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

Кроме этого узнаем о продвинутых настройках пунктов меню, о которых не каждый "бывалый" владелец сайта знает, а так же как вывести меню в сайдбаре (виджете).

Как создать новое меню

В админке сайта в боковой консоли наводим мышку на пункт "Внешний вид" и здесь нас интересует пункт "Меню". Кликаем по нему.

Меню сайта на WordPress: как создать и отредактировать

Увеличить.
Внешний вид - Меню

Если у вас уже были созданы ранее меню, то они отобразятся в выпадающем списке. Нас интересует создание нового меню. Кликаем на соответствующую ссылку.

Увеличить.
Создать новое меню

Нам предлагают ввести название меню. Это название будет видно только вам в админке и поэтому "обзовите" его как-то понятно. Например "Верхнее меню", "Нижнее меню", "Меню с иконками" и т.п.

Увеличить.
Называем меню

Почему лучше называть меню по признаку расположения или внешнему виду? Многие темы поддерживают одновременно вывод нескольких меню (в шапке, подвале, сайдбаре, отдельных страницах и т.п.). Таким образом вы всегда сможете по названию понять что за меню и выполнить работу по настройке быстрее.

Мы создали только что новое меню. Но оно пустое!

Увеличить.
Новое меню

Как наполнить меню пунктами и отредактировать

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

Увеличить.
Добавляем пункты меню

Здесь по-умолчанию представлены Страницы, Записи, Рубрики, Произвольные ссылки. Так же могут быть другие таксономии (типы записей/страниц), в зависимости от вашей темы или установленных плагинов.

А теперь на примере. Нам необходимо в верхнем меню разместить пункты:

  • Главная
  • Карта сайта
  • Мы на YouTube
  • Контакты

Некоторые страницы у нас уже созданы и поэтому их достаточно выделить галками и нажать "Добавить в меню". Если каких-то страниц нет, то просто их создадите и они появятся здесь в списке.

Увеличить.
Наполняем меню

Пункт меню "Мы на YouTube" будет вести на внешний сайт, поэтому необходимо будет создать произвольную ссылку в соответствующем пункте. Указываете путь до вашего канала YouTube и пишите текст ссылки.

Увеличить.
Произвольные ссылки меню

Пункты меню размещены. Но они не в той очередности, что нам нужна.

Увеличить.
Меню почти готово

WordPress позволяет выстраивать структуру меню при помощи перетаскивания пунктов в нужное место (т.н. drag & drop). Просто "схватите" левой клавишей мышки пункт меню и перетяните его на позицию между нужными вам пунктами.А потом отпустите кнопку.

Увеличить.
Перетягиваем пункт меню

Осталось указать что это меню должно отображаться сверху сайта.

Область отображения меню

Обратите внимание на пункт "Область отображения" снизу настроек созданного вами меню.

Увеличить.
Область отображения меню

У данной темы сайта 2 области меню: "Верхнее" и "Нижнее".

Если мы поставим галку напротив "Верхнее", то наше меню там и отобразится.

В других темах может быть больше вариантов размещения меню, а так же некоторые плагины могут добавлять свои области. Например:

Увеличить.
Сайт с несколькими областями меню

Обычно разработчики тем и плагинов подписывают названия областей так, чтобы было понятно всем.

Вы можете выбрать несколько областей для одного меню и тогда оно будет одновременно выводится в них.

Нажимаем "Сохранить меню" и все готово. Проверяем у себя на фронте сайта как отобразилось.

Аналогичным образом можете создать меню для подвала (нижнее) с другим набором пунктов.

Как сделать выпадающее меню

Сделаем в только что созданном меню элемент, в котором будет выпадающий список. Например пункт "Рубрики" и в нем наши рубрики.

Выпадающее меню должна поддерживать ваша тема. Не во всех такое есть.

Создадим произвольный пункт "Рубрики" с знаком решетки # вместо ссылки. Клик по этому пункту у нас не должен никуда вести, т.к. такой страницы общей "Рубрики" просто физически нет на сайте, да и не нужна она.

Увеличить.
Создаем пункт Рубрики

Теперь добавляем в меню наши существующие рубрики сайта.

Увеличить.
Добавляем рубрики сайта

Они стали общим списком в конец меню. Нас это не устраивает.

Увеличить.
Рубрики в общем списке

А теперь схватим нужную нам рубрику левой клавишей мыши и перетащим ее прямо под пункт "Рубрики" немного со смещением направо.

Увеличить.
Смешение подпункта меню

Таким образом мы создали иерархию пунктов, оно же выпадающее меню. А в пункте "Прочие материалы" я сделал еще одно вложение, т.е. при наведении мышки на этот пункт появятся еще пункты.

Увеличить.
Создаем сложную структуру меню

Дополнительные опции пунктов меню

Сверху справа есть кнопка "Настройки экрана".

Увеличить.
Настройки экрана

Разберем по порядку.

Цель ссылки

При включении этого пункта появляется возможность указать, что при клике на эту ссылку страница должна открыться в новой вкладке браузера. Если кто знаком с HTML, то эта галка просто добавляет пункту меню target="_blank"

Увеличить.
Открыть в новой вкладке

Атрибут title

Данный пункт добавляет поле ввода названия вашего пункта меню, которое будет появляться при наведении мышки на него. В разметке html это параметр title="" у ссылки (привет SEO).

Увеличить.
Атрибут title

Классы CSS (Классы для li)

Позволяет задать индивидуальный class для элемента li в списке. Используется верстальщиками в целях придания отдельно взятому пункту индивидуального стиля или "повесить" на пункт какой-то сценарий js. Обычному пользователю может никогда не пригодиться.

Увеличить.
Class элемента

Отношение к ссылке (XFN)

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

Увеличить.
Параметр rel

Описание

Это текст, который может появляться при наведении на пункт меню, либо рядом с названием пункта. Все зависит от самой темы и задумки разработчика. На практике редко используется.

Увеличить.
Описание

Иконки

Это не стандартный функционал WordPress и полностью зависит от самой темы. На нашем примере используется тема Romb и в ней предусмотрены иконки для пунктов меню в верхней части сайта, а так же в произвольном меню. У иконок можно менять цвет.

Увеличить.
Иконки в меню

Достаточно выбрать любую иконку из появляющегося окна.

Увеличить.
Окно выбора иконок

Аналогично выбираем цвет иконки в появляющейся по клику палитре.

Увеличить.
Цвет иконки

Как вывести меню в сайдбаре

Для этого перейдем в боковой консоли админки сайта "Внешний вид" - "Виджеты".

Увеличить.
Виджеты

Добавим из списка виджет "Меню навигации" и в его настройках выберем созданное ранее меню.

Увеличить.
Меню навигации

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

Увеличить.
Меню с иконками

На этом все. Если будут вопросы - не стесняйтесь задавать в комментариях.

Добавить комментарий

наверх