Кога ја дизајнирате вашата веб-локација во блок теми на WordPress, можеби сте забележале дека главната навигација за вашата страница има ограничени опции за стилизирање. На пример, кога ќе кликнете на врската на страницата во вашата главна навигација за да посетите страница на вашата веб-локација, врската за активната страница не ја менува бојата во главната навигација. Со други зборови, нема индикации за корисникот за тоа на која страница моментално се наоѓа.

Доброто корисничко искуство вели дека посетителите на страницата секогаш треба да имаат некаква индикација за тоа каде се наоѓаат на вашата страница - тоа им помага да не се изгубат.

Во ова упатство, ќе ви покажам како брзо да ја приспособите навигацијата на вашата страница во темите за блокови на WordPress за да прикажете приспособена боја за активната страница. Ќе ја користам темата Twenty Twenty Four за оваа демонстрација.

Содржина

Чекор 1: Одете до Уредувачот на блокови

Navigate to the WordPress Block Editor via Appearance>Editor

Од вашата контролна табла на WordPress, одете до Изглед>Уредник (црвена стрелка на горната фотографија). Ова ќе ве однесе до Уредувачот на страницата.

Click on the Main Content Area to Access the WordPress Block Editor

Кликнете на областа за главната содржина десно од менито. Ова ќе ве однесе внатре во Уредувачот на блокови.

Чекор 2: Додајте прилагодено CSS

Click the Styles Icon in the Block Toolbar for WordPress Custom CSS Feature

Следно, кликнете на иконата „Стилови“ во горниот десен агол на Уредувачот на блокови.

Click the 3 Dots Icon and Click Additional CSS in WordPress

Кликнете на иконата „Повеќе“ (вертикалната икона со три точки), потоа кликнете на „Дополнителен CSS“.

Add Custom CSS to WordPress to Change Active Menu Link Colors

Вметнете го следниов CSS-код во полето за текст „Дополнителен CSS“:

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

Заменете ја вредноста помеѓу симболот „#“ и „;“ симбол со хексадецимален код за која било боја што сакате да ја користите (можете да ги добиете вредностите на хексадецимален код во WordPress со уредување на сè што има вредност на боја или со користење на алатка за боја како HueMint or Ладилници).

Кликнете на копчето „Зачувај“ на горниот дел од Уредувачот на блокови, а потоа повторно кликнете „Зачувај“.

Чекор 3: Погледнете ја страницата

Preview the WordPress Menu Link Customizations by Clicking View Page Icon

Со зачуваните промени, сега можете да кликнете на иконата „Прикажи страница“ за да ја прегледате вашата страница со новата боја за активната страница во вашата главна навигација.

Смена на проблеми

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

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

За да го решите првиот проблем, ќе мора да ја користите алатката „inspect“ во вашиот прелистувач и да откриете која класа се користи за активни врски на страници во вашата главна навигација (исто така можете да пробате да гуглате „Која класа ја користи темата ____ за активна врски на страницата во главната навигација“).

За последното прашање, едноставно променете ги вашите сопствени врски до врски на страници во Уредникот на страницата. За да го направите ова од уредувачот на блокови, кликнете на логото во горниот лев агол на уредникот (ќе биде логото на WordPress или логото на вашата страница).

Потоа, кликнете на „Навигација“. Кликнете на иконата „Уреди“ веднаш до името на главното мени на вашата страница.

Кликнете на менито за навигација за да го уредите. Потоа, кликнете „Оди во родителскиот блок за навигација“ во страничната лента за поставки за блокирање, ако стандардно не е однесена таму.

Под насловот „Мени“ во страничната лента за поставки за блокирање, ќе видите список на сите ваши страници што се во вашата главна навигација. Ако имате било какви страници на страницата во навигацијата што се наведени како приспособена врска (како долниот запис на примерот на фотографијата), ќе мора да го избришете записот и повторно да го додадете како страница (ако е можно).

За да го направите ова, кликнете на иконата „Опции“ веднаш до записот, а потоа кликнете „Отстрани ____“. Следно, кликнете на иконата „+“ на дното од списокот со страници.

Следно, кликнете на „Поврзување на страницата“, а потоа пронајдете ја страницата што сакате да ја додадете. Откако ќе ја додадете страницата, кликнете „Зачувај“ и повторно кликнете „Зачувај“. Прашањето треба да се реши.

Тоа е тоа за овој туторијал! Ако ви се допадна, можете да го погледнете и мојот друг Упатства за WordPress или запишете се во мојот Курс за WordPress за Udemy!