Su un sito sviluppato sul CMS WordPress è possibile caricare un’infinità di contenuti, operazione ovviamente legata allo spazio su disco disponibile. Su siti più pesanti però le pagine potrebbero impiegare più tempo per il caricamento e, per evitare che gli utenti se ne vadano, è possibile aggiungere una semplice animazione per “allietare” l’attesa.
Una possibile soluzione è il plugin Preloader Plus, uno strumento che consente di scegliere tra vari loghi ed animazioni. Per scaricarlo, basterà seguire il consueto percorso Plugin -> Aggiungi Nuovo e cercare Preloader Plus.
Il primo risultato sarà quello mostrato nell’immagine:
Una volta fatto clic su Installa adesso e, successivamente, su Attiva, basterà entrare nell’interfaccia di personalizzazione di WordPress e fare clic su Preloader Plus nel menu a sinistra.
Settings
A questa voce dovrà essere indicato se abilitare il caricamento animato e su quali pagine. Inoltre, verrà scelto il posizionamento e la visibilità dei vari elementi. In questo caso, l’icona animata e la barra di caricamento. L’ultimo passo sarà quello della scelta dei colori di sfondo e di testo.
Typography
Questa sezione del menu serve a decidere le dimensioni del testo presente nel preloader, elemento utile se si decide di mostrare anche il nome del blog e la percentuale di caricamento durante l’animazione.
Icon/Image
La prima parte di questa sezione è quella in cui si possono scegliere le icone animate e la loro dimensione. Nella seconda parte, invece, è possibile selezionare ed impostare un’immagine a propria scelta, che può essere statica o in formato .gif. Una volta scelta l’immagine, è necessario renderla visibile nel menu Settings nascondendo l’icona. L’ultimo passo, in questo caso, sarà deciderne dimensioni e posizione nella pagina.
Progress Bar
Se si desidera mostrare una barra di caricamento dinamica, questa sezione consente di impostarne la posizione (alto/basso/centrale), l’altezza, la larghezza e la distanza dall’alto o dal basso. In ultimo, possono essere decisi anche i colori.
Animations
La prima parte di questa sezione consente di decidere il tempo dopo cui inizia l’animazione e la durata di quest’ultima. Nella seconda parte dovranno invece essere inseriti valori come opacità, direzione, distanza e dimensione raggiunte dall’animazione alla sua chiusura.
L’ultima parte di Animations, infine, chiede se abilitare l’animazione anche per il contenuto interno del sito dopo il caricamento.
Esempio: se si volesse animare il paragrafo contenuto al link basterebbe inserire #content nel primo campo e, successivamente la direzione, distanza e dimensione del testo al termine del caricamento. Così facendo, la pagina che apparirà dopo il preloader sarà come de-zoomata dinamicamente.
Dopo aver terminato tutte le modifiche, basterà fare clic su Pubblica per avere il preloader sulle pagine selezionate.
Alla voce Preloader Plus presente nel menu interno del backend WordPress sono presenti molte videoguide e tutorial per l’utilizzo del plugin.
