Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere una barra di avanzamento della lettura nelle pubblicazioni di WordPress (2 modi semplici)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

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.

How to Add a Reading Progress Bar in WordPress Posts

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.

Nota: Si desidera invece aggiungere una barra di avanzamento generica? Si consiglia di utilizzare SeedProd e il suo blocco di barre di avanzamento integrato.

Per ulteriori informazioni su come utilizzare SeedProd, consultate la nostra guida su come creare un tema personalizzato per WordPress.

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.

Install Thrive Product Manager

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.

Log into your Thrive Themes account

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.

Installing Thrive Architect

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”.

Installing the Thrive Theme Builder

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”.

Activating Thrive Architect and Thrive Theme Builder

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.

Choosing a Thrive Theme Builder theme

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”.

Editing a Thrive Theme's single post template

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.

Adding a reading progress indicator with Thrive Theme Builder

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.

Changing the reading progress bar location in Thrive Theme Builder

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.

Changing the reading progress bar's color with Thrive Theme Builder

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”.

Changing the reading progress bar's opacity with Thrive Theme Builder

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.

Changing the height of the reading progress bar with Thrive Theme Builder

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”.

Editing the header section with Thrive Theme Builder

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”.

Editing the default header with Thrive Theme Builder

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.

Making the header sticky with Thrive Theme Builder

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.

Selecting the post meta in Thrive Theme Builder

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”.

Adding a dynamic reading time indicator in Thrive Theme Builder

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”.

Editing the reading time indicator in Thrive Theme Builder

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.

Previewing a website on Thrive Theme Builder

Sentitevi liberi di apportare tutte le modifiche necessarie.

Ecco come appare la nostra barra di avanzamento della lettura:

Reading progress bar made with Thrive Theme Builder

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.

Editing the Catch Scroll Progress Bar settings

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.

Saving the Catch Scroll Progress Bar plugin settings

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.

Reading progress bar made with Catch Scroll Progress Bar

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:

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

15 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    For websites where the articles are longer than, for example, 1000 words, this is really useful so that the user knows what part of the content he is already in and how much is left. I assume that it can also very well reduce the bounce rate and it helps to “force” people to read the article to the end.

  3. Vikash Pareek says

    How to Add a Reading Progress Bar in WordPress Posts without plugin, Because more plugins affect page speed, plugins cannot be installed for every task.

  4. Durga Thiyagarajan says

    I was looking for this one ! Thank you so much and it worked out. Will this affect the page speed?

  5. AmiF says

    Hi, thanks for sharing this awesome plugin, in the horizontal way, how to make it fill starting from right to the left? Which part should I change to make it “rtl”? Please someone help me…

  6. Jonathan Nabais says

    Hello there,

    It works on my site but it’s invisible because it’s under the background.
    How make it visible on the page and not under the page ?

  7. K T Bowes says

    Works on my pages but not on my blog posts – which is where I really wanted it. Looks good on my pages though.

  8. Tony Abbott says

    I followed every step but my posts do not display the progress bar. Also the article states that this plugin does not support pages but the plugin screen does offer you the option to use the plugin on posts and pages.

    I received this tutorial by email from yourselves on 6/9//16 so I am assuming you should have checked the validity of the article before you sent it out.

  9. Tim Coe says

    Didn’t work for me. The enable box has been replaced by posts and pages boxces but after trying it 3 times I’m giving up.

  10. Marcus says

    This is pretty neat. I have a site that primarily works through a Custom Post Type, so I’ll look for another resource for that as many of my articles are long-for reading!

    Thanks for sharing!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.