Когато проектирате уебсайта си в блокови теми на WordPress, може би сте забелязали, че основната навигация за вашия сайт има ограничени опции за стил. Например, когато щракнете върху връзка към страница в основната си навигация, за да посетите страница от уебсайта си, връзката за активната страница не променя цвета си в основната навигация. С други думи, няма индикация за потребителя на коя страница се намира в момента.

Доброто потребителско изживяване казва, че посетителите на сайта винаги трябва да имат някаква индикация за това къде се намират на вашия сайт – това им помага да не се изгубят.

В този урок ще ви покажа как бързо да персонализирате навигацията на вашия сайт в блокови теми на WordPress, за да показвате персонализиран цвят за активната страница. Ще използвам темата Twenty Twenty Four за тази демонстрация.

Стъпка 1: Отидете до редактора на блокове

От таблото за управление на WordPress отидете на Външен вид>Редактор (червена стрелка на горната снимка). Това ще ви отведе до редактора на сайта.

Щракнете върху областта с основно съдържание отдясно на менюто. Това ще ви отведе в редактора на блокове.

Стъпка 2: Добавете персонализиран CSS

След това щракнете върху иконата „Стилове“ в горния десен ъгъл на редактора на блокове.

Щракнете върху иконата „Още“ (вертикалната икона с три точки), след което щракнете върху „Допълнителен CSS“.

Поставете следния CSS код в текстовото поле „Допълнителен CSS“:

.current-menu-item {
  color: #e23f1b;
}

Заменете стойността между символа „#“ и „;“ символ с шестнадесетичен код за всеки цвят, който искате да използвате (можете да получите стойности на шестнадесетичен код на цвета в WordPress, като редактирате всичко, което има стойност на цвят, или като използвате инструмент за цвят като HueMint or Coolors).

Щракнете върху бутона „Запазване“ в горната част на редактора на блокове, след което щракнете върху „Запазване“ отново.

Стъпка 3: Вижте страницата

След като промените са запазени, сега можете да щракнете върху иконата „Преглед на страницата“, за да визуализирате сайта си с новия цвят за активната страница в основната си навигация.

Отстраняване на проблеми

Ако горният код не работи за вас, може да използвате тема, която използва различни класове за активни елементи от менюто, или може да използвате персонализирани връзки във вашия блок за навигация, а не връзки към страници.

Неблокови теми или блокирани теми на трети страни

За да разрешите предишния проблем, ще трябва да използвате инструмента „инспектиране“ в браузъра си и да разберете какъв клас се използва за връзки към активни страници в основната ви навигация (можете също да опитате да потърсите в Гугъл „Какъв клас използва темата ____ за активни връзки към страници в главната навигация“).

За последния проблем просто променете вашите персонализирани връзки към връзки към страници в редактора на сайта. За да направите това от редактора на блокове, щракнете върху логото в горния ляв ъгъл на редактора (ще бъде логото на WordPress или логото на вашия сайт).

След това щракнете върху „Навигация“. Щракнете върху иконата „Редактиране“ до името на главното меню на вашия сайт.

Кликнете върху навигационното меню, за да го редактирате. След това щракнете върху „Отидете до родителския блок за навигация“ в страничната лента с настройки на блока, ако не е там по подразбиране.

Под заглавието „Меню“ в страничната лента с настройки за блокиране ще видите списък с всички ваши страници, които са в основната ви навигация. Ако имате страници на сайта в навигацията, които са посочени като персонализирана връзка (като долния запис в примерната снимка), ще трябва да изтриете записа и да го добавите отново като страница (ако е възможно).

За да направите това, щракнете върху иконата „Опции“ до записа, след което щракнете върху „Премахване ____“. След това щракнете върху иконата „+“ в долната част на списъка със страници.

След това щракнете върху „Връзка към страница“, след което намерете страницата, която искате да добавите. След като добавите страницата, щракнете върху „Запазване“ и отново върху „Запазване“. Въпросът трябва да бъде разрешен.