Při navrhování vašeho webu v blokových tématech WordPress jste si možná všimli, že hlavní navigace vašeho webu má omezené možnosti stylingu. Když například kliknete na odkaz na stránku v hlavní navigaci a navštívíte stránku na svém webu, odkaz na aktivní stránku nezmění barvu v hlavní navigaci. Jinými slovy, uživatel nemá žádné informace o tom, na jaké stránce se aktuálně nachází.

Dobrá uživatelská zkušenost říká, že návštěvníci webu by měli mít vždy nějaké označení, kde se na vašem webu nacházejí – pomáhá jim to, aby se neztratili.

V tomto tutoriálu vám ukážu, jak rychle přizpůsobit navigaci na webu v blokových tématech WordPress tak, aby se pro aktivní stránku zobrazovala vlastní barva. Pro tuto ukázku použiji téma Twenty Twenty Four.

Krok 1: Přejděte do Editoru bloků

Na hlavním panelu WordPress přejděte na Vzhled>Editor (červená šipka na fotografii výše). Tím se dostanete do Editoru webu.

Klikněte na oblast hlavního obsahu napravo od nabídky. Tím se dostanete do Editoru bloků.

Krok 2: Přidejte vlastní CSS

Dále klikněte na ikonu „Styles“ v pravém horním rohu Editoru bloků.

Klikněte na ikonu „Více“ (svislá ikona se třemi tečkami) a poté na „Další CSS“.

Do textového pole „Další CSS“ vložte následující kód CSS:

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

Nahraďte hodnotu mezi symbolem „#“ a „;“ symbol s hexadecimálním kódem pro libovolnou barvu, kterou chcete použít (hodnoty barevného hexadecimálního kódu ve WordPressu můžete získat úpravou čehokoli, co má hodnotu barvy, nebo pomocí nástroje pro barvy, jako je HueMint or Barvy).

Klikněte na tlačítko „Uložit“ v horní části Editoru bloků a poté znovu klikněte na „Uložit“.

Krok 3: Zobrazit stránku

Po uložení změn můžete nyní kliknout na ikonu „Zobrazit stránku“ a zobrazit náhled webu v nové barvě pro aktivní stránku v hlavní navigaci.

Řešení problémů

Pokud vám výše uvedený kód nefungoval, možná používáte motiv, který používá různé třídy pro aktivní položky nabídky, nebo možná používáte vlastní odkazy v navigačním bloku namísto odkazů na stránky.

Neblokované motivy nebo blokové motivy třetích stran

Chcete-li vyřešit předchozí problém, budete muset ve svém prohlížeči použít nástroj „kontrola“ a zjistit, jaká třída se používá pro odkazy na aktivní stránky ve vaší hlavní navigaci (můžete také zkusit vygooglit „Jakou třídu používá téma ____ pro aktivní odkazy na stránky v hlavní navigaci“).

V případě posledního problému jednoduše změňte své vlastní odkazy na odkazy na stránky v editoru webu. Chcete-li to provést z editoru bloků, klikněte na logo v levém horním rohu editoru (bude to logo WordPress nebo logo vašeho webu).

Poté klikněte na „Navigace“. Klikněte na ikonu „Upravit“ vedle názvu hlavní nabídky vašeho webu.

Klikněte na navigační nabídku a upravte ji. Poté klikněte na „Přejít na rodičovský navigační blok“ na postranním panelu Nastavení blokování, pokud tam není ve výchozím nastavení.

Pod nadpisem „Nabídka“ na postranním panelu Nastavení blokování uvidíte seznam všech vašich stránek, které jsou ve vaší hlavní navigaci. Pokud máte v navigaci nějaké stránky webu, které jsou uvedeny jako vlastní odkaz (jako spodní záznam na ukázkové fotografii), budete muset záznam odstranit a znovu ho přidat jako stránku (pokud je to možné).

Chcete-li to provést, klikněte na ikonu „Možnosti“ vedle položky a poté klikněte na „Odstranit ____“. Dále klikněte na ikonu „+“ ve spodní části seznamu stránek.

Dále klikněte na odkaz na stránku a vyhledejte stránku, kterou chcete přidat. Po přidání stránky klikněte na „Uložit“ a znovu klikněte na „Uložit“. Problém by měl být vyřešen.

Pin It na Pinterest