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 deplasează pagina în sus sau în jos într-o mișcare constantă și fluidă, în loc să sară instantaneu la o secțiune. Ar trebui să o utilizați atunci când doriți să oferiți utilizatorilor o modalitate mai puțin deranjantă de a naviga pe pagini lungi, în special pentru funcții precum butoanele „înapoi sus”.

Cu excepția cazului în care site-ul are un meniu de antet fix, utilizatorii care derulează până la sfârșitul unei postări sau pagini lungi de WordPress trebuie să gliseze sau să deruleze manual înapoi la început pentru a naviga pe site.

Aceasta poate fi o adevărată enervare, 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.

Un scroll lin este opusul acestui lucru. Acesta va derula utilizatorul înapoi în partea de sus cu un efect plăcut vizual. Utilizarea unor elemente precum acesta 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:

• Sfatul 1: Adăugarea unui efect de derulare lină la sus folosind un plugin WordPress (Ușor)
• Sfat 2: Adăugarea efectului de derulare lină în sus cu jQuery în WordPress (Avansat)
• Sfat bonus: Alte efecte subtile de animație pentru a menține vizitatorii implicați
• Întrebări frecvente: Adăugarea unui efect de derulare în sus în WordPress folosind jQuery
• Lectură suplimentară: Mai multe resurse despre temele WordPress

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

Adăugarea unui efect lin de derulare în sus 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 a lega la 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 tău 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ă funcționeze, atunci există opțiunea 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 partea de sus în acțiune.

Adăugarea efectului Smooth Scroll to Top cu jQuery în WordPress

Înainte de a începe, rețineți că această metodă nu este recomandată începătorilor. Este potrivită pentru persoanele care se simt confortabil editând teme, deoarece implică adăugarea de cod pe site-ul dvs.

Pentru a adăuga efectul de derulare lină în sus, vom folosi jQuery, niște CSS și o singură linie de cod HTML în tema ta WordPress. 

Mai întâi, să deschidem un editor de text precum Notepad și să creăm un fișier. Salvați-l ca smoothscroll.js.

Apoi, va trebui să copiați și să lipiți acest cod în fișier:

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 cod este scriptul jQuery care va adăuga un efect de derulare lină la un buton care duce utilizatorii în partea de sus a paginii.

După aceea, puteți salva fișierul și îl puteți încărca în folderul /js/ din directorul temei WordPress.

Pentru mai multe detalii, consultați ghidul nostru despre cum să folosiți FTP pentru a încărca fișiere pe WordPress.

Dacă tema ta nu are un director /js/, atunci poți crea unul și încărca smoothscroll.js în el.

Puteți consulta, de asemenea, ghidul nostru despre structura fișierelor și directoarelor WordPress pentru mai multe informații.

Următorul pas pe care trebuie să-l faceți este să încărcați fișierul smoothscroll.js în tema dvs.

Pentru a face acest lucru, vom înscrie scriptul în WordPress prin simpla copiere și lipire a acestui cod în fișierul functions.php al temei dvs.

Cu toate acestea, nu recomandăm editarea directă a fișierelor temei, deoarece cea mai mică greșeală poate defecta site-ul tău.

În schimb, puteți utiliza un plugin precum WPCode, cel mai bun plugin pentru fragmente de cod pentru WordPress, și să urmați tutorialul nostru despre adăugarea de fragmente de cod personalizate în WordPress:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Codul de mai sus îi spune WordPress-ului să încarce scriptul nostru și biblioteca jQuery, deoarece pluginul nostru depinde de ele.

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 lipiți acest HTML oriunde în fișierul footer.php al temei dvs. folosind WPCode.

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

Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum să adăugați cod în antet și subsol în WordPress

Ați observat probabil că codul HTML include un link, dar fără text de ancorare. Acest lucru se datorează faptului că vom folosi o pictogramă de imagine cu o săgeată în sus pentru a afișa un buton de revenire în partea de sus.

În acest exemplu, folosim o pictogramă de 40x40px. Pur și simplu adăugați CSS personalizat de mai jos la foaia de stiluri a temei dvs.

În acest cod, folosim o pictogramă imagine ca imagine de fundal a butonului și o setăm într-o poziție fixă. Am adăugat, de asemenea, o mică animație CSS, care rotește butonul atunci când un utilizator trece cu mouse-ul peste el:

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
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) }
background: url('') no-repeat;
}

În CSS-ul de mai sus, asigurați-vă că înlocuiți https://www.example.com/wp-content/uploads/2013/07/top_icon.png cu URL-ul imaginii pe care doriți să o utilizați.

Puteți încărca propria pictogramă imagine folosind încărcătorul media WordPress, copiați URL-ul imaginii și apoi lipiți-l în cod.

Și asta e tot!

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 miște cu o viteză diferită față de conținutul dvs., creând un sentiment de profunzime și mișcare.

Este o modalitate simplă de a face paginile tale să pară mai vii. Pentru instrucțiuni pas cu pas, vezi ghidul nostru despre cum să adaugi un efect de paralaxă.

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ă. Acest lucru ajută designul dvs. să pară mai puțin aglomerat, fiind în același timp ușor pentru vizitatori să găsească ceea ce au nevoie.

Dacă tema ta nu are deja acest lucru încorporat, pluginuri precum WPCode te pot ajuta. Pentru detalii, consultă 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 fotografiile într-un pop-up mai mare, fără distrageri, fără a părăsi pagina. Este un detaliu mic, dar face o mare diferență pentru oricine iubește să exploreze imaginile dvs.

În plus, pluginurile de galerie precum Envira Gallery fac adăugarea acestei funcționalități ușoară. Pentru a face acest lucru, puteți consulta ghidul nostru despre cum să adăugați o galerie în WordPress cu efect de 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 articole de blog lungi sau tutoriale, le economisește vizitatorilor efortul de a derula înapoi până 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 metoda cu cod personalizat pot fi configurate cu un simplu link text „Înapoi sus” în loc de o pictogramă. Pluginul oferă această opțiune imediat, iar cu metoda cu cod, pur și simplu ajustați HTML-ul și CSS 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. 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ă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.