Cum să adăugați un efect de derulare lină în sus în WordPress folosind jQuery

Te-ai derulat vreodată printr-o postare lungă de blog WordPress sau o pagină de produs pe telefon, doar pentru a realiza că a trebuit să glisezi tot drumul înapoi pentru a găsi meniul? Vizitatorii tăi s-ar putea simți la fel.

Pe paginile mai lungi, acel mic inconvenient se poate transforma rapid în frustrare. Și unii ar putea pur și simplu să părăsească site-ul tău WordPress în loc să navigheze înapoi.

Un buton lin de scroll-to-top vă poate ajuta să remediați acest lucru instantaneu. Această funcționalitate oferă cititorilor o modalitate rapidă de a reveni în sus, ceea ce îi poate menține implicați și îi poate încuraja să exploreze mai mult din site-ul dvs.

În acest ghid, vom explica exact cum să adăugați un efect de derulare lină la sus în WordPress folosind jQuery. Nu vă faceți griji, este mai simplu decât ați crede! 💡

Ce este derularea lină și când ar trebui să o folosiți?

Derularea lină este un efect de navigare care mută pagina în sus sau în jos într-o mișcare constantă și fluidă, în loc să sară instantaneu la o secțiune.

Cu excepția cazului în care site-ul are un meniu antet fix, utilizatorii care derulează în partea de jos a unei postări sau pagini lungi WordPress trebuie să gliseze sau să deruleze manual înapoi în partea de sus pentru a naviga pe site.

Aceasta poate fi o adevărată neplăcere, iar adesea, utilizatorii vor apăsa pur și simplu butonul înapoi și vor pleca. De aceea, aveți nevoie de un buton pentru a trimite rapid utilizatorii în partea de sus a postării sau paginii.

De obicei, puteți adăuga această funcționalitate ca un simplu link text fără a folosi jQuery, astfel:

<a href="#" title="Back to top">^Top</a>

Acest lucru îi va trimite pe utilizatori în partea de sus derulând întreaga pagină în milisecunde. Funcționează, dar efectul poate fi deranjant, cam ca atunci când lovești o denivelare pe drum.

O derulare lină este opusul acestui lucru. Va glisa utilizatorul înapoi în partea de sus cu un efect plăcut vizual. Utilizarea unor elemente de acest gen poate îmbunătăți drastic experiența utilizatorului pe site-ul dvs.

Având în vedere acest lucru, vom partaja două metode pentru a adăuga un efect de derulare lină în sus pe site-ul dvs. WordPress folosind un plugin și jQuery. Iată o prezentare generală rapidă a tuturor lucrurilor pe care le vom acoperi în acest ghid:

Fără alte introduceri, să începem cu prima metodă.

Sfat 1: Adăugarea unui efect de derulare lină la început folosind un plugin WordPress

Această metodă este recomandată începătorilor, deoarece vă permite să adăugați un efect de scroll-to-top unui site WordPress fără a atinge o singură linie de cod.

Primul lucru pe care va trebui să-l faceți este să instalați și să activați pluginul WPFront Scroll Top. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, puteți accesa Setări » Scroll Top din tabloul de bord WordPress. Aici puteți configura pluginul și personaliza efectul de derulare lină.

De aici, primul lucru pe care va trebui să-l faci este să bifezi căsuța „Activat” pentru a activa butonul de derulare în sus pe site-ul tău. Apoi, vei vedea opțiuni pentru a edita offset-ul de derulare, dimensiunea butonului, opacitatea, durata de estompare, durata de derulare și multe altele.

Dacă derulați în jos, veți găsi mai multe opțiuni, cum ar fi editarea timpului de ascundere automată și activarea opțiunii de ascundere a butonului pe dispozitive mici sau pe ecranul wp-admin.

Puteți edita, de asemenea, ce face butonul atunci când faceți clic pe el. În mod implicit, va derula în partea de sus a paginii, dar îl puteți schimba pentru a derula la un anumit element din postare sau chiar pentru a link-ui către o pagină.

În plus, puteți ajusta locația butonului. Deși apare de obicei în colțul din dreapta jos al ecranului, aveți opțiunea de a-l muta în orice alt colț.

