Активные пункты меню в 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

.

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

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


admin

Share
Published by
admin

Recent Posts

Паперкрафт — Талисман из бумаги на рабочий стол

Паперкрафт — это модели с  заготовками, для которых служат выкройки (развертки) вырезаемые из бумаги. Слово…

2 недели ago

Проверь себя

Проверка на усталось от компьютера.

2 недели ago

Опасные поисковые запросы

Как показали исследования, наиболее вероятную угрозу заражения компьютера вредоносным ПО дают поисковые запросы, связанные с…

2 недели ago

Почему Яндекс так называется

В честь чего дают имена поисковым машинам? Их звучные имена у всех на слуху, но…

2 недели ago

Как появился Интернет

История рождения большинства великих изобретений во многом сходна: люди пытаются открыть что-то скучное и неинтересное,…

2 недели ago

Как бороться со спамом

В работе поисковых систем в интернете и борьбе со спамом появятся новые методы, основанные на…

2 недели ago