Вопрос или проблема
Основной элемент меню не выделяется, когда страница активна, хотя она связана с URL с параметрами запроса для предварительной заполнения поля формы.
Я использую тему WordPress Astra. Я настроил кастомизацию Astra для выделения активного элемента основного меню в навигационной панели. Однако, когда я ссылаюсь на страницу “Контакты” с добавленной строкой запроса для предварительного заполнения поля сообщения, элемент меню “Контакты” в навигационной панели не выделяется. Есть ли предложения по кастомному CSS, чтобы это исправить? Не думаю, что это имеет значение, но я использую плагин Forminator для формы.
Пример: посмотрите разницу между этими двумя ссылками на страницу Контакты. В первом примере элемент меню “Контакты” выделен. Во втором – нет.
https://poweremf.com/contact/
https://poweremf.com/contact/?query_text=Hello
Я проверил обе ваши ссылки, и в теге <body> у обеих есть класс page-id-1508, что означает, что ID страницы распознается правильно как с переменной запроса, так и без нее.
Тем не менее, как указал @mmm в комментарии выше, похоже, вы добавили элемент меню как настраиваемую ссылку (обратите внимание на классы элемента меню menu-item-type-custom menu-item-object-custom; если бы вы добавили его как страницу, у него были бы классы menu-item-type-post_type menu-item-object-page).
Поскольку это настраиваемая ссылка, когда ссылка меняется (в данном случае добавляется переменная запроса), WordPress больше не распознает ее как ту же самую ссылку, и, следовательно, она теряет активный класс.
Так как это страница, я предлагаю вам добавить этот элемент меню как страницу и проверить еще раз.
Ответ или решение
Для решения проблемы невыделения активного пункта меню на странице "Контакт", когда ссылка содержит строку запроса, мы можем рассмотреть несколько решений. Давайте разберем вашу ситуацию подробнее.
Как вы уже заметили, ваша проблема возникает из-за того, что пункт меню "Контакт" добавлен как пользовательская ссылка (Custom Link). Когда вы добавляете строку запроса, WordPress не распознает это как ту же самую ссылку, что и в случае без строки запроса. Это приводит к тому, что пункт меню не получает класс активного элемента.
Вот несколько способов решения этой проблемы:
1. Изменение типа меню на страницу
Наиболее простым и рекомендуемым решением является изменение типа пункта меню на страницу. Если это возможно, выполните следующие действия:
- Перейдите в админку WordPress.
- Зайдите в "Внешний вид" → "Меню".
- Удалите текущий пункт меню "Контакт".
- Снова добавьте его, но выберите "Страницы" и выберите страницу "Контакт", а не пользовательскую ссылку.
Это позволит WordPress правильно распознавать страницу даже при наличии строки запроса.
2. Использование пользовательского CSS
Если по каким-то причинам вы не хотите или не можете изменить тип пункта меню, можно использовать CSS, чтобы выделить пункт меню вручную. Добавьте следующий код CSS в раздел "Дополнительные стили" вашей темы:
/* Подсветка активного меню на странице контактов с query string */
.menu-item-идентификатор,
.menu-item-идентификатор.current-menu-item a,
.menu-item-идентификатор.current_page_item a {
background-color: #ccc; /* Цвет подсветки */
color: #fff; /* Цвет текста */
}Замените идентификатор на реальный идентификатор вашего пункта меню "Контакт". Вы можете найти этот идентификатор, проверив HTML-код вашего меню.
3. Используйте JavaScript для динамической добавки класса
Как вариант, вы можете использовать JavaScript, чтобы добавить класс активного элемента к пункту меню, когда страница загружается с параметрами. Вставьте следующий код в файл вашей темы или в настройку JavaScript:
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('query_text')) {
const menuItem = document.querySelector('.menu-item-идентификатор'); // замените на селектор вашего пункта меню
if (menuItem) {
menuItem.classList.add('current-menu-item'); // Добавляем активный класс
}
}
});Заключение
Рекомендуемым методом является изменение типа пункта меню на страницу, чтобы избежать сложностей с обрабатыванием активного класса. Если это невозможно, можно применить один из двух других методов.
Если у вас есть дополнительные вопросы или нуждаетесь в дальнейшей помощи, не стесняйтесь обращаться!