В этом материале мы подробно изучим процесс формирования меню в WordPress. Мы добавим меню на наш ресурс, создадим многоуровневое меню и разберемся, как включать различные типы записей в меню.
Для начала, чтобы создать меню в WordPress, необходимо перейти в администраторскую панель и выбрать раздел «Внешний вид» -> «Меню». Здесь вы можете создать новое меню, просто задав ему имя и нажатием кнопки «Создать меню».
После этого на левой стороне экрана появилась панель, где вы можете выбрать, какие страницы, записи, категории или произвольные ссылки добавить в меню. Просто отметьте нужные элементы и нажмите «Добавить в меню». Затем перетащите их для изменения порядка или создания подменю — просто разместите элемент немного правее под родительским пунктом.
Не забудьте сохранить изменения, нажав на кнопку «Сохранить меню». Также вы можете назначить ваше меню для одного из доступных мест, которые могут отличаться в зависимости от вашей темы. Это можно сделать в разделе «Установка меню».
Кроме того, WordPress позволяет добавлять пользовательские элементы в меню. Вы можете создать произвольную ссылку, указав URL и название ссылки. Это полезно, если вы хотите добавить ссылку на внешний ресурс или на определенный раздел вашего сайта.
Если вы хотите редактировать уже существующие пункты меню, просто щелкните на стрелку рядом с названием пункта, чтобы открыть дополнительные параметры. Здесь можно изменить название элемента, скрыть его или удалить. После внесения правок не забудьте снова сохранить меню.
Также стоит отметить, что некоторые темы WordPress могут поддерживать стилизацию меню с помощью встроенных опций, что позволит вам изменить внешний вид вашего меню без необходимости редактировать код. Это может включать различные эффекты наведения, цвета текста и фона, а также различные иконки.
Создание и редактирование меню в WordPress — это простой и интуитивно понятный процесс, который позволяет вам легко управлять навигацией вашего сайта. Следуя этим шагам, вы сможете создать удобное и функциональное меню, соответствующее вашему контенту и структуре сайта.
Регистрация меню
Регистрация меню необходима при создании темы WordPress с нуля или при внесении изменений в существующие файлы темы. Если вы использовали готовую тему или скачали её из репозитория WordPress, то, скорее всего, меню уже зарегистрировано в ней.
Чтобы меню могло отображаться как в админ-панели, так и на вашем сайте, нужно сначала его зарегистрировать. Это включает в себя добавление специального кода в вашу тему, дающего знать ядру WordPress о том, что на сайте будет использоваться меню. Регистрация определяет места (locations), где будут располагаться меню в шаблоне.
Для регистрации меню в WordPress используются функции register_nav_menus() и register_nav_menu().
Первая функция предназначена для массовой регистрации нескольких местоположений для меню.
register_nav_menus( [ 'header' => 'Меню в шапке', 'footer' => 'Меню в подвале' ] );В параметрах функции передается массив с местоположениями. В приведенном примере мы указали два стандартных места для меню: в шапке и в подвале сайта.
Функция register_nav_menu() позволяет зарегистрировать только одно местоположение.
register_nav_menu( 'header', 'Меню в шапке' ); register_nav_menu( 'footer', 'Меню в подвале' );Эта функция принимает два параметра: местоположение и его описание, которое будет отображаться в админ-панели.
Обычно данные функции вызываются на хуке after_setup_theme. Полный код для регистрации меню будет выглядеть следующим образом:
add_action( 'after_setup_theme', 'register_custom_menu' ); function register_custom_menu() { register_nav_menus( [ 'header' =>'Меню в шапке', 'footer' => 'Меню в подвале' ] ); }Этот код нужно вставить в файл functions.php вашей темы.
После регистрации меню рекомендуется добавить поддержку для его отображения в различных местах вашей темы. Чтобы вывести меню в шаблонах, используйте функцию wp_nav_menu(), указав нужное местоположение. Например:
<?php wp_nav_menu( array( 'theme_location' => 'header' ) ); ?>Также можно настроить дополнительные параметры, такие как классы CSS, разметка и другие настройки для кастомизации вывода меню. Подробную информацию по этим параметрам можно найти в [документации WordPress](https://developer.wordpress.org/reference/functions/wp_nav_menu/).
Не забудьте, что создание и регистрация меню — это только начальный этап. Лучше всего, если вы позаботитесь о стилях и адаптивности вашего меню, чтобы оно корректно отображалось на устройствах с различными разрешениями. Использование медиа-запросов и таблиц стилей поможет добиться нужного результата, улучшая пользовательский опыт на сайте.
Вывод меню на сайте
Если вы используете готовую тему, то в ней уже может быть прописан вывод меню. В этом случае вы можете пропустить этот шаг.
После того как меню зарегистрировано, необходимо его отобразить в шаблоне. Это делается с помощью функции wp_nav_menu(). В неё передается массив с параметрами.
wp_nav_menu([ 'theme_location' => 'header' ]);В параметре theme_location указывается значение местоположения, которое мы зарегистрировали. Если мы выводим меню для шапки, то этот код следует добавить в файл header.php, внутри тега . Например, разметка шапки может быть следующей:
 . '/images/logo.png' ?>){kind=logo}
