Как изменить или удалить классы в меню WordPress? 

Здравствуйте, уважаемые эксперты! <br/> Мне нужна ваша помощь с пониманием проблемы в коде. <br/> Я пытаюсь изменить классы для пунктов меню в состоянии "бургер", с целью назначить свои собственные классы для элементов `<li>` и `<a>`. <br/> На версии для десктопа изменения применяются корректно, однако с бургерным меню ситуация другая, и я не могу определить причину. <br/> Проблема заключается в том, что класс для `<li>` не меняется, а ссылка не получает назначенный класс. <br/> Вот мой код из файла functions.php: <br/> <pre><code class="php">register_nav_menus([
		'header-menu' =&gt; 'Шапка сайта',
    'header-mobile-menu' =&gt; 'Меню для мобильных',
		'footer-menu' =&gt; 'Подвал сайта'
	]);

// основные параметры меню
add_filter('wp_nav_menu_args', 'filter_wp_menu_args');
function filter_wp_menu_args($args)
{
    if ($args['theme_location'] === 'header-menu') {
        $args['container'] = 'nav';
        $args['menu_id'] = 'menu';
        $args['container_class'] = 'header__nav nav';
        $args['items_wrap'] = '&lt;ul id="nav__list" class="%2$s"&gt;%3$s&lt;/ul&gt;';
        $args['menu_class'] = 'nav__list';
        $args['depth'] = '2';
    }

    if ($args['theme_location'] === 'header-mobile-menu') {
        $args['container'] = 'ul';
        $args['menu_id'] = 'mobile-nav__list';
        $args['menu_class'] = 'mobile-nav__list';
        $args['depth'] = '2';
  }

    return $args;
}

// Смена атрибут ID у тега LI
add_filter('nav_menu_item_id', 'filter_menu_item_css_id', 10, 4);
function filter_menu_item_css_id($menu_id, $item, $args, $depth)
{
    return $args-&gt;theme_location === 'header-menu' ? '' : $menu_id;
    return $args-&gt;theme_location === 'header-mobile-menu' ? '' : $menu_id;
};

// Смена атр
  • 31 января 2025 г. 23:04
Ответы на вопрос 1 
Ваша проблема с изменением классов элементов меню для мобильной версии (бургер-меню) может быть связана с тем, что для мобильного меню используются другие параметры, и не все фильтры применяются так же, как и для десктопного. 

Вот несколько шагов, которые помогут вам настроить классы элементов меню:

1. **Проверьте, как подключается мобильное меню.** Убедитесь, что там используется правильный вызов функции `wp_nav_menu()`. Убедитесь, что указаны правильные параметры `theme_location`.

2. **Обновите функцию `filter_menu_item_css_id`.** В вашем коде есть две строки с `return`, которые не будут работать в одной функции. Вам нужно использовать `if`, чтобы проверить, какое меню обрабатывается. Вот правильный вариант:

    ```php
    add_filter('nav_menu_item_id', 'filter_menu_item_css_id', 10, 4);
    function filter_menu_item_css_id($menu_id, $item, $args, $depth) {
        if ($args->theme_location === 'header-menu') {
            return ''; // Убираем ID для десктопного меню
        }
        if ($args->theme_location === 'header-mobile-menu') {
            return ''; // Убираем ID для мобильного меню
        }
        return $menu_id; // Возвращаем ID по умолчанию
    }
    ```

3. **Измените классы элементов меню.** Вы можете использовать фильтр `nav_menu_css_class` и `nav_menu_link_attributes`, чтобы добавить свои классы к элементам меню и к ссылкам соответственно.

    Вот как это можно сделать:

    ```php
    // Изменение класса <li>
    add_filter('nav_menu_css_class', 'filter_menu_item_css_class', 10, 4);
    function filter_menu_item_css_class($classes, $item, $args, $depth) {
        if ($args->theme_location === 'header-menu') {
            // Добавьте свои классы
            $classes[] = 'my-desktop-menu-class';
        }
        if ($args->theme_location === 'header-mobile-menu') {
            // Добавьте свои классы
            $classes[] = 'my-mobile-menu-class';
        }
        return $classes;
    }

    // Изменение атрибутов <a>
    add_filter('nav_menu_link_attributes', 'filter_menu_item_link_attributes', 10, 3);
    function filter_menu_item_link_attributes($atts, $item, $args) {
        if ($args->theme_location === 'header-menu') {
            // Добавьте свои атрибуты к ссылкам
            $atts['class'] = 'my-desktop-link-class';
        }
        if ($args->theme_location === 'header-mobile-menu') {
            // Добавьте свои атрибуты к ссылкам
            $atts['class'] = 'my-mobile-link-class';
        }
        return $atts;
    }
    ```

4. **Проверьте стили CSS.** Если классы применяются, но не отображаются так, как вы ожидали, проверьте, могут ли ваши CSS-стили конфликтовать с существующими стилями в вашей теме или в стилях, добавленных плагинами.

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