Jak odkazovat na konkrétní místo na stránce

Chci, aby se po kliknutí na odkaz nebo tlačítko návštěvník dostal přímo k té části stránky, o které se zmiňuju. Dá se to ve WordPressu udělat?

~ Jasně, že dá. Hned tě to naučím a rovnou to nastavíme přímo v tomto článku. Použijeme k tomu tzv. kotvu.

Co je webová kotva a jak funguje?

Na webu je kotva speciální značka, kterou vložíš na nějaké konkrétní místo ve stránce nebo článku, abys pak mohla odkazovat přímo na ně.

V odkazu pak použiješ právě tuto značku, stránka v prohlížeči sjede přímo k označenému místu. Třeba tento odkaz tě navede na závěr článku, kde ti sepíšu pár příkladů, kdy se ti kotva může hodit.

Návod na odkazy na konkrétní místo na stránce

Protože toto nastavení má 3 hlavní kroky a jeden z nich má 2 možná provedení, rozdělíme si návod na části, ke kterým si můžeš přeskočit právě díky dalším kotvám. Stačí kliknout na odkazy v tomto minirozcestníku:

  1. Pojmenovat kotvu
  2. Nastavit kotvu
  3. Nastavit odkaz ke kotvě

Jak pojmenovat kotvu

Jak si kotvu pojmenuješ záleží jen na tobě, může to být speciální zkratka, které budeš rozumět jen ty, nebo naopak popisné slovo, které se bude dobře pamatovat.

Zásady, které je potřeba dodržet

Kotvu si pojmenuj tak, aby obsahovala jen

  • malá písmena bez diakritiky,
  • číslice
  • a případně pomlčku nebo podtržítko.

Název kotvy by neměl obsahovat znaky s diakritikou, ostatní interpunkční znaménka ani mezeru.

Jak nastavit kotvu na konkrétní místo na stránce

  1. Klikni si na blok, který má být po prokliknutí odkazu (tlačítka) nahoře na stránce, tj. je přesně na tom místě, kam chceš odkazovat.
  2. V pravém editačním sloupci v nastavení bloku rozklikni volbu Pokročilé.
  3. Do kolonky HTML záložka napiš název svojí kotvy.
jak nastavit kotvu ve WordPressu s Gutenbergem

Tak je místo označené a můžeš na ně odkudkoli odkazovat.

Jak nastavit odkaz na kotvu na stejné stránce

Funguje to stejně, jako když nastavuješ jakýkoli jiný odkaz v textu / na tlačítku / na obrázku, jen místo odkazu na nějakou stránku vložíš odkaz na svoji kotvu.

Odkazem na kotvu je název kotvy, před který napíšeš #, např. pro kotvu priklady, použiješ odkaz #priklady.

odkaz na kotvu v Gutenbergu

Mezi # a názvem kotvy není mezera, je potřeba je napsat dohromady.

# napíšeš tak, že držíš stisknutou klávesu pravý Alt (může být označený AltGr) a k tomu stiskneš klávesu X.

Jak nastavit odkaz na kotvu na jiné stránce

Když potřebuješ odkazovat na konkrétní místo, které je v jiné stránce než odkaz (tlačítko), bude postup podobný jako při vkládání odkazu na tu jinou stránku.

Navíc za celý odkaz na danou stránku přilepíš ještě odkaz na svoji kotvu.

Odkaz na moji stránku s nabídkou konzultací je https://petravymetalova.cz/konzultace/.
Objednávka konzultace má nastavenou kotvu objednat.
Odkaz k objednávce je tedy https://petravymetalova.cz/konzultace/#objednat

Příklady, kdy se hodí kotva na stránce

Na závěr ještě pár příkladů, kdy ti tato vychytávka přijde vhod.

  • Potřebuješ odkázat z konce stránky zase na začátek (odkaz tě přenese na 1. začátek tohoto článku).
  • Na prodejní stránce chceš odkázat k objednávkovému formuláři (odkaz tě přenese k objednávce návodu Jak zálohovat WordPress, otevře se v novém okně).
  • Pomocí několika různých kotev můžeš vytvořit přehledný obsah (odkaz tě přenese nahoru k rozcestníku pro tento návod).
  • Chceš čtenáři umožnit přeskočit nějakou část textu (třeba podrobnější vysvětlení, které nemusí každý potřebovat).
  • Hodilo by se ti odkázat na konkrétní ilustrační obrázek, který už je vložený jinde a nehodí se ti vkládat ho znovu na místo, kde se o něm zmiňuješ.

Jestli ti to přijde užitečné, pošli to dál →

Prostor pro postřehy a dotazy

12 komentářů

  1. Boží! Moc děkuji. Přesně to jsem teď hledala a krásně vše během několika minut nastavila! Blond forever!

  2. Tento návod je k dnešnímu dni neplatný. V současné verzi WordPressu nelze napsat mřížku, píše to jen pomlčku.
    12.5.2023

    1. Kontrolovala jsem to a návod stále funguje stejně.
      (Ne)možnost napsat # není otázka WordPressu, doporučuju kdyžtak použít mapu znaků, nebo značku prostě zkopírovat.

  3. Ahoj. 🙂 Chci se zeptat, jestli máš nějaký podobný návod, jak to udělat v Elementoru? Našla jsem u sekcí jen něco, co se jmenuje HTML značka, ale ta funkcionalita se netváří úplně stejně. Jak jsem si procházela přes vánoční svátky kurz, než mi skončila platnost, tak toto jsem tam nenašla. (Nebo mám krátkou paměť. 😀 )

    1. Ahoj Jitko, samostatný návod nemám, ale ten princip je vlastně úplně stejný – odkaz vytvoříš stejným způsobem, značku na to odkazované místo vytvoříš na tom prvku v Elementoru na záložce Pokročilé, tam je políčko CSS ID. Případně můžeš použít taky prvek Anchor menu.

      1. Ahoj! Díky moc. Prvek Anchor menu je super, už jsem ho využila. Než jsem našla tvou odpověď, tak mi ho stihl doporučit ještě jeden kamarád. 🙂 (Nechápu, proč mi nepřišlo upozornění do e-mailu, že jsi na můj komentář už reagovala. Myslela jsem, že to chodí automaticky a ani mě nenapadlo to tady zkontrolovat.)

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *