Come aggiungere una barra di avanzamento della lettura nei post di WordPress (3 modi semplici)

L’aggiunta di una barra di avanzamento della lettura alle pubblicazioni di WordPress è un ottimo modo per migliorare l’esperienza dei lettori.

I blog lunghi possono a volte intimidire, e una barra di avanzamento offre uno spunto visivo che mostra ai lettori esattamente quanto sono arrivati e quanto manca.

Noi di WPBeginner abbiamo scritto oltre 3000 blog, quindi sappiamo quanto importi mantenere i lettori impegnati. Ecco perché siamo qui a condividere i nostri consigli in alto per migliorare il vostro blog.

In questo articolo vi mostreremo come aggiungere facilmente una barra di avanzamento della lettura alle vostre pubblicazioni su WordPress.

Quando aggiungere una barra di avanzamento della lettura ai post dei blog WordPress?

Per i blog più lunghi, l’aggiunta di una barra di avanzamento della lettura può essere uno strumento prezioso per far rimanere le persone sul vostro sito web WordPress. Può far sapere ai lettori quanto hanno letto e quanto manca.

I lettori sono più propensi a continuare a scorrere se vedono che si stanno avvicinando alla fine dell’articolo. Una barra di avanzamento può motivarli a terminare la lettura.

Inoltre, la presenza di un contatore di lettura aggiunge un tocco di interattività ai contenuti. Può far sentire la lettura come un viaggio con una destinazione cancellata.

Tuttavia, è importante considerare i contenuti. Una barra di avanzamento potrebbe essere superflua se si scrivono principalmente articoli brevi e scorrevoli. Allo stesso modo, alcuni lettori potrebbero trovarla fonte di distrazione.

Tenendo presente questo, vediamo come aggiungere facilmente una barra di avanzamento della lettura alle vostre pubblicazioni su WordPress. Potete usare i link rapidi qui sotto per passare al metodo che preferite:

Metodo 1: progettare un tema personalizzato con indicatori di avanzamento della lettura

Un modo per aggiungere una barra di avanzamento della lettura nei pubblici post di WordPress è quello di utilizzare un tema builder con una caratteristica di barra di avanzamento. In questo modo, il design della barra di avanzamento si integrerà perfettamente con il resto del tema, rendendolo più gradevole alla vista.

Tenete presente che questo metodo comporta la modifica del tema, quindi non lo consigliamo se siete già soddisfatti del vostro tema e non avete intenzione di cambiarlo a breve. In questo caso, dovreste invece optare per il metodo 2.

Per questo metodo, utilizzeremo il Thrive Theme Builder. Oltre ad avere una barra di avanzamento della lettura, il Thrive Theme Builder ha decine di template per vari scopi, dai blog ai siti web aziendali.

Soprattutto, il builder con trascina e rilascia è facile da usare, il che lo rende ideale per i principianti.

Per saperne di più sulla piattaforma, potete consultare la nostra recensione di Thrive Themes.

Un aspetto negativo di Thrive Themes è che non esiste una versione gratuita. Detto questo, è possibile utilizzare il nostro codice coupon Thrive Themes per ottenere uno sconto fino al 50% sul primo acquisto.

Passo 1: Installare il Thrive Theme Builder

Il primo passo è l’impostazione del Thrive Theme Builder. È possibile accedere a questo plugin accedendo al proprio account sul sito web di Thrive Themes.

Quindi, scaricare e installare il plugin Thrive Product Manager. Per maggiori informazioni, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Una volta attivato il plugin, fare clic su Product Manager nell’area di amministrazione di WordPress.

Quindi, cliccate sul pulsante “Accedi al mio account” per collegare il vostro sito web WordPress con il vostro account Thrive Themes.

Dopo di che, si dovrebbe vedere un elenco di tutti i prodotti Thrive Themes disponibili all’interno del proprio account.

Qui, selezionare“Thrive Architect” e spuntare la casella “Installa prodotto”.

Questo plugin per la creazione di pagine funziona insieme al builder del tema, quindi è necessario attivarlo.

Quindi, scorrere giù fino alla sezione “Thrive Theme Builder” e spuntare la casella “Install Theme”.

