Ako vytvoriť odkazy na preskočenie kotvy vo WordPress

V jednom z mojich nedávnych blogových príspevkov som musel použiť odkaz „skok do tejto sekcie“. Kým predchádzajúce znalosti v HTML to uľahčujú, napadlo ma vytvoriť príručku pre niekoho, kto o tom nemá ani poňatia.

Odkazy na ukotvenie predstavujú jednoduchý spôsob, ako pomôcť vašim čitateľom preskočiť obsah priamo na časť stránky, ktorá ich zaujíma.

Pravdepodobne by ste to videli v a doplnok pre obsah tiež. Keď kliknete na odkaz „obsah“, okamžite sa posuniete nadol na daný nadpis alebo podnadpis.

Zatiaľ čo doplnok obsahu uľahčuje pridávanie odkazov na skok do vášho WordPress blogové príspevky, neumožňuje vám vytvoriť vlastnú kotvu pre odkazy na skok

Tu je návod, ako to funguje:

Doplnok obsahu zvyčajne vytvorí skokové odkazy pre podnadpisy nadpisov reklamy. Ale čo keď potrebujete vytvoriť odkaz na konkrétny text alebo časť vo svojom príspevku?

V tomto príspevku vám ukážem, ako môžete jednoducho vytvárať skokové odkazy s alebo bez použitia doplnku WordPress. Je to celkom jednoduché a nemusíte sa báť, ani keď ste úplný začiatočník.

V skutočnosti vám táto príručka pomôže, aj keď máte blog BlogSpot. Každý krok nižšie zostáva rovnaký pre blogerov, ktorí používajú BlogSpot Blog. Stačí vstúpiť do editora HTML a pokračovať v ďalších krokoch.

Metóda 1: Bez použitia pluginu

Prejdite do editora WordPress a otvorte blogový príspevok, v ktorom chcete vytvoriť odkazy. Prepnite z vizuálneho na textový editor.

Potom skopírujte a prilepte tento HTML kód tak, ako je.:

<a href="#jump-id">Your text here</a>

Zmeňte „#jump-id“ na text, ktorý chcete, aby bol kotvou odkazu na skok. # by malo byť jedinečné pre každý príspevok a každú kotvu. Pamätajte, že musí existovať a spojovník ( – ) medzi dvoma alebo viacerými slovami, aby odkaz na skok fungoval.

Tu je obrázok, ako by to malo vyzerať:

Určite nevkladajte žiadne ďalšie atribúty odkazu HTML ako napr target = "_ blank" tam po ostatných tutoriáloch na internete. Ak pridáte a target = "_ blank" v ňom váš skokový odkaz otvorí novú stránku a preskočí na text kotvy. Nebude to na tej istej stránke.

Teraz prejdite na text, obrázok alebo akýkoľvek iný prvok vašej stránky, kde chcete, aby bola cieľová kotva. Cieľová kotva zaistí, že keď niekto klikne na odkaz, stránka sa automaticky posunie na túto časť a nikde inde.

Skopírujte a prilepte jeden z týchto dvoch kódov HTML, aby ste mohli použiť kotvu odkazu:

<a id="jump-id"></a>Your text here

OR

<a id="jump-id">Your text here</a>

*Poznámka: Ak použijete druhý kód HTML a zatvoríte kotvu za textom, text sa zvýrazní ako odkaz. Nikam vás to však neposunie. Ak nechcete, aby bol text zvýraznený, použite prvý odkaz a zatvorte značku pred textom.

Metóda 2: Použitie doplnku WordPress

Ak chcete hladký efekt posúvania pre všetky odkazy na skok, možno budete musieť použiť doplnok.

Ten, ktorý považujem za dokonalý, je Prejdite na stránku id. Je bez chýb a je jediným pluginom v kategórii, ktorý sa pravidelne aktualizuje.

Ak ho chcete použiť, musíte si najskôr nainštalovať doplnok Page Scroll to Id na svoj blog alebo web WordPress.

Prejdite na svoj informačný panel WordPress a kliknite na doplnky. Vyhľadajte položku Page Scroll to Id a nainštalujte ju. Aktivujte doplnok a nedotýkajte sa nastavení.

Predvolené nastavenie je najlepšia konfigurácia a nepotrebujete nič viac. Ak sa vyznáte v CSS, môžete upraviť nastavenia a prispôsobiť rozhranie doplnku.

Prejdite na blogový príspevok alebo stránku, na ktorú chcete pridať odkaz na skok, a kliknite na upraviť. Po otvorení editora si na paneli s nástrojmi editora všimnete dve nové ikony.

Kliknite na prvú ikonu na paneli s nástrojmi a otvorí sa kontextové okno. V tomto vyskakovacom okne musíte zadať dve veci:

1. kotva id
2. Text odkazu

Do poľa ID kotvy zadajte #jump-id. Tu ID skoku môže byť čokoľvek v rovnakom formáte. Ak ide o dve slová alebo jedno slovo a číslo, malo by byť spojené spojovníkom.

Do textového poľa odkazu zadajte text, na ktorý chcete odkazovať odkaz. Vaši používatelia uvidia tento text a kliknutím naň sa posunú nadol na ID kotvy.

V mojom prípade používam #hlava-5.

Keď ste všetko zadali správne, prejdite na ďalší krok nižšie.

Prejdite nadol na text alebo obrázok, kam chcete umiestniť kotvu. Toto je miesto, kde sa používateľ po kliknutí na odkaz skoku automaticky posunie nadol.

Kliknite na druhú ikonu na paneli nástrojov editora a zadajte polia presne tak, ako je to znázornené na obrázku nižšie.

Tu musíte zadať jednu vec:

1. id cieľ

Do poľa ID zadajte rovnaké ID, aké ste použili v poli ID kotvy. Tentoraz bez #.

Odkedy som použil #hlava-5 vyššie, vstúpim hlava-5 v poli id.

Kliknite na ok a aktualizujte príspevok.

Toto je pohodlný a priamy spôsob pridávania odkazov na skok do vášho príspevku, ktorý bude pre väčšinu začiatočníkov užitočný. Odporúčam držať sa tejto metódy, ak nemáte žiadne znalosti HTML, alebo sa bojíte čo i len pozrieť do textového editora.

Ak používate editor Gutenberg, obe vyššie uvedené metódy budú fungovať bez problémov.

Vždy vyčistite svoje medzipamäte aby ste sa uistili, že odkaz na skok funguje keď aktualizujete starý príspevok.

Zdieľajte tento návod, ak vám pomohol. Ak máte nejaké otázky, dajte mi vedieť v komentároch.