WPDO: Как изменить вывод CSS-классов в меню WordPress

Автор: Маргарита Егорова | Опубликовано: 12.11.2025

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

Почему важно менять CSS-классы в меню WordPress

По умолчанию WordPress добавляет к пунктам меню стандартные классы, такие как current-menu-item, menu-item-has-children и другие. Эти классы помогают стилизовать меню, но иногда их недостаточно или требуется добавить свои классы для реализации определенного дизайна или поведения.

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

Изменение CSS-классов позволяет:

Добавлять уникальные классы для разных пунктов меню;
Удалять ненужные классы, чтобы избежать конфликтов стилей;
Интегрировать меню с CSS-фреймворками, например Bootstrap;
Улучшать доступность и семантику HTML;
Облегчать работу JavaScript с элементами меню.

Как WordPress формирует CSS-классы меню

Меню WordPress выводится функцией wp_nav_menu(), которая генерирует HTML с классами на основе данных из базы и параметров вызова. Классы формируются в функции walk_nav_menu_tree и в классе Walker_Nav_Menu. Для изменения классов существуют специальные фильтры, самые важные из которых:

nav_menu_css_class — позволяет изменить или добавить CSS-классы к пункту меню;
nav_menu_item_id — изменяет ID пункта меню;
nav_menu_link_attributes — изменяет атрибуты ссылки.

Для практической работы чаще всего используется фильтр nav_menu_css_class, так как он даёт полный контроль над классами.

Пример: добавляем класс 'wpdo-custom' к каждому пункту меню

Рассмотрим простой пример, как с помощью фильтра nav_menu_css_class добавить к каждому пункту меню дополнительный класс wpdo-custom. Добавьте следующий код в файл functions.php вашей темы или в плагин:

function wpdo_add_custom_menu_class($classes, $item, $args, $depth) {
    $classes[] = 'wpdo-custom';
    return $classes;
}
add_filter('nav_menu_css_class', 'wpdo_add_custom_menu_class', 10, 4);

Здесь функция wpdo_add_custom_menu_class принимает текущий массив классов, объект пункта меню, аргументы меню и уровень вложенности, добавляет новый класс и возвращает изменённый массив. Благодаря этому к каждому пункту меню будет добавлен класс wpdo-custom, что позволит стилизовать меню по-своему.

Удаление стандартных классов из меню

Иногда стандартные классы мешают или создают конфликты, и их нужно удалить. Для этого можно отфильтровать массив классов так, чтобы убрать ненужные. Пример кода:

function wpdo_remove_menu_classes($classes, $item, $args, $depth) {
    // Классы, которые нужно убрать
    $remove_classes = ['menu-item-type-post_type', 'menu-item-object-page'];
    // Фильтрация массива
    return array_diff($classes, $remove_classes);
}
add_filter('nav_menu_css_class', 'wpdo_remove_menu_classes', 10, 4);

Здесь мы указали классы, которые хотим убрать из каждого пункта меню. При необходимости список можно расширять или менять.

Добавление классов по условию: активный пункт и вложенность

Часто нужно добавить класс только для активного пункта меню или для пунктов определённого уровня вложенности. Рассмотрим пример, где мы добавим класс wpdo-active для текущего пункта и wpdo-depth-X для указания глубины вложенности:

function wpdo_conditional_menu_classes($classes, $item, $args, $depth) {
    if (in_array('current-menu-item', $classes)) {
        $classes[] = 'wpdo-active';
    }
    $classes[] = 'wpdo-depth-' . $depth;
    return $classes;
}
add_filter('nav_menu_css_class', 'wpdo_conditional_menu_classes', 10, 4);

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

Использование плагинов для кастомизации классов меню

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

Menu Item Visibility Control — позволяет скрывать пункты меню по условиям, а также управлять классами.
CSS Classes for Menus — добавляет удобный интерфейс для добавления пользовательских классов к пунктам меню через админку.
Advanced Menu Widget — расширяет виджет меню, позволяя тонко настраивать классы и вывод.

Однако для максимального контроля и оптимизации лучше использовать собственные решения на базе фильтров WordPress, как показано в примерах выше.

Резюме и рекомендации по работе с классами меню в WordPress

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

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

Дополнительно рекомендуем:

Использовать префиксы в именах функций (например, wpdo_), чтобы избежать конфликтов с другими плагинами и темами;
Документировать свои изменения и сохранять резервные копии;
Изучать класс Walker_Nav_Menu, если нужна более глубокая кастомизация HTML меню.

Так вы сможете создать уникальное и функциональное меню, идеально подходящее для вашего сайта на WordPress.