A questo punto, è sufficiente fare clic su “Installa i prodotti selezionati”.

Nella pagina successiva, si vedrà che Thrive Product Manager sta installando e attivando Thrive Theme Builder.

Una volta terminato il processo, fare clic su “Vai alla Bacheca del costruttore di temi”.

Ora scegliete un tema per WordPress.

Se non siete sicuri di quale scegliere, fate clic sul pulsante “Anteprima” per vedere l’aspetto del tema. Poi, fate clic su “Scegli” una volta presa la vostra decisione.

A questo punto si dovrebbe arrivare alla procedura guidata per la creazione del tema.

Questa configurazione guidata vi guiderà attraverso l’uploader del vostro logo, la scelta dei colori del brand da aggiungere al tema e l’impostazione delle diverse strutture e template del vostro tema.

Prima di passare alla fase successiva, completare la configurazione guidata.

Fase 2: Aggiungere una barra di avanzamento della lettura al template per la pubblicazione di un singolo post

Con il tema impostato, aggiungiamo ora una barra di avanzamento della lettura al template del tema. Poiché vogliamo visualizzare la barra di lettura solo nei post di WordPress, basterà modificare il template della singola pubblicazione.

Per farlo, passare alla scheda “Templates” nel Thrive Theme Builder. Quindi, trovare il template “Post predefinito” e fare clic su “Modifica”.

A questo punto si dovrebbe essere all’interno del builder del tema. Dovrebbe essere presente una barra laterale sinistra per la modifica del template, un’anteprima del template stesso e una piccola barra degli strumenti sul lato destro per aggiungere altri blocchi o modificare lo stile del template.

Per aggiungere il contatore di lettura, scorrere la barra laterale sinistra e trovare l’impostazione “Indicatore di avanzamento della lettura”. È sufficiente fare clic sulla levetta per attivarlo.

Ora dovrebbero essere disponibili altre impostazioni per modificare l’indicatore della posizione di lettura.

Innanzitutto, si può scegliere se aggiungere la barra di avanzamento sotto l’intestazione o in alto nel viewport (proprio sopra l’header). Se si sceglie la prima opzione, occorre assicurarsi che l’header sia impostato in evidenza, cosa che verrà mostrata più avanti.

Successivamente, è possibile modificare il colore della barra di avanzamento. Per farlo, è sufficiente fare clic sul selettore colore.

A questo punto, è possibile scegliere uno dei colori del tema, ovvero la combinazione di colori predefinita del tema. Oppure si può fare clic su “Scollegamento dal colore del tema” per scegliere un colore completamente diverso che non fa parte del tema.

Se si sceglie l’opzione “Scollega dal colore del tema”, si può anche regolare l’opacità del colore.

In questo modo, è possibile regolare l’opacità della barra di avanzamento rispetto allo sfondo. Detto questo, è meglio che il colore della barra di avanzamento non sia così vibrante da distrarre gli utenti dalla lettura.

Quando si è soddisfatti del colore, fare clic su “Applica”.

Infine, è possibile regolare l’altezza della barra di avanzamento.

Il builder del tema consente di ridimensionare la barra fino a 10 sgranature. Questo garantisce che la barra di avanzamento non appaia troppo grande. Per questo motivo, si consiglia di scegliere una dimensione compresa tra 5 e 10, in modo che la barra di avanzamento sia ben visibile.

Quando si è soddisfatti dell’aspetto della barra, basta fare clic su “Salva lavoro” per mantenere le modifiche.

Fase 3: rendere l’header fisso (facoltativo)

Se si sceglie di visualizzare la barra di avanzamento della lettura sotto l’header, è necessario seguire questo passaggio. Altrimenti, si può saltare.

Per prima cosa, scorrere la barra laterale sinistra e fare clic su “Header”.

A questo punto, sulla barra laterale dovrebbe comparire un’altra serie di impostazioni per personalizzare l’header.

Scorrete giù fino alla sezione Header e fate clic su “Modifica”.

Aprire ora la scheda Comportamento di scorrimento.

