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

Doriți să adăugați un efect de derulare lină în partea de sus a paginii pe site-ul dvs. WordPress?

Un efect de defilare până la început este grozav atunci când aveți o pagină lungă și doriți să oferiți utilizatorilor o modalitate ușoară de a reveni în partea de sus. Ajută la îmbunătățirea experienței utilizatorului site-ului dvs.

În acest articol, vă vom arăta cum să adăugați un efect de defilare în sus în WordPress folosind jQuery și un plugin.

Ce este Smooth Scroll și când ar trebui să-l folosești?

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

Aceasta poate fi o adevărată supărare și adesea utilizatorii vor apăsa pur și simplu butonul înapoi și vor pleca. De aceea ai nevoie de un buton care va trimite rapid utilizatorii în partea de sus a paginii.

Puteți adăuga această funcționalitate ca un simplu link text fără a utiliza jQuery, astfel:

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

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

Derularea netedă este opusul. Acesta va glisa utilizatorul înapoi în partea de sus cu un efect vizual plăcut. Utilizarea unor astfel de elemente poate îmbunătăți drastic experiența utilizatorului pe site-ul dvs.

Acestea fiind spuse, haideți să vedem cum puteți adăuga o defilare lină la efectul superior folosind un plugin WordPress și jQuery.

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

Această metodă este recomandată pentru începători, deoarece puteți adăuga un efect de defilare în sus la un site web 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, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, puteți merge la Setări » Derulați în sus din tabloul de bord WordPress. Aici puteți configura pluginul și personaliza efectul de defilare lină.

Mai întâi, va trebui să faceți clic pe caseta de selectare „Activat” pentru a activa butonul de derulare în sus de pe site-ul dvs. În continuare, veți vedea opțiuni pentru a edita offset-ul derulării, dimensiunea butonului, opacitatea, durata decolorării, durata derulării și multe altele.

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

De asemenea, puteți edita ce face butonul când faceți clic pe el. În mod implicit, acesta 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 trimite către o pagină.

Există, de asemenea, o opțiune de a schimba locația butonului. Va apărea implicit în colțul din dreapta jos al ecranului, dar puteți alege să îl mutați și în oricare dintre celelalte colțuri.

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

În mod normal, 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 defilare în partea de sus.

Pluginul oferă, de asemenea, modele de butoane prefabricate din care puteți alege. Ar trebui să puteți găsi cu ușurință un design care se potrivește cu site-ul dvs.

Dacă nu puteți găsi un buton de imagine pre-construit care să funcționeze pentru dvs., atunci există o opțiune de a încărca o imagine personalizată din biblioteca media WordPress.

Când ați terminat, faceți clic pe butonul „Salvați modificările”.

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

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

Această metodă nu este recomandată pentru începători. Este potrivit pentru persoanele care se simt confortabil să editeze teme, deoarece include adăugarea de cod pe site-ul dvs. web.

Vom folosi jQuery, ceva CSS și o singură linie de cod HTML în tema dvs. WordPress pentru a adăuga efectul de defilare lină.

Mai întâi, deschideți un editor de text precum Notepad și creați un fișier. Continuați și 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;
		});
});

După aceea, puteți salva fișierul și îl puteți încărca în folderul /js/ din directorul dvs. de teme WordPress. Pentru mai multe detalii, consultați ghidul nostru despre cum să utilizați FTP pentru a încărca fișiere în WordPress.

Dacă tema dvs. nu are un director /js/ , atunci puteți crea unul și încărcați smoothscroll.js în el. De asemenea, puteți vedea ghidul nostru despre fișierele WordPress și structura directoarelor pentru mai multe informații.

Acest cod este scriptul jQuery care va adăuga un efect de defilare lină unui buton care duce utilizatorii în partea de sus a paginii.

Următorul lucru pe care trebuie să-l faceți este să încărcați fișierul smoothscroll.js în tema dvs. Pentru a face asta, vom pune scriptul în coada în WordPress.

După aceea, pur și simplu copiați și lipiți acest cod în fișierul functions.php al temei. Nu vă recomandăm editarea directă a fișierelor teme, deoarece cea mai mică greșeală vă poate distruge site-ul. În schimb, puteți utiliza un plugin precum WPCode și puteți urma tutorialul nostru despre cum să adăugați fragmente de cod personalizate în WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

În codul de mai sus, i-am spus WordPress să ne încarce scriptul și, de asemenea, să încarce biblioteca jQuery, deoarece pluginul nostru depinde de acesta.

Acum că am adăugat partea jQuery, să adăugăm un link real către site-ul nostru WordPress, care duce utilizatorii înapoi în partea de sus. Pur și simplu lipiți acest HTML oriunde în fișierul footer.php al temei. Dacă aveți nevoie de ajutor, vă rugăm să consultați tutorialul nostru despre cum să adăugați codul de antet și subsol în WordPress.

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

Poate ați observat că codul HTML include un link, dar nu un text de ancorare. Asta pentru că vom folosi o pictogramă imagine cu o săgeată în sus pentru a afișa un buton de sus.

În acest exemplu, folosim o pictogramă de 40x40px. Pur și simplu adăugați CSS personalizat de mai jos la foaia de stil 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 și o mică animație CSS, care rotește butonul atunci când un utilizator trece 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 de mai sus, asigurați-vă că înlocuiți https://www.example.com/wp-content/uploads/2013/07/top_icon.png cu adresa URL a imaginii pe care doriți să o utilizați. Puteți să vă încărcați propria pictogramă de imagine utilizând aplicatorul de încărcare media WordPress, să copiați adresa URL a imaginii și apoi să o inserați în cod.

Sperăm că acest articol v-a ajutat să adăugați o derulare fluidă la un efect de top pe site-ul dvs. folosind jQuery. De asemenea, poate doriți să vedeți selecția noastră de experți a celor mai bune pluginuri WordPress pentru afaceri mici și ghidul nostru pas cu pas despre cum să deschideți un magazin online.

Dacă ți-a plăcut acest articol, atunci abonează-te la canalul nostru YouTube pentru tutoriale video WordPress. Ne puteți găsi și pe Twitter și Facebook.