Как добавить класс к родительскому тегу a с подменю

Вопрос или проблема

class My_Walker_Nav_Menu extends Walker_Nav_Menu{
  public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
    $id = $this->db_fields['id'];    

    if(isset($children[$el->$id]))
      $el->classes[] = 'toggle-sub-nav closed';    

    parent::display_element($el, $children, $max_depth, $depth, $args, $output);
  }
}

/* Добавьте классы и другие атрибуты к тегам якоря, если элемент списка является родительским */

add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 );

function add_class_to_items_link( $atts, $item, $args ) {
  // проверьте, есть ли у элемента дочерние элементы
  $hasChildren = (in_array('menu-item-has-children', $item->classes));
  if ($hasChildren) {
    // добавьте желаемые атрибуты:
    $atts['class'] = 'your-custom-class'; //Это главное беспокойство согласно вопросу
    $atts['id'] = 'your-custom-id'; //Необязательно
    $atts['data-toggle'] = 'dropdown'; //Необязательно
    $atts['data-target'] = '#'; //Необязательно
  }
  return $atts;
}

Ответ или решение

Для добавления класса к родительскому тегу <a> подменю с использованием пользовательского Walker в WordPress, вам необходимо внести изменения в код вашего класса Walker_Nav_Menu. Ваш текущий класс добавляет класс только к родительскому <li>, а вы хотите, чтобы он применялся к тегу <a>.

Ниже я предложу вам шаги и обоснование необходимых изменений.

Шаги по добавлению класса к тегу <a>

1. Создайте или измените существующий класс Walker. Вам нужно будет запоминать, какие пункты меню имеют дочерние элементы и добавлять к ним желаемый класс.

2. Используйте фильтр nav_menu_link_attributes, чтобы добавить класс к атрибутам ссылки.

Пример кода:

Вот пример кода, который решает вашу задачу:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    // Переопределяем метод display_element для добавления классов
    public function display_element($element, &$children_elements, $max_depth, $depth = 0, $args = array(), &$output = '') {
        $id_field = $this->db_fields['id'];

        // Проверяем, есть ли у текущего элемента дочерние элементы
        if (isset($children_elements[$element->$id_field])) {
            $element->classes[] = 'toggle-sub-nav closed';  // Добавляем класс к <li>
        }

        // Вызываем родительский метод
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

// Добавление класса к тегу <a>
add_filter('nav_menu_link_attributes', 'add_class_to_items_link', 10, 3);
function add_class_to_items_link($atts, $item, $args) {
    // Проверяем, имеет ли элемент дочерние пункты
    $has_children = in_array('menu-item-has-children', $item->classes);
    if ($has_children) {
        // Добавляем желаемые атрибуты
        $atts['class'] = 'your-custom-class';  // Укажите ваш класс
        $atts['data-toggle'] = 'dropdown';      // Пример дополнительного атрибута
    }
    return $atts;
}

Пояснение кода:

• Класс My_Walker_Nav_Menu: Вы переопределили метод display_element, чтобы устанавливать класс для родительского <li>, и это необходимо для управления визуалом вашего меню, если у него есть подменю.

• Функция add_class_to_items_link: Этот фильтр добавляет класс на уровень <a>, если этот элемент имеет дочерние элементы. В этом случае класс your-custom-class будет добавлен ко всем тегам <a> родительских пунктов меню. Можно также добавлять дополнительные атрибуты, такие как data-toggle, для повышения интерактивности.

Заключение

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