Как создать и настроить меню в WordPress?

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

Читать дальше

Редактирование и настройка меню в Вордпресс Для начала разберем функционал, доступный нам в админ-панели блога. В новых шаблонах, совместимых с последними версиями WordPress, вывод меню достаточно прост и настройка не составляет особых трудностей. После установки выбранного вами шаблона и создания основных страниц и рубрик заходим в админку блога и переходим «Внешний вид» — «Меню».

Как видно на скриншоте, в левой панели можно выбирать элементы, которые будут составлять ваше меню. Это могут быть страницы, произвольные ссылки, либо рубрики блога. Как правило, такие разделы, как «О проекте» и «Контакты» — это страницы (не путать с записями). Перед тем, как добавить страницу в меню WordPress, ее необходимо создать («Страницы» — «Добавить новую»). Можно также прямо в панели редактирования указать иерархию страниц. Справа в редакторе вы можете выбрать родительский пункт меню для текущего и его порядковый номер. Указанная структура будет отображаться в меню.

В раскрывающейся вкладке «Произвольные ссылки» вы можете указать url страницы вашего или чужого сайта, если вам необходимо, чтобы активная ссылка отображалась в меню WordPress. Чаще всего основными пунктами меню в WordPress служат именно рубрики. Для их создания заходите «Записи» — «Рубрики». В разделе «Меню» раскрываете вкладку «Рубрики» и выбираете те, которые нужно добавить:

После того, как вы нажмете «Добавить в меню», справа появятся выбранные вами элементы. Теперь можно редактировать их структуру.

Как видно из превью, рубрики «Азия», «Африка» и т.д. будут дочерними по отношению к рубрике «Страны мира». Осуществляется это путем простого перетаскивания блоков. Не забудьте при создании рубрик, также определить их иерархию. Обратите внимание на пункт «Настройки меню» в Вордпресс-админке под блоками:

Если вы поставите галочку «Автоматически добавлять страницы», то при создании новых страниц, они будут попадать в меню сами. «Области темы» это места шаблона отведенные под меню. В зависимости от темы их может быть несколько, или одна, может не быть вовсе. Выбираем «Основное меню» («Primery Menu»). Обязательно нужно нажать «Сохранить». Далее переходим в закладку «Управление областями»:

Выбираем название того меню, которое мы создали. Переходим на сайт и смотрим, что у нас получилось:

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

В данном случае в нашем распоряжении была всего одна область темы. Но что делать, если мы хотим добавить еще одно меню в другую часть шаблона WordPress? Как добавить произвольное меню в WordPress без плагина? Перед тем, как сделать меню в Вордпресс своими руками, вспомним, как создавать дочернюю тему. После того, как мы создали дочернюю тему, в которую можно вносить изменения без ущерба для основной темы, добавим в ее файл function.php следующую функцию.

Если вы не создаете дочернюю тему, то добавляем ее в основной файл функций вашей темы. Данная функция позволит нам добавить дополнительное меню WordPress в наш шаблон и создаст для него еще одну область. После добавления заходим в админку в «Управление областями»:

Должна появиться дополнительная область темы с названием, которое мы задали в функции. Нажимаем «Использовать новое меню», если хотим изменить разделы для дополнительной области, либо выбираем «Главная». Тогда в новой области будут отображаться те же разделы, что и в Primary Menu. В нашем случае создаем новое меню под названием Additional:

Выбираем для него область темы «Additional Menu». Но теперь нам нужно связать эту область с блоками шаблона. Например, нам нужно сделать дополнительное меню под шапкой сайта на WordPress. Заходим в файл header.php или копируем его в дочернюю тему. После тега body добавляем следующее:

Смотрим результат:

У нас над шапкой образовалось дополнительное меню. Теперь нам нужно задать для него стили, выровнять пункты в строку и спустить блок под шапку. Вносим следующие изменения в файл стилей style.css:

Смотрим, что получилось: