Webové zákusky

Jak používat kotvy

2. 7. 2022

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í mezera,
    • 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 – opradu 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.

Kotva ve WordPressu

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:

Kotvy v DIVI

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-wordpress
Račte otestovat: Tudy se dostanete na tvorbu kotvu ve WP.

Toto 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-pluginu
Račte otestovat: Tady se podívejte v novém okně na to, jak přidat ikony do menu WP.

Ideá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/#newsletter
Račte otestovat: Tudy se dostanete na newsletter na hlavní straně.

Bonus: 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;}

Zdroje

Další články

Ninja forms – co se hodí vědět

Ninja Forms je skvělý plugin pro formuláře. A to hned z několika důvodů: Skvělý drag&drop editoraria atributy, což je skvělé pro přístupnost webu,umí ukládat odpovědi, zvládne poslat tolik...

WooCommerce – změna textu tlačítka

Tzv. "Tlačítková novela" s sebou přináší pro e-shopy řadu změn a jednou z nich je změna textu tlačítka v posledním kroku nákupu (tak novela dostala svůj název). A kdo je připraven - není překvapen. Jak takové tlačítko přejmenovat?