Pluginul WPFront Scroll Top oferă filtre pentru a afișa butonul de derulare în sus doar pe paginile selectate.

În mod normal, acesta va apărea pe toate paginile de pe blogul dvs. WordPress.

Cu toate acestea, puteți naviga la secțiunea „Afișare pe pagini” și puteți alege unde doriți să afișați efectul de derulare către partea de sus.

Pluginul oferă, de asemenea, designuri predefinite pentru butoane. Ar trebui să găsești cu ușurință un design care să se potrivească site-ului tău.

Dacă nu puteți găsi un buton de imagine prefabricat care să vă convină, există o opțiune de a încărca o imagine personalizată din biblioteca media WordPress.

Când ați terminat, pur și simplu faceți clic pe butonul „Salvare modificări”.

Acum puteți vizita site-ul dvs. WordPress pentru a vedea butonul de derulare în sus în acțiune.

Sfat 2: Adăugarea efectului de derulare lină la început cu jQuery în WordPress

În această metodă, vom adăuga efectul de derulare lină la început folosind jQuery, niște CSS și o singură linie de cod HTML. Echipa noastră a testat și verificat manual acest fragment de cod exact pe o instalare WordPress nouă pentru a ne asigura că funcționează fără a perturba funcționalitatea temei.

Acestea fiind spuse, multe tutoriale vă vor face să editați fișierele temei pentru a adăuga un buton de derulare lină la început. Dar asta nu este foarte prietenos pentru începători – chiar și o greșeală mică ar putea să vă strice site-ul.

De aceea, recomandăm utilizarea WPCode ori de câte ori doriți să adăugați funcționalități personalizate, cum ar fi un efect de derulare lină. Este cel mai bun plugin de fragmente de cod pentru WordPress și vă permite să adăugați în siguranță fragmente personalizate – totul fără a atinge fișierele temei dvs.

Unele dintre mărcile partenere folosesc WPCode pentru a adăuga și gestiona fragmentele lor de cod personalizate, iar funcționează foarte bine.

Pentru a afla mai multe despre acesta, puteți consulta recenzia noastră completă despre WPCode pentru a vedea toate caracteristicile sale.

Mai întâi, trebuie să instalați și să activați pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Odată activat, accesați Snippets de cod » + Adăugați Snippet din tabloul de bord WordPress.

Pe ecranul următor, veți vedea biblioteca de coduri WPCode.

Faceți clic pe „Utilizați fragmentul” sub „Adăugați codul dvs. personalizat (Fragment personalizat)”.

Va apărea o fereastră pop-up pentru a vă solicita tipul de cod.

Asigurați-vă că selectați „Fragment JavaScript”.

Acum că sunteți în editorul de cod, să dăm mai întâi un nume clar fragmentului dvs. de cod personalizat. Acesta este doar pentru referința dvs., dar recomandăm utilizarea unui nume clar și descriptiv.

Apoi, lipiți următorul cod în caseta „Code Preview”:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Acest script jQuery face toată munca grea pentru efectul dvs. de defilare lină.

Mai întâi, ascunde butonul până când utilizatorul derulează în jos 200 de pixeli. Când utilizatorul face clic pe buton, scriptul animă lin pagina înapoi la 0 pixeli (partea de sus).

Am inclus, de asemenea, o linie return false; pentru a preveni comportamentul implicit al linkului HTML, care ar sări instantaneu utilizatorul în partea de sus și ar strica animația.

Iată cum ar putea arăta pe ecranul dvs.:

Apoi, derulați în jos la secțiunea „Inserare”.

Mai întâi, asigurați-vă că ați selectat „Inserare automată”. Acest lucru asigură că fragmentul rulează automat pe site-ul dvs. fără a necesita plasare manuală.

Apoi, să verificăm locația.

Există multe opțiuni din care puteți alege, inclusiv antet, subsol, meniu de navigare și multe altele. Pentru un buton de derulare în sus, „Subsolul întregului site” este o opțiune excelentă, deoarece asigură că butonul este disponibil pe toate paginile, fără a interfera cu conținutul site-ului dvs.

