Cum să adăugați o animație de încărcare a paginii (Preloader) în WordPress

Viteza paginii joacă un rol esențial în performanța site-ului dvs. Dacă durează mai mult de o secundă sau două pentru ca o pagină să se încarce complet, acest lucru poate frustra suficient de mult utilizatorii pentru a-i determina să părăsească site-ul dvs. Cu toate acestea, poate ajuta dacă vizitatorul are ceva captivant la care să se uite în timp ce pagina se termină de încărcat.

O animație de încărcare a paginii sau „animație de preîncărcare” ajută la informarea vizitatorilor că o pagină se încarcă (nu este blocată) și crește probabilitatea ca aceștia să rămână pe site. În acest fel, poate îmbunătăți experiența utilizatorului (UX) și poate reduce ratele de respingere.

În această postare, vom explica beneficiile animațiilor de preîncărcare și când să folosiți una. Apoi vă vom prezenta opțiunile pentru adăugarea unei animații de încărcare a paginii WordPress. Să începem!

Ce este o animație de preîncărcare?

O animație de preîncărcare semnalează utilizatorilor că o pagină se încarcă activ. Este o animație simplă care poate fi folosită ca indicator de progres pentru paginile care încarcă doar anumite părți de conținut la un moment dat.

Preîncărcările WordPress oferă vizitatorilor ceva mai plăcut și mai interesant de văzut în câteva secunde în timp ce așteaptă ca întreaga pagină să se termine de încărcat. În unele cazuri, acestea pot oferi chiar și o estimare a timpului rămas.

Când ar trebui să folosesc un preîncărcare?

Un preîncărcare este o alegere inteligentă atunci când aveți un site WordPress cu conținut video sau imagine, care durează puțin mai mult decât în ​​mod normal. În acest fel, vizitatorii vor fi asigurați că site-ul dvs. funcționează conform intenției și nu este deteriorat.

Cu toate acestea, dacă site-ul dvs. este în mare parte bazat pe text, este posibil să nu fie necesară o animație de preîncărcare. În schimb, ar fi mai logic să vă concentrați pe îmbunătățirea vitezei paginii.

2 opțiuni pentru adăugarea unei animații de încărcare a paginii la WordPress

Există două metode principale pe care le puteți folosi pentru a adăuga o animație de preîncărcare WordPress pe site-ul dvs. Puteți utiliza un plugin, care este opțiunea mai ușoară, sau puteți efectua sarcina manual. Să aruncăm o privire la cum să începem cu ambele metode.

Opțiunea 1: Adăugați o animație de preîncărcare utilizând un plugin

Adăugarea unei animații de preîncărcare printr-un plugin este opțiunea mai rapidă și mai ușoară pentru majoritatea utilizatorilor. Există câteva pluginuri pe care le puteți folosi, dar vă recomandăm WP Smart Preloader:

Acesta este un plugin gratuit, foarte personalizabil. Folosește CSS și markup HTML minim pentru a ajuta la reducerea riscului ca utilizatorii să părăsească site-ul dvs. pe măsură ce se încarcă conținut. În următorii pași, vă vom arăta cum funcționează.

Pasul 1: Descărcați WP Smart Preloader

Puteți descărca pluginul WP Smart Preloader prin directorul de pluginuri WordPress. Apoi, puteți încărca fișierul .zip pe site-ul dvs. WordPress, mergând la Plugin-uri > Adăugare nou > Încărcare plugin în tabloul de bord administrativ:

O altă opțiune este să căutați pluginul prin bara de căutare din ecranul Plugin> Adăugare nou :

Oricum, odată ce pluginul este instalat, faceți clic pe butonul Activare . Apoi, puteți găsi opțiunile acestuia în Setări > WP Smart Preloader .

Pasul 2: Selectați stilul dvs

Pe pagina Setări WP Smart Preloader, primul lucru de făcut este să selectați un stil pentru preîncărcător. În secțiunea Select Preloader , va exista un meniu drop-down care vă va permite să alegeți dintre șase opțiuni de stil, precum și o opțiune pentru animație personalizată:

După ce selectați un stil, îl puteți previzualiza în fereastra de mai jos. Dacă doriți să adăugați propria animație personalizată, puteți include codul HTML în secțiunea Animație personalizată :

La sfârșitul acestui ecran, puteți seta durata încărcării în sine și efectul de „fade out”:

Dacă lăsați aceste câmpuri necompletate, valorile implicite vor fi setate la 1500 de milisecunde (1,5 secunde) și, respectiv, 2500 de milisecunde (2,5 secunde). Când ați terminat, faceți clic pe butonul Salvare modificări .

Pasul 3: previzualizați animația dvs. de preîncărcare

