Come aggiungere un'animazione di caricamento della pagina (preloader) in WordPress

La velocità della pagina gioca un ruolo fondamentale nelle prestazioni del tuo sito web. Se il caricamento completo di una pagina richiede più di uno o due secondi, ciò può frustrare gli utenti a tal punto da indurli a lasciare il tuo sito. Tuttavia, può essere utile se il visitatore ha qualcosa di interessante da guardare mentre la pagina finisce di caricarsi.

Un'animazione di caricamento della pagina, o "animazione di precaricamento", aiuta a informare i visitatori che una pagina si sta caricando (non è bloccata) e aumenta la probabilità che rimangano sul sito. In questo modo, può migliorare la User Experience (UX) e ridurre le frequenze di rimbalzo.

In questo post, spiegheremo i vantaggi delle animazioni del preloader e quando usarne una. Quindi ti guideremo attraverso le tue opzioni per aggiungere un'animazione di caricamento della pagina di WordPress. Iniziamo!

Che cos'è un'animazione di preloader?

Un'animazione del preloader segnala agli utenti che una pagina si sta caricando attivamente. È una semplice animazione che può essere utilizzata come indicatore di avanzamento per le pagine che caricano solo determinati contenuti alla volta.

I preloader di WordPress offrono ai visitatori qualcosa di più divertente e interessante da guardare nei secondi mentre aspettano che l'intera pagina finisca di caricarsi. In alcuni casi, possono persino offrire una stima di quanto tempo è rimasto.

Quando dovrei usare un preloader?

Un preloader è una scelta intelligente quando si dispone di un sito WordPress ricco di video o immagini che impiega un po' più tempo a caricarsi rispetto al normale. In questo modo, i visitatori saranno rassicurati sul fatto che il tuo sito funziona come previsto e non è danneggiato.

Tuttavia, se il tuo sito è principalmente basato su testo, potrebbe non essere necessaria un'animazione di preloader. Invece, avrebbe più senso concentrarsi sul miglioramento della velocità della pagina.

2 opzioni per aggiungere un'animazione di caricamento della pagina a WordPress

Esistono due metodi principali che puoi utilizzare per aggiungere un'animazione del precaricatore di WordPress al tuo sito. Puoi utilizzare un plug-in, che è l'opzione più semplice, o eseguire l'attività manualmente. Diamo un'occhiata a come iniziare con entrambi i metodi.

Opzione 1: aggiungi un'animazione di preloader utilizzando un plug-in

L'aggiunta di un'animazione di preloader tramite un plug-in è l'opzione più rapida e semplice per la maggior parte degli utenti. Ci sono una manciata di plugin che puoi usare, ma ti consigliamo WP Smart Preloader:

Questo è un plugin gratuito e altamente personalizzabile. Utilizza CSS e un markup HTML minimo per ridurre il rischio che gli utenti lascino il tuo sito Web durante il caricamento dei contenuti. Nei seguenti passaggi, ti mostreremo come funziona.

Passaggio 1: scarica WP Smart Preloader

Puoi scaricare il plug-in WP Smart Preloader tramite la directory dei plug-in di WordPress. Quindi puoi caricare il file .zip sul tuo sito WordPress, andando su Plugin> Aggiungi nuovo> Carica plug-in nella dashboard di amministrazione:

Un'altra opzione è cercare il plug-in tramite la barra di ricerca nella schermata Plugin > Aggiungi nuovo :

In entrambi i casi, una volta installato il plug-in, fai clic sul pulsante Attiva . Puoi quindi individuare le sue opzioni in Impostazioni > WP Smart Preloader .

Passaggio 2: seleziona il tuo stile

Nella pagina delle impostazioni di WP Smart Preloader, la prima cosa da fare è selezionare uno stile per il preloader. Nella sezione Seleziona preloader , ci sarà un menu a discesa che ti consentirà di scegliere tra sei opzioni di stile, oltre a un'opzione per l'animazione personalizzata:

Una volta selezionato uno stile, puoi visualizzarlo in anteprima nella finestra sottostante. Se desideri aggiungere la tua animazione personalizzata, puoi includere il tuo codice HTML nella sezione Animazione personalizzata :

Alla fine di questa schermata, puoi impostare la durata del caricatore stesso e l'effetto "dissolvenza":

Se si lasciano vuoti questi campi, i valori predefiniti verranno impostati rispettivamente a 1500 millisecondi (1,5 secondi) e 2500 millisecondi (2,5 secondi). Al termine, fai clic sul pulsante Salva modifiche .

Passaggio 3: visualizza l'anteprima dell'animazione del preloader

