Вопрос или проблема
У меня следующая проблема:
Существует пользовательский тип записи. Есть несколько страниц, каждая из которых отображает некоторые записи на основе определенных критериев записей (пользовательский WP_Query).
Когда я нажимаю на ссылку, чтобы открыть полную версию записи, родительская страница записи — это . Но ради удобства пользователя это должна быть родительская страница, с которой пришел пользователь, и которую следует выделить в меню.
Я частично решил эту проблему, добавив “?parent=” к ссылкам и разобрав это в фильтре:
// Исправить родительские пункты меню
add_filter('nav_menu_css_class', function($classes, $item, $args) {
if (!isset($_GET['parent']) || empty($_GET['parent'])) return $classes;
if ($item->object_id == $_GET['parent']) {
$classes[] = "current_page_item";
$classes[] = "current-menu-item";
}
return $classes;
}, 10, 3);
Теперь возникает случай, когда это не работает: когда родитель находится внутри подменю, родитель этого подменю не помечается как активный, и подменю остается закрытым. Поэтому мне нужно добавить current-page-ancestor current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor к родительскому пункту меню внутри этой функции фильтра.
Так что я подумал, мне нужно $item->has_child($_GET['parent']), которого, очевидно, не существует.
Есть ли у вас какие-нибудь идеи по этому поводу?
Правка: Я добавил грязный клиентский JavaScript-фикс, чтобы решить это. Но я все же предпочел бы серверное решение.
jQuery(function() {
jQuery(".current-menu-item").parents("li").addClass("current-page-ancestor current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor");
});
Звучит так, будто вы усложняете задачу. Если ваша цель — выделить верхний родитель записи, пока запись отображается в подменю этого родителя, то это проблема CSS, а не WordPress. Следующее должно сработать:
.current-menu-parent a, .current-menu-ancestor a {
color: #7dca8d;
}
Ответ или решение
Как установить текущую активную страницу в меню вместе с родителями
Вопрос, который вы подняли, касается кастомного типа записей в WordPress и корректного выделения элементов меню при навигации. При реализации функционала, необходимо учитывать, что выделение активных элементов меню должно быть интуитивно понятным для пользователя. Ниже описаны шаги, которые помогут вам решить эту задачу, включая выделение родительских и дочерних элементов меню.
Шаг 1: Определение родительской страницы
Ваше текущее решение использует параметр в URL для идентификации родительской страницы. Хотя это сработало для текущей страницы, необходимо дополнительно обрабатывать ситуации, когда родительская страница находится в подменю. Эффективный способ решения заключается в определении всех родительских страниц для текущего элемента меню.
add_filter('nav_menu_css_class', function($classes, $item, $args) {
if (!isset($_GET['parent']) || empty($_GET['parent'])) return $classes;
$parent_id = intval($_GET['parent']);
if ($item->object_id === $parent_id) {
$classes[] = "current_page_item";
$classes[] = "current-menu-item";
}
// Определение родительского элемента и добавление классов
foreach($item->menu_item_parent as $parent_item_id) {
if ($parent_item_id === $parent_id) {
$classes[] = "current-page-ancestor";
$classes[] = "current-menu-ancestor";
$classes[] = "current-menu-parent";
break;
}
}
return $classes;
}, 10, 3);Шаг 2: Обработка вложенных меню
Для корректной работы данного подхода необходимо также отслеживать вложенные элементы меню. В WordPress каждый элемент меню имеет родителя, который можно искать. Ниже представлен пример, который позволит вам установить активное состояние для родительского элемента, если текущая страница является дочерним элементом.
function set_menu_ancestors($classes, $item) {
// Получаем ID родительского элемента
if (isset($_GET['parent']) && !empty($_GET['parent'])) {
$parent_id = intval($_GET['parent']);
// Проверяем родительские элементы
$current_item = $item->ID;
$menu = wp_get_nav_menu_items($args->menu);
// Поиск родительского элемента в меню
foreach ($menu as $menu_item) {
if ($menu_item->ID === $parent_id) {
$classes[] = "current-menu-ancestor";
$classes[] = "current-page-parent";
break;
}
}
}
return $classes;
}
add_filter('nav_menu_css_class', 'set_menu_ancestors', 10, 2);Шаг 3: CSS стили для активного состояния
Помимо обработки классов на серверной стороне, рекомендуется также добавить стили, которые позволят лучше визуализировать активные элементы меню. Пример CSS кода:
.current-menu-parent > a, .current-page-ancestor > a {
color: #7dca8d; /* Активный цвет для выделения */
font-weight: bold; /* Подчёркивание важности */
}Заключение
Ваше решение по выделению текущих активных страниц меню вместе с родителями может быть улучшено, используя метод выявления и управления иерархией меню через WordPress API. Такой подход не только решит возникшие проблемы с закрытыми подменю, но и предоставит вашему сайту более качественный и интуитивный интерфейс.
Использование клиентского JavaScript для управления состоянием элементов меню можно считать временным решением, которое в конечном итоге будет заменено на более чистое и эффективное серверное решение. Так, вы обеспечиваете пользователю приятный опыт навигации с минимальными затратами на обработку в браузере.