După ce ați terminat de configurat setările, vizitați site-ul dvs. WordPress într-o filă nouă de browser pentru a previzualiza animația de preîncărcare. Puteți reveni pentru a face orice modificări stilistice, după cum este necesar. Odată ce sunteți mulțumit de preîncărcătorul, acesta va fi configurat și gata de funcționare.

Opțiunea 2: Adăugați manual o animație de preîncărcare

Dacă nu sunteți interesat să utilizați un plugin, puteți adăuga în continuare această funcție pe site-ul dvs. manual. Principalul avantaj al creării unui preîncărcare personalizat este că aveți mai multă flexibilitate în modul în care este proiectat.

Desigur, este și un proces mai dificil. În continuare, vă vom prezenta cum să creați, să încărcați și să formatați o animație personalizată de preîncărcare pentru site-ul dvs. WordPress.

Pasul 1: Găsește-ți animația

Primul pas este să decideți ce fel de animație veți folosi. Puteți căuta alte instrumente de animație de preîncărcare pentru a vă face o idee despre stilul care vă place. Există câteva animații gratuite pe care le puteți folosi și explora pe Codepen, ceea ce poate fi o modalitate excelentă de a obține câteva idei.

Pasul 2: Dezvoltați sau descărcați animația

Pentru a vă dezvolta animația, puteți utiliza un instrument precum Photoshop pentru a crea un GIF sau o animație de preîncărcare rotativă. De asemenea, puteți consulta resursa noastră despre crearea animațiilor WordPress folosind CSS.

Vă recomandăm a doua abordare, deoarece adăugarea unui preîncărcare GIF pe site-ul dvs. WordPress se face cel mai bine cu un plugin. Pe lângă Codepen (menționat mai sus), puteți descărca și o animație de pe site-uri precum Spinkit și LoadLab.

Pentru acest tutorial, vom folosi o animație de preîncărcare de la Spinkit. Indiferent de unde obțineți animația, veți avea nevoie de codul sursă CSS pentru ao adăuga manual pe site-ul dvs. WordPress:

Majoritatea animațiilor gratuite de preîncărcare vor include un link sursă, unde puteți găsi atât HTML, cât și CSS:

Rețineți că puteți utiliza și codul sursă CSS dintr-o animație de preîncărcare, apoi îl puteți personaliza după bunul plac.

Pasul 3: Creați o temă pentru copii

Odată ce aveți animația, o puteți adăuga pe site-ul dvs. WordPress. Cel mai sigur mod de a face acest lucru este să configurați o temă pentru copii. Dacă nu sunteți sigur cum să faceți asta, puteți consulta tutorialul nostru despre cum să creați o temă copil WordPress.

Pasul 4: Adăugați cod HTML în fișierul header.php al temei dvs

Următorul pas este să localizați fișierul header.php pentru tema dvs. WordPress. Puteți face acest lucru prin ecranul Editor de teme WordPress:

De asemenea, puteți edita fișierele folosind un client FTP, cum ar fi FileZilla. Fișierul va fi localizat în folderul wp-content > teme din directorul rădăcină al site-ului dvs.

După ce localizați și deschideți fișierul, introduceți următorul cod HTML sub eticheta body:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Ajustați sau adăugați orice cod HTML este necesar pentru animația dvs. de preîncărcare WordPress și salvați fișierul.

Pasul 5: Adăugați codul CSS în foaia dvs. de stil

Acum este timpul să adăugați CSS pentru a vă stila animația. Găsiți foaia de stil CSS ( style.css ) pentru tema dvs. WordPress, apoi copiați și inserați codul sursă CSS pentru animație. În cazul nostru, vom adăuga următoarele:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Înainte de a salva modificările, eliminați această parte: „margin: 100px auto;”. În locul său, copiați și lipiți următoarele:

 position: absolute; top: 48%; left: 48%;

Apoi puteți salva fișierul.

Pasul 6: Adăugați cod jQuey pentru a face animația să funcționeze

Pentru ca animația de preîncărcare a spinnerului să funcționeze, va trebui să adăugați puțin jQuery. Pentru a face acest lucru, puteți naviga înapoi la fișierul header.php și introduceți următoarele înainte de eticheta body de închidere:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Apoi salvați fișierul și previzualizați site-ul pentru a vă asigura că animația de preîncărcare WordPress funcționează conform intenției.

Găsiți mai multe sfaturi și ghiduri de la WP Engine

Adăugarea de animații de preîncărcare WordPress pe site-ul dvs. poate ajuta la atragerea vizitatorilor și la reducerea ratelor de respingere. În plus, aveți mai multe opțiuni pentru a face treaba rapid.

La WP Engine, misiunea noastră este să oferim sfaturi, trucuri și resurse pentru dezvoltatori, pentru a vă ajuta să vă asigurați că site-ul dvs. web arată întotdeauna cel mai bine. Află mai multe despre planurile noastre astăzi!