Как создать горизонтальное меню в WordPress: полное руководство

Горизонтальное навигационное меню является фундаментальным элементом дизайна любого веб-сайта, обеспечивая интуитивно понятный доступ к ключевым разделам. В WordPress создание и управление меню достаточно гибко и может быть реализовано несколькими способами, подходящими как для начинающих, так и для опытных разработчиков.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Что такое горизонтальное меню и почему оно важно

Горизонтальное меню — это элемент пользовательского интерфейса, расположенный, как правило, в верхней части веб-страницы (в области хедера или под ним), который содержит ссылки на основные разделы сайта. Его основная функция — организация навигации и предоставление пользователю быстрого способа перемещения по структуре ресурса.

Важность горизонтального меню трудно переоценить. Оно напрямую влияет на юзабилити сайта, время, проведенное пользователем на ресурсе, а также на SEO-показатели за счет правильной внутренней перелинковки. Хорошо спроектированное горизонтальное меню делает сайт более доступным и понятным.

Различные типы горизонтальных меню в WordPress (основные, выпадающие, мега-меню)

В WordPress можно реализовать несколько типов горизонтальных меню:

Основные (простые) меню: Плоская структура без подпунктов. Подходит для сайтов с минимальным количеством основных разделов.

Выпадающие меню (Dropdown): Пункты верхнего уровня имеют дочерние подпункты, которые раскрываются при наведении курсора. Это самый распространенный тип для сайтов со средней или сложной структурой.

Мега-меню (Mega Menu): Расширенные выпадающие меню, которые могут отображать множество ссылок, сгруппированных по категориям, а также включать мультимедийный контент или виджеты. Часто используются на крупных интернет-магазинах или порталах.

Выбор типа меню зависит от объема контента на сайте и его структуры.

Обзор методов создания: через админ-панель, с помощью плагинов и кодом

Создать горизонтальное меню в WordPress можно тремя основными способами:

Через стандартную админ-панель: Наиболее простой и доступный способ, не требующий навыков программирования. Позволяет создавать, редактировать и упорядочивать пункты меню.

С помощью плагинов: Существуют специализированные плагины, которые расширяют функциональность стандартного меню, позволяя создавать более сложные структуры (например, мега-меню) и гибко настраивать их внешний вид.

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

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

Создание горизонтального меню через админ-панель WordPress

Стандартный механизм WordPress для работы с меню мощный и интуитивно понятный.

Доступ к разделу «Меню» в WordPress

Для управления меню необходимо перейти в раздел "Внешний вид" > "Меню" в административной панели вашего сайта WordPress. Этот раздел является центральным хабом для всех операций с навигационными меню.

Создание нового меню и присвоение ему имени

При первом посещении раздела "Меню" или если у вас еще нет созданных меню, вам будет предложено создать новое. Введите имя для вашего меню (например, "Главное меню", "Верхнее меню") в поле "Название меню" и нажмите кнопку "Создать меню". Название меню не отображается на сайте, оно служит только для вашей идентификации в админ-панели.

Добавление страниц, записей, произвольных ссылок и рубрик в меню

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

Страницы: Статичные страницы вашего сайта (например, "О нас", "Контакты").

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

Произвольные ссылки: Позволяют добавить ссылку на любой URL, как внутренний, так и внешний. Требует ввода URL и текста ссылки.

Рубрики: Ссылки на архивы записей, принадлежащих определенным рубрикам.

Выберите нужные элементы, отметьте их галочками и нажмите кнопку "Добавить в меню".

Настройка порядка элементов меню и создание выпадающих подменю

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

Выбор расположения меню (верхнее, нижнее и т.д.) в настройках темы

Большинство современных тем WordPress поддерживают одно или несколько предопределенных местоположений для меню (например, "Основное меню", "Меню в футере", "Меню в шапке"). В разделе "Настройки меню" под блоком редактирования меню выберите соответствующее расположение для вашего созданного меню и установите галочку. Доступные расположения зависят от вашей активной темы.

Сохранение и предварительный просмотр меню

После всех изменений обязательно нажмите кнопку "Сохранить меню". Теперь ваше меню должно отобразиться на сайте в выбранном местоположении. Рекомендуется просмотреть сайт во фронтенде, чтобы убедиться, что меню отображается корректно.

Использование плагинов для создания горизонтальных меню

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

Обзор популярных плагинов для создания меню (например, Max Mega Menu, Responsive Menu)

Существует множество плагинов, расширяющих функциональность меню. Среди популярных можно выделить:

Max Mega Menu: Один из самых мощных плагинов для создания мега-меню. Предлагает широкие возможности кастомизации, поддержку виджетов и гибкие настройки адаптивности.

Responsive Menu: Фокусируется на создании адаптивных меню, особенно для мобильных устройств. Позволяет полностью контролировать внешний вид и поведение меню на разных разрешениях.

Mega Main Menu: Еще один популярный плагин для мега-меню с множеством опций стилизации и возможностью добавления иконок и изображений.