Quindi, è necessario selezionare “In evidenza”. A seconda del tema, potrebbe essere necessario modificare la distanza dall’alto della schermata a 1 px, in modo da far apparire la barra di avanzamento.

È possibile lasciare invariate le altre impostazioni e fare clic su “Fatto” in basso.

Passo 4: Aggiungere un indicatore del tempo di lettura (facoltativo)

Un’altra cosa che si può fare con Thrive Theme Builder è mostrare il tempo di lettura stimato per leggere una pubblicazione dall’inizio alla fine. Questo aiuta gli utenti a capire quanto tempo ci vorrà per leggere un articolo, consentendo loro di scegliere i contenuti che si adattano al tempo a loro disposizione.

Per prima cosa, cliccate sul blocco responsabile della visualizzazione dei meta dati della vostra pubblicazione.

È la parte del template del singolo post che visualizza informazioni come l’autore del blog, le categorie, i tag e così via.

Quindi, fare clic sull’icona“Testo dinamico” nella barra degli strumenti.

Qui è necessario selezionare “Contenuto” nel primo menu a discesa e “Tempo di lettura rimanente (in minuti)” nel secondo.

Quindi, fare clic su “Inserisci”.

Ora si dovrebbe vedere un nuovo testo che dice “0 minuti rimanenti” nella meta della pubblicazione. È possibile modificare questo testo a proprio piacimento.

Nel nostro caso, abbiamo deciso di eliminare la parola “rimanente”.

Al termine, non dimenticate di fare clic su “Salva lavoro”.

Fase 5: vedere l’anteprima degli indicatori di progresso della lettura

Dopo aver configurato le impostazioni della barra di avanzamento, potete visitare la vostra pubblicazione sul blog per vedere la barra in azione.

Se volete fare un’anteprima invece di vedere la barra dal vivo sul vostro sito, potete fare clic sul pulsante ‘Anteprima’ in basso. Thrive Theme Builder consente di vedere l’anteprima del sito web su desktop, tablet e cellulari.

Sentitevi liberi di apportare tutte le modifiche necessarie.

Ecco come appare la nostra barra di avanzamento della lettura:

Metodo 2: aggiungere una barra di avanzamento della lettura con un plugin gratuito

Se volete aggiungere gratuitamente una semplice barra di avanzamento della lettura alle vostre pubblicazioni su WordPress, potete utilizzare il plugin Catch Scroll Progress Bar.

Questo plugin per la barra di avanzamento della lettura mostrerà automaticamente un contatore di lettura sulle pagine e sulle pubblicazioni e potrà essere facilmente personalizzato in base alle proprie preferenze.

Innanzitutto, installare il plugin nell’area di amministrazione di WordPress. Per saperne di più, leggete la nostra guida per principianti su come installare un plugin di WordPress.

Una volta fatto ciò, andare su Catch Scroll Progress Bar nella dashboard di WordPress. Ora vedrete alcune impostazioni della barra di avanzamento da impostare.

Con questo plugin è possibile modificare la posizione della barra di avanzamento da in alto a in basso. Detto questo, è possibile lasciarla così com’è se si preferisce la normale posizione in alto.

Un altro elemento che è possibile personalizzare è il colore di sfondo e il colore di primo piano.

Il colore di sfondo si riferisce al colore predefinito della barra di avanzamento quando il lettore non scorre la pagina. Il colore di primo piano, invece, è il colore che apparirà quando il lettore scorrerà la pagina.

Il prossimo punto è l’opacità, che controlla la trasparenza dei colori di sfondo e di primo piano. L’intervallo è compreso tra 0 e 1, dove 1 è opaco e 0 è trasparente o invisibile.

È gratuito giocare con i numeri fino a trovare il livello di opacità desiderato.

Quindi, è possibile regolare l’altezza e il raggio del bordo della barra di avanzamento.

Per quanto riguarda l’altezza, abbiamo riscontrato che il numero migliore è compreso tra 1 e 8, ma non superiore. Altrimenti, la barra di avanzamento potrebbe sembrare troppo grande.

Il raggio del bordo controlla l’arrotondamento degli angoli della barra di avanzamento. Se non vi piace l’aspetto, potete inserire “0”.

