Активные пункты меню в WordPress

Проблема очень распространенная. Класс у активного пункта меню пропадает, когда мы проваливаемся в дочерний элемент. Будем исправлять!

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

Например, мы имеем:

• Свой тип записей «Портфолио» в меню называется «Портфолио» (допустим, id=4);
• Страница с постами находится в пункте меню «Блог» (допустим, id=1);
• Если мы находимся в архиве записей «Портфолио», у нас подсвечивается пункт меню «Блог»;
• Если мы находимся на подробной странице типа «Портфолио», у нас подсвечивается пункт меню «Блог»;

Нужно исправить:

• Если мы в архиве или на подробной записи типа «Портфолио», то надо убрать подсветку пункта меню «Блог» (id=1, напомню);
• Подсвечиваем пункт меню «Портфолио» (id=4), если мы в архиве записей этого типа, или на странице записи.

Решение:

if( !function_exists( 'global_navigation__active_classes' ) {
  function global_navigation__active_classes( $classes, $item ) {
  
    // Убирает активный класс у пункта меню "Страница записей" (id=1), если мы находимся на archive.php или single.php custom post_type="portfolio"
    if( ( is_post_type_archive( 'portfolio' ) || is_singular( 'portfolio' ) )  && $item->object_id == 1 ):
      $classes = array_diff( $classes, array( 'current_page_parent' ) );
    endif;

    // Добавляет активнвый класс к пункту меню с id=4, если мы находимся на archive.php или single.php custom post_type="portfolio"
    if( ( is_post_type_archive( 'portfolio' ) || is_singular( 'portfolio' ) ) && $item->object_id == 4 )
      $classes[]='current_page_parent';

    return $classes;
  }
  add_filter( 'nav_menu_css_class', 'global_navigation__active_classes', 10, 2 );
}

Код (разумеется, добавляем его в functions.php) будет запускаться при формировании связей пункта меню $item и принадлежащих ему классов $classes.

В первом случае мы убираем из массива с классами тот, который нам не нужен.

Во втором случае мы добавляем пункт current_page_parent в массив.

Оформляем стиль активного пункта на основе класса current_page_parent.

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

Пользуйтесь на здоровье и не теряйте времени на мелочи!