Выбор плагина зависит от требуемой функциональности (простое адаптивное меню, мега-меню и т.д.) и удобства интерфейса.

Установка и активация плагина

Установка плагина стандартна для WordPress: перейдите в "Плагины" > "Добавить новый", найдите нужный плагин по названию, нажмите "Установить", а затем "Активировать".

Настройка меню через интерфейс плагина (добавление элементов, стилизация)

После активации плагина, как правило, появляется новый пункт в меню админ-панели или настройки плагина интегрируются в существующий раздел "Внешний вид" > "Меню". Интерфейс настройки может сильно отличаться в зависимости от плагина. Обычно он позволяет:

Добавить элементы в меню (как и стандартный интерфейс).

Настроить дополнительные опции для каждого пункта (иконки, описание).

Гибко настроить внешний вид меню (цвета, шрифты, отступы, анимация).

Определить поведение меню на различных устройствах (адаптивность).

Преимущества и недостатки использования плагинов

Преимущества:

Расширенная функциональность (мега-меню, иконки, более гибкая стилизация).

Дружественный интерфейс для сложных настроек без кода.

Часто включают готовые решения для адаптивности.

Недостатки:

Добавление стороннего кода может потенциально замедлить сайт.

Конфликты с темой или другими плагинами.

Зависимость от разработчика плагина в плане обновлений и поддержки.

Некоторые мощные функции могут быть доступны только в платной версии.

Создание горизонтального меню с помощью кода (для продвинутых пользователей)

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

Регистрация нового меню в файле functions.php вашей темы

Первый шаг при создании меню через код — это регистрация области меню (theme location) в файле functions.php вашей активной темы. Это сообщает WordPress, где в вашей теме могут отображаться меню.

 __( 'Основное горизонтальное меню', 'mytheme_textdomain' ),
            // 'footer-menu'  => __( 'Меню в футере', 'mytheme_textdomain' ), // Пример регистрации другого меню
        )
    );
}

add_action( 'after_setup_theme', 'mytheme_register_nav_menus' );
?>

В этом коде мы регистрируем одно местоположение 'primary-menu' с отображаемым именем "Основное горизонтальное меню". mytheme_textdomain должен быть заменен на текстовый домен вашей темы для корректной локализации.

Использование функций `wp_nav_menu()` для вывода меню в нужном месте темы

После регистрации, меню можно вывести в любом файле шаблона вашей темы (например, header.php, index.php, footer.php) с помощью функции wp_nav_menu(). Эта функция имеет множество аргументов для настройки вывода.

 'primary-menu', // Идентификатор зарегистрированного местоположения
            'container'      => 'nav',          // Элемент-обертка для меню
            'container_class'=> 'main-navigation', // CSS класс для обертки
            'menu_class'     => 'nav-menu horizontal-menu', // CSS класс для списка ul
            'depth'          => 2,              // Максимальная глубина меню (0 для всех, 1 для топ-уровня, 2 для выпадающих)
            'fallback_cb'    => false,          // Отключить вывод меню по умолчанию, если не выбрано в админке
            'link_before'    => '',       // HTML перед текстом ссылки
            'link_after'     => '',        // HTML после текста ссылки
        )
    );
}

// Пример вызова функции в файле шаблона:
// mytheme_display_primary_menu();
?>

Этот пример выводит меню, назначенное местоположению 'primary-menu'. Параметры container, container_class, menu_class важны для последующей CSS-стилизации.

Кастомизация внешнего вида меню с помощью CSS (стилизация, цвета, шрифты)

После вывода HTML-структуры меню с помощью wp_nav_menu(), внешний вид полностью контролируется CSS. Файл style.css вашей темы — подходящее место для добавления стилей.

/* styles.css */

/* Стили для обертки меню */
.main-navigation {
    background-color: #f1f1f1;
    padding: 0 20px;
}

/* Стили для горизонтального списка */
.main-navigation .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Делает элементы меню горизонтальными */
    justify-content: center; /* Выравнивание по центру */
}

/* Стили для пунктов меню */
.main-navigation .nav-menu li {
    position: relative; /* Для позиционирования выпадающих подменю */
    margin: 0 15px;
    padding: 15px 0;
}

/* Стили для ссылок в меню */
.main-navigation .nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block; /* Делает всю область li кликабельной */
}

/* Стили при наведении */
.main-navigation .nav-menu a:hover {
    color: #0073aa;
}

/* Стили для выпадающих подменю (скрыты по умолчанию) */
.main-navigation .nav-menu ul.sub-menu {
    display: none; /* Скрыть подменю */
    position: absolute;
    top: 100%; /* Расположить под родительским элементом */
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px;
    z-index: 99;
}

/* Стили для пунктов выпадающего меню */
.main-navigation .nav-menu ul.sub-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
}

/* Стили для ссылок в выпадающем меню */
.main-navigation .nav-menu ul.sub-menu a {
    padding: 10px 15px;
    font-weight: normal;
}

/* Отображение выпадающего меню при наведении на родительский li */
.main-navigation .nav-menu li:hover > ul.sub-menu {
    display: block;
}

