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