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 →

Share on facebook
Share on linkedin
Share on pinterest
Share on twitter

Prostor pro postřehy a dotazy

Napsat komentář

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

Nové články e-mailem

Vlož sem svoji adresu a dám ti vědět o všem, co připravím pro počítačové blondýny:

Kdo to píše?

Rubriky na blogu

Návody

Nejnovější články a návody

Sdílení vítáno!

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on twitter
Twitter