Этот CSS-код создает базовое горизонтальное меню с выпадающими подменю при наведении. Классы (.main-navigation, .nav-menu, .sub-menu) соответствуют структуре, генерируемой функцией wp_nav_menu() с указанными аргументами.

Пример кода для создания простого горизонтального меню

Собирая вместе PHP и CSS, вот как может выглядеть минимальная реализация в рамках кастомной темы:

В functions.php:

 __( 'Основная навигация', 'textdomain' ),
        )
    );
}
add_action( 'after_setup_theme', 'simple_horizontal_menu_setup' );
?>

В файле хедера темы (например, header.php) в подходящем месте (внутри <header> или после него):

     'main-nav',
            'container'      => false, // Не оборачивать ul в другой элемент
            'menu_class'     => 'horizontal-list-menu',
            'depth'          => 1, // Только верхний уровень
            'fallback_cb'    => false,
        )
    );
    ?>

В style.css темы:

/* Стили для контейнера навигации */
.site-navigation {
    background-color: #eee;
    padding: 10px 20px;
    text-align: center; /* Выравнивание списка по центру */
}

/* Стили для горизонтального списка ul */
.horizontal-list-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block; /* Позволяет выровнять список по центру */
}

/* Стили для пунктов списка li */
.horizontal-list-menu li {
    display: inline-block; /* Делает пункты горизонтальными */
    margin: 0 15px;
}

/* Стили для ссылок a */
.horizontal-list-menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    line-height: 1; /* Убирает лишние отступы */
}

/* Стили при наведении */
.horizontal-list-menu a:hover {
    color: #0073aa;
}

Этот пример создает очень простое горизонтальное меню без выпадающих элементов, демонстрируя базовые шаги кодирования.

Расширенные возможности и оптимизация

Создание базового горизонтального меню — только первый шаг. Для повышения его функциональности и удобства пользователя можно применить различные техники.

Добавление иконок к пунктам меню

Иконки могут улучшить визуальное восприятие и помочь пользователям быстрее ориентироваться. Добавить иконки можно несколькими способами:

С помощью плагина: Многие плагины для меню (особенно мега-меню) имеют встроенную поддержку иконок (например, из Font Awesome). Вы просто выбираете иконку в настройках пункта меню.

С помощью CSS и HTML: Если вы создаете меню кодом, можно добавить HTML-тег для иконки (например, <i> с соответствующими классами) внутри ссылки, используя аргументы link_before и link_after в wp_nav_menu() или модифицируя вывод с помощью пользовательского walker-класса. Затем стилизуйте иконку с помощью CSS.

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

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

Горизонтальное меню, отлично выглядящее на десктопе, обычно не подходит для мобильных экранов. Необходимо реализовать адаптивное поведение, чаще всего преобразуя горизонтальное меню в "бургер-меню" (иконка с тремя полосками), которое раскрывается при клике.

Реализация адаптивности включает:

CSS Media Queries: Скрытие горизонтального меню и отображение иконки-триггера на узких экранах.

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

Плагины: Многие плагины для меню (например, Responsive Menu, или даже Max Mega Menu) автоматически предоставляют опции для адаптивного поведения, что значительно упрощает процесс.

Оптимизация меню для SEO (использование ключевых слов в названиях пунктов)

Навигационное меню играет роль во внутренней SEO-оптимизации. Текст ссылок в меню являются анкорами, по которым поисковые системы оценивают содержимое целевых страниц. Рекомендуется использовать в названиях пунктов меню:

Релевантные ключевые слова: Вместо абстрактных "Услуги" лучше использовать "Наши услуги по [ваша ниша]" или просто релевантные ключевые фразы, если они органично вписываются.

Понятные формулировки: Текст ссылки должен быть максимально понятен как пользователю, так и поисковой системе.

Избегайте использования слишком общих или, наоборот, переоптимизированных (перенасыщенных ключевыми словами) названий.

Устранение распространенных проблем с меню (не отображается, неправильное отображение на мобильных)

Меню не отображается: Проверьте, что вы сохранили меню, назначили его правильному местоположению в админ-панели ("Внешний вид" > "Меню" > "Настройки меню"), и что ваша тема поддерживает это местоположение. Если используете код, убедитесь, что область меню зарегистрирована и функция wp_nav_menu() вызвана в соответствующем файле шаблона.

Неправильное отображение (слетает верстка): Это часто связано с CSS-конфликтами между темой и плагином, или некорректными стилями в вашей теме. Используйте инструменты разработчика в браузере (правая кнопка мыши > "Исследовать элемент") для отладки и определения конфликтующих CSS-правил.

Неправильное отображение на мобильных: Проверьте корректность CSS медиа-запросов и JavaScript для мобильной версии меню. Если используете плагин, убедитесь, что его настройки адаптивности включены и правильно сконфигурированы.

В большинстве случаев проблемы решаются тщательной проверкой настроек в админ-панели, инспекцией HTML-структуры и CSS-стилей, а также проверкой на конфликты между плагинами или плагином и темой (путем временного отключения).