Добавление классов элементам меню в WordPress

В WordPress есть встроенные фильтры, которые позволяют легко добавлять или изменять классы для элементов меню, не прибегая к созданию собственного класса Walker_Nav_Menu. Это особенно удобно, если требуются небольшие изменения, такие как добавление кастомных классов к элементам списка <li>, ссылкам <a>, или активным пунктам меню. В этой статье мы рассмотрим, как использовать такие фильтры для улучшения стилизации меню. Все приведённые функции необходимо добавлять в файл вашей темы functions.php.

Оглавление:

1. Добавление классов к элементам списка <li>
2. Добавление классов к ссылкам меню <a>
3. Добавление классов к активному элементу меню
4. Заключение

1. Добавление классов к элементам списка <li>

Добавление классов к элементам <li> меню может помочь в кастомизации внешнего вида каждого пункта меню. Например, добавление класса для меню в футере:

function add_class_to_footer_menu_items($classes, $item, $args) {
    if ($args->theme_location == 'footer') {
        $classes[] = 'footer-menu-item';
    }
    $classes[] = 'menu-item-class';
    return $classes;
}
add_filter('nav_menu_css_class', 'add_class_to_footer_menu_items', 10, 3);

Эта функция добавляет класс footer-menu-item к каждому элементу меню, если это меню футера, и класс menu-item-class для всех пунктов меню.

2. Добавление классов к ссылкам меню <a>

Теги <a> — это непосредственно ссылки меню, и к ним тоже можно добавить классы для кастомизации:

function add_class_to_footer_menu_links($atts, $item, $args) {
 if ($args->theme_location == 'footer') {
 $atts['class'] = 'footer-link';
 }
 return $atts;
}
add_filter('nav_menu_link_attributes', 'add_class_to_footer_menu_links', 10, 3);

С помощью этой функции класс `footer-link` добавляется ко всем ссылкам меню футера.

3. Добавление классов к активному элементу меню

Активные элементы меню можно выделить отдельным классом. Это удобно для создания уникального стиля для текущей страницы.

function add_class_to_active_menu_item($classes, $item, $args) {
 if (in_array('current-menu-item', $classes)) {
 $classes[] = 'active-menu-class';
 }
 return $classes;
}
add_filter('nav_menu_css_class', 'add_class_to_active_menu_item', 10, 3);

Этот код добавляет класс active-menu-class к активному пункту меню.

Заключение

Стилизация элементов меню с помощью добавления классов — это мощный инструмент для изменения внешнего вида навигации в WordPress. С помощью простых фильтров можно настраивать как списки <li>, так и ссылки <a>, а также добавлять классы к активным элементам меню для лучшего UX.