Link Anchor WordPress: Cum să adăugați un defilare uniform de pagină

Salutare Oameni de la Internet!

Îți voi arăta două modalități de a adăuga un link de ancorare WordPress (sau unii oameni îl numesc pentru a sări link sau pagină) la postarea ta, iar acest lucru va funcționa și în pagini și meniuri.

De asemenea, vă voi dezvălui cum să ajungeți la ancora de pe altă pagină .

1. Vom adăuga un ID personalizat în HTML și vom folosi # în link pentru a spune WordPress că acest link se află pe aceeași pagină.

2. Pentru a obține o defilare lină, vom folosi o pagină de plugin WordPress derulare la id.

După acest tutorial, vă puteți obține unul dintre aceste tatuaje...

Pentru ca doamnele să poată face legătura cu tine de oriunde .

Am realizat și un videoclip despre adăugarea unui link de ancorare în WordPress:

CONȚINUT:

Configurați un link simplu WordPress Anchor fără un plugin

Cum să faci link la link-ul de ancorare dintr-o altă pagină

Un plugin Anchor Link cu Smooth Page Scroll

Configurați un link simplu WordPress Anchor fără un plugin

Bine, cel mai simplu mod de a adăuga un link de ancorare la WordPress NU necesită niciun plugin .

Iată ce vreau să spun prin link de ancorare. Faceți clic pe un link și vă duce la o altă parte a aceluiași articol. Cu alte cuvinte, trimite către aceeași pagină.

Link-ul de ancorare este linkul pe care faceți clic și declanșează o derulare la ancora undeva mai jos pe aceeași pagină.

Să începem. Doar asigurați-vă că sunteți conectat la WordPress și găsiți postarea pe care doriți să adăugați linkul de ancorare.

Accesați textul pe care doriți să îl transformați într-un link de ancorare .

Să convertim acest text într-un link, făcând clic aici.

Apoi, dați un nume linkului, dar trebuie să puneți semnul # înaintea acestuia.

„Nu folosi niciun caracter special. Dacă doriți să separați cuvintele, puteți folosi o cratimă.”

Id-ul poate fi orice , dar vă sfătuiesc să folosiți ceva scurt, dar descriptiv .

Pentru că mai târziu veți vedea aceste linkuri în Google Analytics , deoarece Google poate face linkuri către anumite părți ale site-ului dvs.

Deci, de exemplu, voi folosi #anchor-link-info .

Și salvați setările linkului.

Da, asigură-te că folosești hashtag-urile în mod corect, ca să nu ajungi ca acestea.

Acum, dacă am merge pe site și am încerca să facem clic pe noul link, nu s-ar întâmpla nimic, cu excepția faptului că ar fi #anchor-link-info în URL.

Acest lucru se datorează faptului că am stabilit legătura de ancorare, dar browserul dvs. nu știe unde este ancora. Deci, să adăugăm o ancoră postării.

Întoarceți-vă la postarea dvs. și derulați în jos la secțiunea pe care doriți să o ancorați, pentru a duce și a evidenția textul.

De obicei, fac link la anteturile din text ca acesta.

Apoi, trebuie să comutați modul de la vizual la text, o puteți face în colțul de sus al câmpului de postare.

Apoi găsiți antetul în vizualizarea text (ar trebui să fie evidențiat).

Acum vedeți că antetul este înfășurat în jurul <h2></h2> . Acesta este doar cod HTML pentru un antet 2 (structură similară ca în Microsoft Word).

Apoi, faceți puțin spațiu între „h2” și „>”. Și adăugați următoarele:

id="#anchor-link-info"

Deci ar trebui să aveți:

<h2 id="#anchor-link-info”> în loc de <h2>

„Înlocuiți pur și simplu informațiile despre link-ul ancoră cu propriul ID de ancorare .”

Rețineți că id-ul trebuie să fie unic, altfel ați putea sparge ceva pe site-ul dvs.

Apoi, salvează postarea și mergi să vezi pe site.

Când faceți clic pe link, ar trebui să vă duce la eticheta de ancorare.

Îmi dau seama că acest scroll este foarte brusc, dar este foarte simplu de configurat și își face treaba bine.

Dacă doriți să fie netedă , avem nevoie de ceva javascript sau folosiți pluginuri .

Vă voi arăta mai jos cum să faceți acest lucru cu un plugin.

