Jak vytvořit funkční kotvy a odkazy pro navigaci v rámci stránky ve WordPressu

V dnešní době digitálního obsahu je efektivní navigace klíčovým prvkem uživatelské zkušenosti. Často se setkáváme s potřebou odkazovat nejen na jiné webové stránky, ale také na specifické sekce v rámci téže stránky. Tento mechanismus, známý jako kotva nebo interní odkaz s posunem, umožňuje uživatelům rychle přeskočit na relevantní část obsahu bez nutnosti zdlouhavého scrollování. Ve WordPressu existuje několik intuitivních způsobů, jak tuto funkcionalitu implementovat, ať už používáte nativní blokový editor, nebo populární nástroje jako Divi Builder či Elementor.

Odkaz s kotvou je v podstatě odkaz, jehož URL adresa je doplněna o znak mřížky (#) následovaný unikátním identifikátorem. Tento identifikátor pak směřuje prohlížeč na konkrétní prvek na stránce, kterému byl tento identifikátor přiřazen. V praxi to znamená, že místo načtení celé stránky od začátku, prohlížeč okamžitě přejede na místo, kde je tento identifikátor definován, což výrazně zrychluje přístup k informacím, zejména na delších stránkách s rozsáhlým obsahem. Příkladem může být odkaz směřující na sekci s častými dotazy, který má tvar http://vasedomena.cz/produkt/#faq, kde #faq je právě onen identifikátor.

Implementace v blokovém editoru

Pokud pracujete s nativním blokovým editorem WordPressu, přidání identifikátoru pro kotvu je přímočaré. Stačí vybrat jakýkoliv blok (např. nadpis, odstavec, obrázek nebo celou sekci), který má sloužit jako cíl vašeho odkazu. V postranním panelu nastavení bloku přejděte do záložky „Pokročilé“ a v poli „HTML záložka“ zadejte požadovaný identifikátor. Je důležité dodržet pravidla pro tvorbu identifikátorů: nesmí obsahovat diakritiku, mezery ani speciální znaky kromě pomlčky. Například pro sekci „O nás“ by se hodil identifikátor o-nas. Tento identifikátor pak použijete v samotném odkazu.

Implementace v Elementoru

Elementor, jako jeden z nejoblíbenějších page builderů pro WordPress, rovněž nabízí snadnou cestu k vytvoření interních odkazů. Po otevření stránky v editoru Elementoru klikněte na prvek, kterému chcete přiřadit identifikátor. V levém panelu s nastavením tohoto prvku přejděte do sekce „Pokročilé“ a poté do podsekce „Rozvržení“. Zde naleznete pole „CSS ID“, do kterého zadáte vámi zvolený identifikátor. Opět platí pravidlo o absenci diakritiky a mezer, pro lepší praxi se doporučuje používat pomlčky. Tento identifikátor pak bude sloužit jako cíl pro váš kotvový odkaz.

Implementace v Divi Builderu

Divi Builder, známý svou flexibilitou a vizuálním přístupem, umožňuje přidání CSS identifikátoru pro kotvu obdobně. Po otevření stránky v Divi editoru vyberte modul (prvek), který má sloužit jako cíl odkazu. Klikněte na ikonu ozubeného kolečka pro otevření nastavení modulu. V záložce „Pokročilé“ najdete sekci „ID a třídy CSS“. Zde do pole „CSS identifikace“ zadejte požadovaný identifikátor, opět bez diakritiky a mezer. Tímto krokem připravíte prvek pro navigaci pomocí kotvy.

Vytvoření samotného odkazu s kotvou

Po úspěšném nastavení identifikátorů na cílových prvcích přichází na řadu samotné vytvoření odkazu. Pokud má odkaz pouze přesměrovat na jinou část aktuální stránky, stačí jako URL adresu odkazu zadat symbol mřížky následovaný vaším identifikátorem. Například, pokud jste identifikátoru přiřadili hodnotu kontakt, odkaz bude vypadat takto: #kontakt. V případě, že potřebujete odkázat na konkrétní sekci na jiné stránce, URL adresa bude kombinací plné adresy stránky a identifikátoru. Příklad: https://www.vasweb.cz/sluzby/#cenik. Je nezbytné, aby zadaný identifikátor v odkazu přesně odpovídal tomu, který jste nastavili u cílového prvku.

Tato technika není omezena pouze na obsah stránek a příspěvků. Kotvové odkazy lze úspěšně využít i v navigaci WordPressu. Vytvořením „Vlastního odkazu“ v sekci „Vzhled“ -> „Menu“ a zadáním adresy ve formátu #nazev-kotvy můžete vytvořit položku menu, která po kliknutí uživatele přesune na odpovídající sekci na domovské stránce. Pro zajištění správné funkčnosti je klíčové, aby kotva byla na dané stránce definována. Tato metoda efektivně zjednodušuje navigaci na vícesekčních stránkách a zvyšuje celkovou přehlednost webu, což je pro uživatelskou zkušenost zásadní. Zvládnutí této techniky otevírá dveře k pokročilejším možnostem strukturování obsahu a zlepšení interakce s návštěvníky webu.