Cu aceasta făcută, puteți comuta comutatorul la „Activ” pentru ca scriptul să înceapă să ruleze imediat pe site-ul dvs.

Și după aceea, nu uitați să faceți clic pe butonul „Salvare fragment” pentru a activa scriptul.

Acum că am adăugat jQuery, să adăugăm un link real pe site-ul nostru WordPress care să ducă utilizatorii înapoi în sus.

Pentru a face acest lucru, pur și simplu adăugați acest HTML pe footer-ul site-ului dvs. folosind WPCode.

Accesați Code Snippets » Header & Footer și adăugați acest snippet în zona „Footer”:

<a href="#top" id="smoothup" title="Back to top"></a>

Nu uitați să faceți clic pe „Salvare modificări” când ați terminat. Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum să adăugați coduri în antet și subsol în WordPress

Dacă vizualizați site-ul dvs. chiar acum, nu veți vedea niciun buton. Acest lucru se datorează faptului că codul nostru HTML include un link, dar fără text de ancorare. Este în prezent complet invizibil.

Pentru a remedia acest lucru, vom folosi o pictogramă de imagine (cum ar fi o săgeată în sus) pentru a afișa un buton de revenire în partea de sus. Pentru aceasta, va trebui să adăugați un CSS personalizat.

Puteți adăuga CSS-ul în fișierul stylesheet al temei dvs. sau prin WPCode. Utilizarea WPCode este mai sigură, deoarece nu se va pierde dacă actualizați tema.

Înainte de a adăuga codul, va trebui să:

1. Încărcați o pictogramă de imagine (cum ar fi o săgeată) în Biblioteca media WordPress. Dimensiunea poate fi oricare funcționează cel mai bine pentru site-ul dvs. — am folosit 40x40px ca exemplu. Dacă utilizați o dimensiune diferită, asigurați-vă că modificați valorile înălțime și lățime în codul CSS de mai jos.
2. Copiați URL-ul imaginii pe care tocmai ați încărcat-o. Apoi, asigurați-vă că înlocuiți URL-ul imaginii fictive (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) din fragmentul CSS de mai jos cu URL-ul real al imaginii dvs.

Acest lucru va asigura că butonul dvs. de derulare în sus este afișat corect și are efectul de rotație la hover.

Acum să navigăm la Code Snippets » + Add Snippet.

Apoi, puteți trece cu mouse-ul peste „Add Your Custom Code (Custom Snippet).”.

Faceți clic pe butonul „Use snippet” atunci când apare.

În fereastra pop-up care apare, va trebui să alegeți un tip de cod.

Să selectăm „CSS Snippet”.

În editor, continuați și dați un nume clar fragmentului dvs. de cod personalizat pentru o organizare ușoară.

Apoi, puteți adăuga următorul cod CSS personalizat în caseta „Code Preview”:

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    text-indent: -9999px;
    display: none;
    background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

#smoothup:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}</pre>

Acest CSS îl setează la o dimensiune și poziție fixă a pictogramei, precum și adaugă o mică animație la hover care rotește butonul.

Nu este nevoie să editați nimic în Insertion. Acest lucru asigură că CSS-ul este aplicat pe întregul site fără a afecta alte elemente.

În cele din urmă, comutați comutatorul pentru a activa fragmentul și apăsați „Save Changes”.

Și asta e tot!

Acum puteți vizita site-ul dvs. web pentru a vedea derularea lină în sus în acțiune:

Sfat bonus: Alte efecte subtile de animație pentru a menține vizitatorii implicați

Un buton de derulare lină în sus este doar o modalitate de a face site-ul tău să pară mai prietenos cu utilizatorul. Există o mulțime de alte efecte de animație mici pe care le poți adăuga pentru a ghida ușor atenția și a face navigarea pe site-ul tău să pară fără efort.

De exemplu, un efect parallax face ca imaginile de fundal să se deplaseze cu o viteză diferită față de conținutul dvs., creând un sentiment de profunzime și mișcare. Constructorii moderni de pagini precum SeedProd au această funcționalitate încorporată, permițându-vă să creați acest efect fără a scrie cod.