Ora, questo plugin consente anche di decidere in quali template visualizzare la barra di avanzamento: sulla homepage, sulla pagina del blog, sugli archivi e sulle categorie, e/o su singole pubblicazioni o pagine.

In genere, è sufficiente add-on una barra di avanzamento della lettura sui post del blog WordPress. In questo caso, abbiamo scelto solo “Pagina singola/post” nell’impostazione “Seleziona la condizione del template per la barra di avanzamento”.

Abbiamo selezionato anche l’opzione “Post” in “Seleziona il tipo di post a cui applicare la barra di avanzamento”, perché vogliamo che la barra appaia solo nei post del blog.

Detto questo, sentitevi liberi di verificare le condizioni più adatte al vostro sito web.

Una volta soddisfatti delle impostazioni della barra di avanzamento, fare clic su “Salva modifiche”.

Ora, se si vede l’anteprima del blog su cellulare o desktop, si dovrebbe vedere una barra di avanzamento.

Metodo 3: Aggiungere una barra di avanzamento della lettura con il codice

Potete anche utilizzare un codice personalizzato per aggiungere una barra di avanzamento della lettura al vostro sito WordPress.

Spesso i tutorial chiedono di aggiungere il codice direttamente al file functions.php del tema. Ma non vi consigliamo di farlo, perché il più piccolo errore può distruggere il vostro sito.

Si consiglia invece di utilizzare il plugin WPCode. È il modo più semplice e sicuro per aggiungere codice personalizzato in WordPress senza dover modificare i file principali di WordPress.

Inoltre, non è necessario avere familiarità con la codifica per usarlo, perché viene fornito con una libreria di snippet di codice già pronti che si possono aggiungere al sito in un paio di clic, compreso uno per una barra di avanzamento della lettura.

Per iniziare, è necessario installare e attivare il plugin gratuito WPCode. Se avete bisogno di aiuto, consultate il nostro tutorial su come installare un plugin di WordPress.

Una volta attivato il plugin, andare su Code Snippets ” Library dalla dashboard di WordPress.

Da qui, cercare “Scroll Progress Bar” nella libreria, passarci sopra il mouse e fare clic sul pulsante “Use snippet”.

WPCode aggiungerà automaticamente il codice e selezionerà il metodo di inserimento corretto.

A questo punto, è sufficiente spostare l’interruttore da Inattivo ad Attivo. Quindi, fare clic sul pulsante “Aggiorna”.

Ora è possibile visualizzare un post del blog sul proprio sito web e apparirà una semplice barra di avanzamento.

Suggerimenti bonus per mantenere i lettori del vostro blog WordPress impegnati

Volete trasformare i visitatori occasionali in lettori fedeli? Siamo alla sua copertina!

Verificate questi tutorial di WordPress ricchi di suggerimenti per tenere il vostro pubblico ad hook:

• Date uno stile diverso a ciascuna pubblicazione di WordPress per rendere i vostri contenuti visivamente coinvolgenti.
• Create divisori personalizzati per spezzare il testo e guidare i lettori attraverso i contenuti.
• Aggiungete le emoji per esprimere la vostra personalità e dare un tocco di divertimento al vostro blog.
• Mettete in evidenza le nuove pubblicazioni per i visitatori che ritornano e fate in modo che continuino a visitarle.
• Evidenziate il testo delle vostre pubblicazioni su WordPress e sottolineate i punti chiave per i vostri lettori.
• Aggiungete note a piè di pagina semplici ed eleganti ai vostri blog per mostrare la vostra ricerca.
• Stupite i vostri visitatori mostrando testimonianze a rotazione sul vostro sito WordPress.
• Aggiungete un ridimensionatore di font al vostro sito WordPress per garantire che i vostri contenuti siano accessibili a tutti.

Speriamo che questo articolo vi abbia aiutato ad aggiungere una barra di avanzamento della lettura in WordPress. Potreste anche voler consultare la nostra guida completa su come modificare un sito web in WordPress e le nostre scelte di esperti sulle migliori alternative a Canva per la grafica dei siti web.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.