Pri navrhovaní vášho webu v blokových témach WordPress ste si možno všimli, že hlavná navigácia pre váš web má obmedzené možnosti štýlu. Keď napríklad kliknete na odkaz na stránku v hlavnej navigácii, aby ste navštívili stránku na svojej webovej lokalite, odkaz na aktívnu stránku v hlavnej navigácii nezmení farbu. Inými slovami, používateľ nemá žiadne informácie o tom, na ktorej stránke sa práve nachádza.

Dobrá používateľská skúsenosť hovorí, že návštevníci stránok by mali mať vždy nejaké označenie, kde sa na vašom webe nachádzajú – pomáha im to zabrániť strate.

V tomto návode vám ukážem, ako rýchlo prispôsobiť navigáciu na stránke v blokových témach WordPress tak, aby sa pre aktívnu stránku zobrazovala vlastná farba. Pre túto ukážku použijem tému Twenty Twenty Four.

Krok 1: Prejdite do editora blokov

Na hlavnom paneli WordPress prejdite na Vzhľad>Editor (červená šípka na fotografii vyššie). Tým sa dostanete do Editora lokality.

Kliknite na oblasť hlavného obsahu napravo od ponuky. Tým sa dostanete do editora blokov.

Krok 2: Pridajte vlastný CSS

Potom kliknite na ikonu „Styles“ v pravom hornom rohu editora blokov.

Kliknite na ikonu „Viac“ (ikona s tromi zvislými bodkami) a potom kliknite na „Ďalšie CSS“.

Do textového poľa „Ďalšie CSS“ prilepte nasledujúci kód CSS:

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

Nahraďte hodnotu medzi symbolom „#“ a „;“ symbol s hexadecimálnym kódom pre akúkoľvek farbu, ktorú chcete použiť (hodnoty farebného hexadecimálneho kódu v rámci WordPress môžete získať úpravou čohokoľvek, čo má farebnú hodnotu, alebo pomocou nástroja na farby, ako je napr. HueMint or Coolors).

Kliknite na tlačidlo „Uložiť“ v hornej časti editora blokov a potom znova kliknite na „Uložiť“.

Krok 3: Zobrazte stránku

Po uložených zmenách môžete teraz kliknúť na ikonu „Zobraziť stránku“ a zobraziť ukážku vašej lokality s novou farbou pre aktívnu stránku v hlavnej navigácii.

Riešenie problémov

Ak vám vyššie uvedený kód nefungoval, možno používate tému, ktorá používa rôzne triedy pre aktívne položky ponuky, alebo možno používate vlastné odkazy v navigačnom bloku namiesto odkazov na stránky.

Neblokované motívy alebo blokové motívy tretích strán

Ak chcete vyriešiť predchádzajúci problém, musíte vo svojom prehliadači použiť nástroj „preskúmať“ a zistiť, aká trieda sa používa pre aktívne odkazy na stránky vo vašej hlavnej navigácii (môžete tiež skúsiť vygoogliť „Akú triedu používa téma ____ pre aktívne odkazy na stránky v hlavnej navigácii“).

V prípade posledného problému jednoducho zmeňte svoje vlastné odkazy na odkazy na stránky v editore lokality. Ak to chcete urobiť v editore blokov, kliknite na logo v ľavom hornom rohu editora (bude to logo WordPress alebo logo vašej stránky).

Potom kliknite na „Navigácia“. Kliknite na ikonu „Upraviť“ vedľa názvu hlavnej ponuky vašej lokality.

Kliknite na navigačnú ponuku a upravte ju. Potom kliknite na „Prejsť na rodičovský navigačný blok“ na bočnom paneli Nastavenia blokovania, ak tam nie je predvolene.

Pod nadpisom „Menu“ na bočnom paneli Nastavenia blokovania uvidíte zoznam všetkých vašich stránok, ktoré sa nachádzajú vo vašej hlavnej navigácii. Ak máte v navigácii nejaké stránky lokality, ktoré sú uvedené ako vlastný odkaz (ako spodná položka na vzorovej fotografii), budete musieť položku odstrániť a znova ju pridať ako stránku (ak je to možné).

Ak to chcete urobiť, kliknite na ikonu „Možnosti“ vedľa položky a potom kliknite na „Odstrániť ____“. Potom kliknite na ikonu „+“ v spodnej časti zoznamu stránok.

Potom kliknite na položku Odkaz na stránku a nájdite stránku, ktorú chcete pridať. Po pridaní stránky kliknite na „Uložiť“ a znova kliknite na „Uložiť“. Problém by sa mal vyriešiť.