Este o modalitate simplă de a face paginile dvs. să pară mai vii. Pentru instrucțiuni pas cu pas, consultați ghidul nostru despre cum să adăugați un efect parallax.

Un efect de comutare a căutării menține lucrurile curate, afișând bara de căutare doar atunci când cineva face clic pe pictogramă. Această funcție ascunde câmpul de introducere a căutării până când un utilizator face clic activ pe un buton pentru a-l afișa. Acest lucru ajută designul dvs. să pară mai puțin aglomerat, făcând în același timp ușor pentru vizitatori să găsească ceea ce au nevoie.

Dacă tema dvs. nu are deja această funcție încorporată, plugin-uri precum WPCode vă pot ajuta. Pentru detalii, consultați ghidul nostru despre cum să adăugați un efect de comutare a căutării în WordPress.

Și dacă aveți o galerie de imagini, un efect lightbox permite oamenilor să vizualizeze fotografii într-o fereastră pop-up mai mare, fără distrageri, fără a părăsi pagina. Acest efect de suprapunere afișează imaginile într-o fereastră focalizată, în timp ce restul paginii este estompat. Este un detaliu mic, dar face o mare diferență pentru oricine iubește să exploreze imaginile dvs.

În plus, plugin-urile de galerie precum Envira Gallery fac adăugarea acestei funcții ușoară. Pentru a face acest lucru, puteți consulta ghidul nostru despre cum să adăugați o galerie în WordPress cu un efect lightbox.

Aceste atingeri nu sunt doar „plăcute de avut”; ele arată vizitatorilor că v-ați gândit la experiența lor. Acest lucru îi poate face mai predispuși să rămână și să exploreze. 🕵️

Întrebări frecvente: Adăugarea unui efect de derulare în sus în WordPress folosind jQuery

Înainte de a încheia, iată câteva întrebări frecvente pe care cititorii le au despre adăugarea unui buton scroll-to-top în WordPress.

Este un buton de derulare în sus necesar pentru fiecare site web?

Nu întotdeauna. Dar este o adiție inteligentă pentru paginile cu mult conținut. Pe postări lungi de blog sau tutoriale, economisește vizitatorilor efortul de a derula înapoi sus, ceea ce face experiența lor de navigare mai plăcută.

Va încetini butonul de derulare în sus site-ul meu?

Nu ar trebui. Metoda cu plugin este ușoară și optimizată pentru performanță, iar fragmentul de cod jQuery este minuscul. Deci, nu va avea niciun impact vizibil asupra vitezei site-ului dvs.

Unde este cel mai bun loc pentru a plasa butonul de derulare în sus?

Majoritatea site-urilor îl plasează în colțul din dreapta jos al ecranului. Acest loc îl menține vizibil și ușor de accesat, fără a distrage atenția de la conținutul principal.

Pot folosi un link text în loc de o imagine pentru butonul meu?

Absolut. Atât metoda cu plugin, cât și cea cu cod personalizat pot fi configurate cu un simplu link text „Înapoi sus” în loc de o pictogramă. Plugin-ul oferă această opțiune direct, iar cu metoda cu cod, pur și simplu ajustați HTML-ul și CSS-ul pentru a se potrivi stilului dvs.

Lectură suplimentară: Mai multe resurse despre temele WordPress

Sperăm că acest articol v-a ajutat să adăugați un efect lin de derulare în sus pe site-ul dvs. folosind jQuery. Personalizarea temei dvs. cu funcționalități precum aceasta este doar un pas în construirea unui site ușor de utilizat. Doriți să aprofundați temele WordPress? Aceste resurse vă vor ajuta:

• Cele mai populare și cele mai bune teme WordPress
• Ce se întâmplă când schimbați tema WordPress?
• Lucruri pe care TREBUIE să le faci înainte de a schimba temele WordPress
• Ce este un framework de temă WordPress și care sunt cele mai bune framework-uri de temă?
• Cum să-ți personalizezi tema WordPress
• Cum să găsești ce fișiere să editezi într-o temă WordPress
• Cum să folosiți personalizatorul de teme WordPress ca un profesionist
• Un ghid complet pentru începători despre editarea completă a site-ului WordPress

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.