Cum să faci link la link-ul de ancorare dintr-o altă pagină

Pentru a crea un link către ancora dintr-o altă pagină, trebuie doar să adăugați #your-anchor-name la sfârșitul adresei URL a postării (având în vedere că ați configurat o ancoră pentru postarea dvs., așa cum am făcut mai sus).

Iată cum să o faci pas cu pas.

1. Luați adresa URL a postării,

2. deschideți o nouă fereastră de browser

3. iar la sfârșitul URL-ului adăugați ancora (cu hashtag).

De exemplu: #anchor-link-info .

4. Apăsați enter și pagina se deschide în secțiunea din dreapta.

De exemplu, adresa URL pentru această secțiune de pe site-ul meu este https://punchsalad.com/wordpress-tips/wordpress-anchor-link #anchor-link-from-other-page

Puteți adăuga această adresă URL oriunde ca link sau în meniul WordPress și va deschide acest tutorial în această secțiune.

Un plugin Anchor Link cu Smooth Page Scroll

Ce se întâmplă dacă doriți o derulare fluidă a paginii WordPress când faceți clic pe linkul de ancorare? Pentru aceasta, aveți nevoie de ceva javascript .

Cea mai simplă modalitate este să instalați un plugin WordPress numit „pagina derulare la id”.

Pentru a face acest lucru, urmați acești pași:

1. Accesați pluginurile dvs. și adăugați noi.

2. În caseta de căutare tastați pagina derulare.

3. Instalați pluginul.

4. Activați-l.

Acum, acest plugin are o mulțime de setări diferite și vă puteți juca cu ele.

Setările se află în bara de meniu din stânga: Setări > Pagina Derulați la ID

Găsesc că pluginul funcționează destul de bine din cutie . Deci voi păstra totul ca implicit.

„Un lucru de reținut este că, dacă utilizați încărcare leneră , este posibil ca pluginul să nu găsească locul potrivit pe pagină.”

Apoi, să setăm un link de ancorare cu pluginul.

Dacă ați urmat tutorialul de mai sus, atunci reveniți la postarea pe care am pregătit-o mai devreme și eliminați linkul și id-ul.

După cum puteți vedea, există 2 pictograme noi lângă pictogramele standard de editare a textului.

Prima este configurarea link-ului, iar cea cu ochiul taurului este ancora sau ținta link-ului.

Mai întâi, să adăugăm un link de ancorare făcând clic pe pictograma linkului.

Va apărea o fereastră pop-up și va solicita adresa URL.

Folosiți doar id-ul cu # , de exemplu: #anchor-link-info.

În plus, trebuie să includeți o clasă personalizată „ps2id” , care îi spune pluginului să defileze.

Și dacă aruncăm o privire în vizualizarea text, veți vedea că a adăugat o nouă clasă ps2id.

Deci totul este bine!

Apoi, derulați în jos până la punctul în care doriți să adăugați ancora.

Apoi, plasați cursorul imediat după antet. ..

apoi faceți clic pe pictograma bullseye .

Între timp, adăugați același id ca mai sus, dar fără # , deci „anchor-link-info”.

Veți vedea că pluginul adaugă un shortcode .

În regulă, NU va apărea pe site . Mai este departe pentru a spune WordPress unde să plaseze ancora.

Apoi , salvați modificările .

Să vedem cum arată pe site.

Doar reîmprospătați pagina și faceți clic pe link ...

Se va derula fără probleme până la ancora pe care tocmai ați setat-o.

După cum puteți vedea, shortcode-ul nu apare nicăieri !

Uimitor! Nu-i aşa?

Puteți plasa mai multe ancore pe o pagină , nu uitați să le oferiți ID-uri unice și să creați linkuri.

De exemplu, puteți vedea că ID-urile pentru acest articol sunt:

#simple-wordpress-anchor-link
#anchor-link-din-altă-pagină
#anchor-link-plugin

Și linkurile sunt în partea de sus a paginii în „Conținut”. Acest lucru facilitează derularea la orice secțiune.

Acestea fiind spuse, a trebuit să dezactivez pluginul de încărcare leneră deoarece am încărcare leneșă cu wordpress-ul meu.

Acum, având în vedere experiența dvs. clară de utilizator, vedeți cum puteți îmbunătăți viteza paginii cu câteva plugin-uri WordPress.