Cum sa adaugi un preloader in WordPress

Despre preloader 

Un preloader este o animatie de preincarcare a site-ului. Practic, acesta indica progresul de incarcare a unei pagini web. Incarcarea paginii respective se face in fundalul preloader-ului. Preloader-ul poate ajuta la experienta de utilizare a site-ului crescand timpul petrecut pe site.

In mod normal cand vizitezi un site, browser-ul tau incepe sa descarce diferite elemente ale site-ului. Unele parti se incarca mai rapid cum ar fi codul CSS si HTML, altele mai greu cum ar fi imaginile si filmuletele. Pentru a afisa site-ul corect din prima, multi proprietarii de site-uri pun pe acesta preloader astfel incat la finalizarea incarcarii integrale a site-ului preloaderul dispare.

In timpul acestor descarcari partiale ale site-ului, viteza sa de incarcare pare una mica. De aceea, multi vizitatori considera site-ul ca fiind unul stricat. Adaugarea acestei animatii ofera ideea ca site-ul se incarca si nu ca ar fi stricat.

De obicei, poti sa vezi un preloader atunci cand apesi in editorul Gutenberg butonul de previzualizare a unui articol pe care il creezi sau editezi.

Adaugarea unui preloader

O astfel de animatie poate fi adaugata pe site folosind un plugin. Practic nu trebuie sa faci nici o modificare la cod sau la tema. Noi recomandam pluginul  WP Smart Preloader. Acesta este gratuit si se instaleaza si activeaza ca si orice alt plugin. 

Odata instalat, du-te la Setari si ai sectiunea speciala a pluginului acolo. Poti alege stilul ani

matiei. Ai la dispozitie sase stiluri diferite. Poti chiar sa scrii propriul tau cod HTML si CSS pentru a crea un stil propriu personalizat.

Poti sa afisezi animatia sa apara doar pe prima pagina sau pe toate. Daca vrei sa apara doar pe prima pagina bifeaza casuta Show only on Home Page. 

Mai jos ai optiunile pentru durata animatiei. Cat de mult timp vrei sa apara? Nu este o idee buna sa pui prea multe secunde. Noi recomandam 900 milisecunde, dar tine cont si cat de repede se incarca integral site-ul tau. Poti sa alegi si timpul pentru animatia propriu zisa. 

La final nu uita sa salvezi modificarile facute.

Ce trebuie sa mai stii despre WP Smart Preloader este ca desi e un plugin relativ nou, acesta functioneaza pe cele mai noi versiuni de WordPress. Pluginul este compatibil cu toate browserele si este si responsive in totalitate.

O alta varianta prin care putem adauga preloader este prin pluginul cu acelasi nume. Aceasta metoda este una mai flexibila, dar necesita pasi in plus de implementare. Odata ce ai instalat si activat pluginul, trebuie sa mergi la plugins si la Preloader. Aici ai setarile sale. 

Printre setari gasesti atat culoarea pentru fundal, imaginea, latimea, inaltimea, pe ce pagini sa apara preloaderul cum ar fi tot site-ul, prima pagina, in articole, in pagini, in arhive si asa mai departe.

La sfarsit trebuie sa adaugi urmatorul cod in fisierul header.php a temei.

<div id="wptime-plugin-preloader"></div>

Salveaza modificarile facute.

Iti recomandam sa ai o tema copil si sa nu adaugi codul de mai sus direct in tema ta pentru ca la o actualizare codul va fi sters. O alta metoda de a implementa codul de mai sus este sa folosesti un plugin de adaugare a codurilor cum ar fi WP Coder.

Poti adauga un alt cod in fisierul functions.php al temei tale pentru a afisa preloaderul. Nu reomandam adaugarea acestui cod doar daca tema este compatibila cu  functia wp_body_open () adaugata in WordPress 5.2.

function wpb_add_preloader() {

echo '<div id="wptime-plugin-preloader"></div>';

}

add_action( 'wp_body_open', 'wpb_add_preloader' );

Alte preloadere

Preloader by Alobaidi este un plugin gratuit usor de integrat care se potriveste de minune cu personalizarile proprii si cu diverse browsere. Ai zece optiuni pentru afisare.

PageLoader: Loading Screen and Progress Bar Pro este un plugin cu plata puternic care are foarte multe optiuni. Acesta te ajuta sa iti creezi propriul tau preloader. Poti fie sa adaugi o imagine, o iconita, text, fundal, indicator sau o bara de progress. In plus are si o functie unica de timeout daca incarcarea dureaza prea mult.

Ultimate WordPress Preloader are nu doar un nume special ci si caracteristici speciale. Pluginul este gratuit si are 53 de animatii. Poti alege ce culori vrei si functioenaza cu orice tema. Este responsive si are suport pentru retina.

LoftLoader Pro este un plugin a carui design il poti personaliza rapid. Acesta nu este gratuit dar te lasa sa adaugi imagini personalizate, tranzitii, animatii, bari de progres si mesaje aleatorii.

Trebuie sa stii ca mai exista si teme care au functia de preloader deja integrata. 

Nu doar ca preloaderele arata bine, dar au si o functie necesara pentru site-ul tau care ajuta la experienta utilizatorului.