Добавляем произвольный класс к элементу меню WordPress с условием

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

После изучения файлов ядра WordPress мы нашли решение. Все, что вам нужно будет сделать, это вставить следующий код в свой файл functions.php темы:

//фильтруем класс в элементе меню навигации
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == 'Блог'){
             $classes[] = 'current-menu-item';
     }
     return $classes;
}

Код вы просто проверяет, является ли страница отдельной записью блога и называется ли элемент меню — Блог. Если критерии совпадают, то добавляется класс “Current-menu-item”. Нам нужно было добавить произвольный класс, чтобы решить вопрос с дизайном, над которым мы работали.

Если немного подробнее, то мы хотели оставить подсвеченным элемент меню БЛОГ, даже когда пользователь просматривает отдельную запись блога. Это позволило пользователям понять, что отдельные записи являются частью блога. Обычно, это как бы бессмысленно, однако в дизайне, над которым мы работали, это имело смысл.

Если вы отчаянно искали такой код, то мы надеемся, что статья вам в этом помогла. Можно еще посмотреть в сторону других переменных $item. Например, $item->ID, $item->title, $item->xfn

Еще один способ решить проблему — с помощью CSS. Добавляем в таблицу стилей следующий код:

.single #navigation .leftmenublog div{display: inline-block !important;}

Все, что мы сделали, это добавили дополнительный div для вывода значка стрелочки в наше меню. Эта стрелочка отображается, только если класс был либо hovered over, или selected. Иначе же div устанавливался в display: none; С помощью класса body мы просто задали элементу div вывод только в определенном классе меню.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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