Для отображения меню в подвале веб-сайта параметр theme_location будет равен footer. Код для его вывода необходимо вставить в файл footer.php.
wp_nav_menu([ 'theme_location' => 'footer' ]);Так как на данный момент мы не создали ни одного меню в админ-панели, функция пока ничего не отобразит.
Создание меню WordPress
Создание меню в WordPress осуществляется через административную панель. Перейдите в раздел Внешний вид > Меню.
Введите Название меню в соответствующее поле. Это название будет видно только вам в админке, поэтому выбирайте его логично и понятно. Для шапки сайта можно указать: Меню в шапке сайта.
Ниже будут показаны области, где можно размещать меню — те, которые были зарегистрированы ранее (или уже присутствуют в вашей теме).
Отметьте чекбокс Меню в шапке и нажмите Создать меню.
Меню успешно создано и привязано к определенной области на сайте. После добавления в него элементов, оно станет доступным для отображения на сайте.
Добавление пунктов меню
После создания меню слева активируются элементы, которые можно добавить в меню.
Чтобы вставить пункты меню, отметьте чекбокс для необходимых элементов и нажмите кнопку Добавить в меню.
Теперь пункты появились в настройках меню, и вы можете их перетаскивать и менять порядок. Для изменения названия ссылки откройте пункт и поменяйте значение в поле Ярлык навигации.
Не забудьте нажать Сохранить меню после внесения всех изменений.
У пунктов меню есть дополнительные настройки, но они скрыты по умолчанию. Чтобы их открыть, разверните раздел Настройки экрана вверху страницы и отметьте все галочки.
Теперь у элементов меню становятся доступны расширенные свойства.
Атрибут title — добавляет всплывающую подсказку к ссылке при наведении. Разметка элемента будет содержать атрибут title.
Открывать в новой вкладке — добавляет атрибут _target=»blank» к ссылке, что заставляет ссылку открываться в новой вкладке браузера.
Классы CSS — позволяет добавлять дополнительные классы css к пункту меню. С их помощью можно изменять стили конкретного элемента или добавлять функционал с помощью JavaScript. Для указания нескольких классов используйте пробел.
Отношение к ссылке (XNF) — значение свойства будет добавлено в атрибут rel. Обычно используется nofollow, чтобы запретить поисковым системам переходить по данной ссылке.
Описание — устанавливает описание пункта меню, но эта опция работает лишь в том случае, если она поддерживается в шаблоне сайта. В большинстве тем данная функция отсутствует.
WordPress позволяет добавлять в меню различные типы элементов: страницы, записи, архивы рубрик, произвольные ссылки и много другое. Давайте рассмотрим каждый тип в отдельности.
Добавление страниц в меню
Чтобы включить страницы в меню, откройте раздел Страницы. На вкладке Самые свежие будут отображены последние добавленные страницы. Вкладка Все включает все страницы на сайте. Если у вас много страниц, удобнее всего использовать функцию Поиск, чтобы быстро найти нужные страницы.
Процесс добавления страниц обсужден ранее. Просто отмечайте нужные страницы и нажимайте кнопку Добавить в меню.
Добавление записей в меню
Выберите вкладку Записи. Появится список всех существующих записей. Добавление записей выполняется аналогично добавлению страниц.
Добавление рубрик в меню
Для добавления рубрик требуется перейти в раздел Рубрики. Выберите необходимые рубрики, чтобы они появились в меню как ссылки на архивы.
Добавление произвольных ссылок в меню
Произвольные ссылки предоставляют возможность добавлять элементы, которые не созданы в административной панели WordPress. Это может быть ссылка на внешний ресурс или, например, кнопка для обратной связи.
Зайдите в раздел Произвольные ссылки, укажите URL и текст ссылки. После добавления ссылку можно будет редактировать в настройках в любое время.
В качестве примера, добавим ссылку на страницу ВК в меню.
Создание выпадающего меню
В настройках меню имеется функционал для создания выпадающего меню. С помощью перетаскивания элементов можно организовать многоуровневое меню.
Например, создадим выпадающее меню для пункта Блог, чтобы при наведении на него открывались ссылки на рубрики.
Перейдите в настройки меню (Внешний вид > Меню) и добавьте необходимые элементы (если они ещё не добавлены).
На данный момент меню находится в плоском виде — все элементы находятся на одном уровне.
Теперь перетаскиваем элементы, которые должны находиться под пунктом Блог, чуть вправо.
По такому же принципу можно создать третий уровень вложенности. Добавьте нужные пункты меню и перетащите их к соответствующему родительскому элементу. Должно получиться следующее:
Таким образом, мы только что создали выпадающее меню с тремя уровнями вложенности.
Имейте в виду, что выпадающее меню может не работать в вашей теме, если разработчики не предусмотрели эту возможность.
Редактирование меню WordPress
Время от времени готовое меню требует корректировок. Например, вам может понадобиться добавлять новые пункты, удалять устаревшие и так далее. Правки уже созданного меню делаются в том же разделе Внешний вид > Меню.
Если вы создали несколько меню, выберите нужное из выпадающего списка перед редактированием.
Редактирование меню в WordPress похоже на его создание. Вы можете добавлять элементы, редактировать текст ссылок, менять свойства пунктов.
Чтобы удалить пункт меню, раскройте его и нажмите ссылку Удалить.
Если необходимо удалить всё меню, рядом с кнопкой Сохранить меню есть ссылка Удалить меню.
Нажмите Удалить меню и подтвердите это действие в всплывающем окне.
Итог
На этом заканчиваем. Мы детально обсудили, как формируется меню в WordPress. Изучили, как добавлять, настраивать и редактировать элементы меню. В дальнейшем мы сосредоточимся на кастомизации меню. Для этого WordPress предлагает множество инструментов, включая класс Walker и разнообразные хуки для работы с меню.