Co je kotva
Kotva (angl. anchor) je speciální odkaz, většinou na té samé stránce a jejich použití může být mnohdy užitečné, např:
- Jednoduchý odkaz na konkrétní místo na stránce.
- Seznam kapitol na stránce (nahoře bude seznam všech nadpisů na stránce a po kliknutí se uživatel dostane na kapitolu, která ho zajímá).
- Kontaktní formulář můžete dát do patičky (místo toho, aby měla extra stránku) a kotvu použijete (klidně i z menu) jako odkaz na stránce (uživatel pak sjede/odroluje dolů do patičky, kde formulář najde).
- U dlouhých článků – kotvy se dávají do jednotlivých nadpisů, ze kterých se zároveň dělají odkazy, aby bylo možné zkopírováním nadpisu jednoduše odkázat přímo na konkrétní místo v textu.
Jak kotvu vytvořit
Kotva se vždy “nalepí” na HTML element jako identifikátor. HTML element tedy musí obsahovat atribut id a nějakou jeho hodnotu:
id="anchor-name"HTML element pak může obsahovat i další atributy, jako jsou třídy, styl a další věci. Např:
<h2 class="my-class" id="how-to-create-anchors">Jak vytvořit kotvy</h2>.V příkladu je použita kotva “how-to-create-anchors”, na kterou se pak můžeme odkazovat.
Jak kotvu pojmenovat?
Nezapomeňte na to, že kotva se při použití stane součástí URL, tedy její název by měl být jasný, výstižný a správně pojmenovaný:
- Název musí být unikátní v rámci stránky (pouze stránky, nikoli celého webu),
- kotva nesmí obsahovat mezery,
- ideálně by v ní měly být jen malá písmena bez diakritiky,
- číslice mohou být také (je doporučeno je nedávat na první pozici),
- jako oddělovník je ideální pomlčka,
- znak potvržení také zvládne, ale nedoporučuji ho používat z prostého důvodu – až se URL i s kotvou vloží někam na web jako odkaz a díky formátování bude podtržený, oddělovací podtržítka pak nebudou vidět. www.vyladeny-web.cz/blog/moje_bozi_kotva – opravdu ta podtržítka nejsou vidět, že? Takto je to lepší: www.vyladeny-web.cz/blog/moje-bozi-kotva
- jiné další speciální znaky bych také vynechala,
- kotvy pojmenujte podle významu a použití, ideálně v jazyce stránky, na které kotva je.
Kotva ve WordPress
WordPress umožňuje nastavit kotvy přímo v blokovém editoru. V nastavení (téměř) každého bloku najdete v pokročilém nastavení možnost vložení kotvy (HTML anchor) nebo třídy (Additional CSS class) pro formátování bloku.
Toto vytvoří stejný výsledek, jen je to na klik (a ťuk) – vizte nadpis této podkapitoly:
<h3 id="kotva-ve-wordpress">Kotva ve WordPress</h3>Kotva v DIVI
DIVI nezůstává pozadu a možnost vložení kotvy/id má u každého bloku (tj. sekce, řádku, sloupce nebo modulu), také. Najdete ji v nastavení bloku v pokročilých:
Toto vytvoří (v tomto případě na modulu blurb) přesně to, co potřebujeme – kotvu:
<div id="nabidka-tvorby-webu" class="et_pb_module et_pb_blurb ..." style="...">
...
</div>Jak se na kotvu odkazovat?
Kotvu v odkazu poznáte podle toho, že jí předchází znak “#” a následuje název kotvy. A toto pak vložíte, kam potřebujete:
- Custom link (vlastní odkaz) odkaz v menu WordPress,
- odkaz v DIVI, Elementoru a dalších, které mají okénko na vložení odkazu,
- odkaz ve WordPress (Gutenberg, classic editor a další) je úplně stejný případ,
- přímo html element odkazu: <a href=”[anchor-link]”>Odkaz na kotvu</a>.
Možností odkazování je několik, podle toho, kde je kotva a kde je odkaz na ni:
1) Kotva je na stejné stránce jako odkaz na ni
Pokud odkaz bude vždy na té samé stránce jako kotva (a nebude např. v menu nebo na jiné stránce), tak je to ta nejjednodušší možnost. Kotvu samotnou vložíme do odkazu:
#kotva-ve-wordpressToto lze využít v menu pouze v případě, že máte one-page web – pokud tomu tak je, můžete použít jako odkazy pouze kotvy, protože se nikdy nedostanete ze stránky pryč (ale pozor např. na stránky s GDPR nebo zpracování cookies – v tom případě už má web více stránek a kotvy v menu vám přestanou nefungovat!). Pokud pro jistotu budete používat variantu 2) níže, nic se nestane a jen si vše pojistíte.
2) Kotva je na jiné stránce než je odkaz na ni
Nejčastější možnost. V tomto případě je nutné před kotvu dát i název stránky:
https://vyladeny-web.cz/ikony-v-menu-wordpressu/#ikony-v-menu-bez-pluginuIdeální pro všechny ostatní způsoby použití. Ať už do menu, nebo do odkazů na jiné strány (dokonce na jiné weby), takto to bude stačit.
3) Kotva je na hlavní stránce
Toto je jen speciální situace varianty číslo 2). I tady je nutné dát název stránky před kotvu, ale místo celého odkazu na stránku tam vlastně bude jen název webu (protože to je odkaz na hlavní stranu):
https://vyladeny-web.cz/#newsletterBonus: Jemné rolování k odkazu
DIVI má v sobě zabudovaný tzv. “smooth scroll“, neboli jemné rolování. Pokud nepracujete s DIVI (nebo builderem, který to má v sobě také) a používáte šablonu, která to neumí, můžete ji to naučit. Jedním řádkem (který vložíte do CSS webu):
html {scroll-behavior: smooth;}