Как добавить класс к элементам меню WordPress без плагинов

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

Почему важно добавлять классы к элементам меню WordPress

CSS-классы в меню помогают не только стилизовать отдельные пункты, но и управлять поведением меню, например, показывать или скрывать пункты, менять иконки, добавлять анимацию. Иногда нужно выделить активные пункты, пункты с подменю или добавить классы по определённым условиям.

Использование плагинов для этого часто избыточно и может замедлять сайт, поэтому лучше делать это через собственный код в functions.php или подключаемом файле темы.

Добавление классов к пунктам меню с помощью фильтра nav_menu_css_class

WordPress предоставляет фильтр nav_menu_css_class, который позволяет изменить список классов для каждого элемента меню до вывода. Рассмотрим пример функции, которая добавляет класс wptests-custom-class ко всем пунктам меню:

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

Разберём параметры функции:

• $classes — массив текущих классов пункта меню.
• $item — объект пункта меню (WP_Post).
• $args — объект аргументов меню.
• $depth — уровень вложенности меню.

Вы можете менять логику добавления класса в зависимости от свойств $item, например, ID, тип пункта и т.д.

Добавление класса только определённому элементу по ID

Если нужно добавить класс только к конкретному пункту меню, можно фильтровать по ID:

function wptests_add_class_by_id($classes, $item) {
    if ($item->ID === 42) { // замените 42 на нужный ID
        $classes[] = 'wptests-special-item';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wptests_add_class_by_id', 10, 2);

Динамическое добавление классов в зависимости от текущей страницы

Часто нужно выделять пункты меню, если они ведут на текущую страницу или родительскую категорию. WordPress уже добавляет классы current-menu-item и current-menu-ancestor, но можно добавить свои.

Пример — добавим класс active-item если пункт меню ведёт на текущую страницу:

function wptests_add_active_class($classes, $item) {
    if (in_array('current-menu-item', $classes) || in_array('current-menu-ancestor', $classes)) {
        $classes[] = 'active-item';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wptests_add_active_class', 10, 2);

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

Если меню содержит ссылки на разные типы записей, можно добавлять классы в зависимости от типа. Например, добавить класс menu-item-post-product для пунктов с типом записи product:

function wptests_add_class_by_post_type($classes, $item) {
    if ($item->object === 'product') {
        $classes[] = 'menu-item-post-product';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wptests_add_class_by_post_type', 10, 2);

Пример комплексного решения: классы для вложенных меню и специальных элементов

Допустим, нужно добавить класс has-children к пунктам, у которых есть подменю, а также выделить пункты с определённой меткой:

function wptests_custom_menu_classes($classes, $item, $args, $depth) {
    // Добавляем класс для пунктов с подменю
    if (in_array('menu-item-has-children', $classes)) {
        $classes[] = 'has-children';
    }

    // Пример: добавляем класс для пунктов с названием "Новости"
    if ($item->title === 'Новости') {
        $classes[] = 'menu-news';
    }

    return $classes;
}
add_filter('nav_menu_css_class', 'wptests_custom_menu_classes', 10, 4);

Как использовать добавленные классы в CSS

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

.wptests-custom-class {
    font-weight: bold;
    color: #0073aa;
}
.menu-news {
    text-transform: uppercase;
    color: #d54e21;
}
.has-children > a::after {
    content: '\25BC'; /* стрелка вниз */
    margin-left: 5px;
    font-size: 0.6em;
}

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

Хотя мы рассмотрели, как сделать всё без плагинов, иногда удобно использовать плагины для расширенных задач:

• Clearfy Pro — оптимизация и расширение функционала WordPress, в том числе меню.
• WPRemark — если нужно добавить отзывы с навигацией по разделам.

В целом, программное добавление классов — наиболее гибкий и лёгкий способ кастомизации меню без перегрузки сайта лишними плагинами.