Una volta terminata la configurazione delle impostazioni, visita il tuo sito WordPress in una nuova scheda del browser per visualizzare in anteprima l'animazione del preloader. Puoi tornare indietro per apportare eventuali modifiche stilistiche, se necessario. Una volta che sei soddisfatto del preloader, sarà configurato e pronto per l'uso.

Opzione 2: aggiungere manualmente un'animazione del preloader

Se non sei interessato a utilizzare un plug-in, puoi comunque aggiungere manualmente questa funzione al tuo sito. Il vantaggio principale della creazione di un precaricatore personalizzato è che hai una maggiore flessibilità nel modo in cui è progettato.

Naturalmente, è anche un processo più difficile. Successivamente, ti guideremo attraverso come creare, caricare e formattare un'animazione di preloader personalizzata per il tuo sito WordPress.

Passaggio 1: fai un brainstorming sulla tua animazione

Il primo passo è decidere che tipo di animazione utilizzerai. Potresti ricercare altri strumenti di animazione del preloader per avere un'idea dello stile che ti piace. Ci sono alcune animazioni gratuite che puoi usare ed esplorare su Codepen, che possono essere un ottimo modo per avere qualche idea.

Passaggio 2: sviluppa o scarica la tua animazione

Per sviluppare la tua animazione, puoi utilizzare uno strumento come Photoshop per creare una GIF o un'animazione di preloader rotante. Puoi anche fare riferimento alla nostra risorsa sulla creazione di animazioni WordPress utilizzando i CSS.

Raccomandiamo quest'ultimo approccio, poiché l'aggiunta di un preloader GIF al tuo sito WordPress viene eseguita al meglio con un plug-in. Oltre a Codepen (menzionato sopra), puoi anche scaricare un'animazione da siti come Spinkit e LoadLab.

Per questo tutorial, utilizzeremo un'animazione di preloader di Spinkit. Indipendentemente da dove ottieni la tua animazione, avrai bisogno del suo codice sorgente CSS per aggiungerlo manualmente al tuo sito WordPress:

La maggior parte delle animazioni di preloader gratuite includerà un collegamento alla fonte, in cui è possibile trovare sia il codice HTML che il CSS:

Tieni presente che puoi anche utilizzare il codice sorgente CSS da un'animazione di preloader e successivamente personalizzarlo a tuo piacimento.

Passaggio 3: crea un tema figlio

Una volta che hai la tua animazione, puoi aggiungerla al tuo sito WordPress. Il modo più sicuro per farlo è impostare un tema figlio. Se non sei sicuro di come farlo, puoi rivedere il nostro tutorial su come creare un tema figlio di WordPress.

Passaggio 4: aggiungi il codice HTML al file header.php del tuo tema

Il prossimo passo è individuare il file header.php per il tuo tema WordPress. Puoi farlo tramite la schermata dell'editor dei temi di WordPress:

Puoi anche modificare i file utilizzando un client FTP come FileZilla. Il file si troverà nella cartella wp-content > theme nella directory principale del tuo sito.

Una volta individuato e aperto il file, inserisci il seguente codice HTML sotto il tag body:

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

Regola o aggiungi qualsiasi codice HTML sia necessario per la tua particolare animazione del preloader di WordPress e salva il file.

Passaggio 5: aggiungi il codice CSS al tuo foglio di stile

Ora è il momento di aggiungere CSS per modellare la tua animazione. Individua il foglio di stile CSS ( style.css ) per il tuo tema WordPress, quindi copia e incolla il codice sorgente CSS per la tua animazione. Nel nostro caso, aggiungeremo quanto segue:

 .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); } }

Prima di salvare le modifiche, rimuovi questa parte: "margin: 100px auto;". Al suo posto, copia e incolla quanto segue:

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

Quindi puoi salvare il file.

Passaggio 6: aggiungi il codice jQuey per far funzionare l'animazione

Per far funzionare l'animazione del tuo preloader spinner, dovrai aggiungere un po 'di jQuery. Per farlo, puoi tornare al file header.php e inserire quanto segue prima del tag body di chiusura:

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

Quindi salva il tuo file e visualizza l'anteprima del tuo sito per assicurarti che l'animazione del preloader di WordPress funzioni come previsto.

Trova altri suggerimenti e guide da WP Engine

L'aggiunta di animazioni del preloader di WordPress al tuo sito può aiutare a coinvolgere i visitatori e ridurre le frequenze di rimbalzo. Inoltre, hai più opzioni per portare a termine il lavoro rapidamente.

In WP Engine, la nostra missione è fornire suggerimenti, trucchi e risorse per gli sviluppatori, per aiutarti a garantire che il tuo sito web appaia sempre al meglio. Scopri di più sui nostri piani oggi!