Deseja adicionar uma barra de progresso de leitura ao WordPress?

Uma barra de progresso de leitura é uma ótima maneira de melhorar a experiência do usuário do seu site, dando aos leitores um indicador visual do seu progresso através de um artigo.

Se você quiser adicionar um ao seu site, há uma tonelada de grandes plugins gratuitos ou acessíveis que o ajudam a adicionar uma barra de progresso e combinar seu design com o resto do seu site.

Neste artigo, coletamos 8 das melhores opções, 6 das quais são completamente gratuitas.

Abaixo, vamos compartilhar detalhes para cada plugin, juntamente com uma rápida introdução de como as barras de progresso funcionam e porque elas podem ser benéficas para o seu site.

O que é uma barra de progresso de leitura?

Uma barra de progresso de leitura faz exatamente o que o nome diz – ela permite que os visitantes do seu site vejam até onde eles progrediram através do conteúdo do seu artigo.

Normalmente, você colará uma barra horizontal na parte superior ou inferior da página. Conforme os usuários percorrem o artigo, a barra irá “encher” para indicar o quão perto eles estão do final do conteúdo.

Alguns plugins também lhe dão a opção de criar uma barra de progresso vertical à esquerda ou à direita do conteúdo. Nesses casos, parece quase como uma barra de rolagem. Entretanto, a principal diferença é que a barra de progresso será baseada no comprimento do conteúdo real, enquanto a barra de rolagem do navegador é baseada no comprimento total da página.

Aqui estão dois exemplos reais da maneira típica que os sites usam barras de progresso de leitura..

HubSpot adiciona uma barra de progresso laranja que aparece diretamente abaixo do seu Sticky Header:

Um exemplo de barra de progresso de leitura do HubSpot
Um exemplo de barra de progresso de leitura do HubSpot

No entanto, você pode experimentar diferentes colocações de barras de progresso dependendo do seu site.

Os 8 melhores plugins WordPress para a barra de progresso de leitura

Em um nível alto, uma barra de progresso de leitura é uma maneira de melhorar a usabilidade e a experiência do usuário em seu site, o que pode ter efeitos mais diretos em métricas importantes, como tempo na página e taxa de retorno.

Primeiro, vamos falar sobre a experiência do usuário em geral.

A maioria das pessoas quer saber no que estão se metendo antes de investir tempo para se envolver com o seu artigo. É um artigo de 5 minutos que eles podem ler entre as tarefas ou é um longo artigo de 20 minutos que vai exigir algum foco sério?

Uma barra de progresso dá aos leitores uma boa ideia do que esperar do seu artigo enquanto eles começam a ler. Para ajudar com isso, alguns sites também adicionam um tempo estimado de leitura além da barra de progresso, que vários dos plugins abaixo suportam.

Assim que seus visitantes começarem a ler, a barra de progresso também pode encorajá-los a terminar o artigo. Por exemplo, se um leitor vê que já conseguiu passar por 80% do conteúdo, ele será encorajado a terminar os últimos 20% porque já conseguiu passar pela maior parte do artigo.

Essas melhorias na experiência do usuário podem ter efeitos positivos em duas métricas chaves:

  • Tempo de espera – ao encorajar os leitores a terminar um artigo depois de começarem a ler, você pode aumentar o tempo que eles passam na página.
  • Taxa de retorno – ao aumentar o tempo que os visitantes passam em sua página, você aumentará a chance de que um visitante continue a se envolver com seu site (talvez lendo outro artigo), o que pode ajudar a reduzir sua taxa de retorno.

Se você combinar barras de progresso com outras táticas de melhoria da experiência do usuário, como estrutura de navegação de qualidade e uso inteligente de paginação, você pode criar uma experiência realmente agradável e envolvente para os visitantes.

Os 8 melhores plugins de progresso de leitura da Barra de Progresso WordPress

Agora, vamos entrar nos 8 melhores plugins WordPress da barra de progresso para ajudar você a adicionar uma barra de progresso de leitura ao seu site.

Enquanto você pode encontrar plugins genéricos de barra de progresso que permitem criar uma barra de progresso personalizada para qualquer coisa, este artigo é especificamente focado em plugins que adicionam indicadores de progresso de leitura com base no comprimento do conteúdo de uma página.

Em termos de preço, 6 desses plugins são completamente gratuitos, enquanto os 2 plugins restantes são acessíveis e acrescentam alguma flexibilidade extra que você não encontrará na maioria das opções gratuitas.

O melhor de tudo, todos esses plugins devem funcionar com praticamente qualquer tema WordPress.

Read Meter

Read Meter.
Read Meter

Read Meter é um plugin de barra de progresso de leitura da Brainstorm Force, a mesma equipe por trás do popular tema do Astra WordPress (que fez nossa lista dos temas mais rápidos do WordPress).

O plugin permite que você adicione automaticamente uma barra de progresso de leitura que se cola na parte superior ou inferior da página. Você também tem a opção de exibir o tempo estimado de leitura do artigo junto com a barra de progresso.

Aqui está tudo o que você vai conseguir com o Read Meter:

  • Colocação superior ou inferior – exibir a barra de progresso na parte superior ou inferior da tela de um usuário.
  • Direcionamento do tipo de artigo – você pode optar por apenas adicionar o progresso de leitura para certos tipos de artigos (incluindo tipos de artigos personalizados). Por exemplo, você pode exibi-la em artigos de blogs, mas não em páginas.
  • Tempo de leitura – automaticamente adicione o tempo estimado de leitura a várias partes do artigo (por exemplo, abaixo do título) ou coloque-o manualmente usando um código de atalho.
  • Cores personalizáveis – você pode personalizar as cores e o estilo de cada elemento para torná-lo compatível com o seu site.

Preço: Read Meter é 100% gratuito.

Reading progressbar

Reading progressbar.
Reading progressbar

Junto com Read Meter, Reading progressbar é outro dos plugins de barra de progresso mais populares no WordPress.org. Ao contrário do Read Meter, entretanto, este plugin não lhe dá a opção de adicionar o tempo de leitura estimado – é exclusivamente para a barra de progresso.

No entanto, ele lhe dá alguma flexibilidade extra de direcionamento que o Read Meter não oferece. Por exemplo, você pode direcionar sua barra de progresso para modelos específicos, além da segmentação pós-tipo.

Aqui está tudo o que você vai conseguir com a Barra de Progresso de Leitura:

  • Posicionamento flexível – você pode colar automaticamente sua barra de progresso na parte superior ou inferior da página. Ou, há também uma opção de posicionamento personalizado que permite a você colá-la em qualquer elemento CSS. Por exemplo, se você tiver um cabeçalho sticky, você pode colá-lo abaixo do seu menu de navegação do cabeçalho ao invés de colá-lo até o topo da página (como o exemplo do HubSpot acima).
  • Design customizável – mude a altura e as cores da sua barra de progresso para combinar com o seu site.
  • Opções de direcionamento – você só pode exibir sua barra de progresso em certos modelos e/ou tipos de artigos.

Preço: A barra de progressão da leitura é 100% grátis.

Worth the Read

Worth the Read.
Worth the Read

Worth the Read é um dos plugins WordPress mais customizáveis, o que faz dele uma ótima opção se você achar os plugins anteriores muito limitantes.

Inclui algumas opções únicas de posicionamento e direcionamento que a maioria dos outros plugins não oferecem, juntamente com alguns outros toques únicos. Também lhe dá a opção de adicionar um tempo de leitura estimado, se preferir.

Aqui está tudo o que você vai conseguir com Worth the Read:

  • Opções de posicionamento horizontal ou vertical – inclua uma barra de progresso horizontal na parte superior ou inferior da tela OU uma barra de progresso vertical na parte esquerda ou direita da tela. A opção vertical é única, pois a maioria dos outros plugins não a suportam.
  • Direcionamento do tipo de artigo – inclua apenas a sua barra de progresso de leitura em certos tipos de artigo.
  • Direcionamento do dispositivo – você tem a opção de desligar a barra de progresso para dispositivos móveis e tablets (ou desktops).
  • Comentar progresso – você tem a opção de incluir comentários no progresso da leitura, o que pode ser bom se você tiver seções ativas de comentários com informações úteis.
  • Suporte RTL – é um dos poucos plugins que lhe permite mudar para RTL, o que pode ser ótimo para sites em idiomas RTL.
  • Opções de estilo – personalize as cores, espessura, opacidade, e assim por diante. Se você ativou os comentários, você pode até mesmo usar uma cor separada para indicar quando a seção de comentários começa na barra de progresso.
  • Tempo estimado de leitura – se você ativar o tempo de leitura, você pode personalizar sua funcionalidade e colocá-la automaticamente ou manualmente usando um atalho.

Preço: Worth the Read é 100% gratuito.

Catch Scroll Progress Bar

Catch Scroll Progress Bar.
Catch Scroll Progress Bar

Catch Scroll Progress Bar é outra opção leve para adicionar uma barra de progresso básica ao seu site.

Ele mantém as coisas bem simples, com apenas as opções mínimas que você precisa para colocar e estilizar sua barra de progresso.

Aqui está tudo o que você vai conseguir com a Barra de Progresso do Catch Scroll:

  • Posição superior ou inferior – coloque sua barra de progresso na parte superior ou inferior da página.
  • Direcionamento do tipo de artigo – adicione sua barra de progresso apenas a certos tipos de artigo.
  • Direcionamento dos modelos – dentro desses tipos de artigos, exiba-a apenas em certos modelos. Por exemplo, você poderia adicioná-lo a um único artigo, mas não à página de arquivo.
  • Opções de cor e estilo – personalize as cores, opacidade e altura da sua barra de progresso.

Preço: Catch Scroll Progress Bar é 100% grátis.

WP Reading Progress

WP Reading Progress
WP Reading Progress

WP Reading Progress é outro plugin gratuito da barra de progresso WordPress que está disponível no WordPress.org.

Como o plugin anterior, ele só lhe dá as configurações mínimas necessárias para personalizar sua barra de progresso de leitura. Mas para a maioria das pessoas, isso é tudo que você precisa, o que faz dela outra opção sólida.

Aqui está tudo o que você vai conseguir com o WP Reading Progress:

  • Posicionamento flexível – colar automaticamente a barra na parte superior ou inferior da página. Ou, você pode colá-la manualmente em qualquer seletor CSS.
  • Direcionamento do tipo de artigo – inclua apenas uma barra de progresso em certos tipos de artigo. Há também uma opção para habilitar/desabilitar nas páginas de arquivo.
  • Personalização de estilo – você pode personalizar a cor e a espessura da barra de progresso. No entanto, você só pode escolher uma única cor e não há opções de opacidade.

Preço: WP Reading Progress é 100% gratuito.

Reading Time

Reading Time.

Reading Time é o primeiro plugin de progresso de leitura desta lista que só vem em uma versão premium.

No entanto, ainda é bastante acessível e oferece atualizações para toda a vida através do mercado CodeCanyon do Envato.

Há 2 razões principais que você pode querer considerar o Tempo de Leitura sobre as alternativas livres:

  • Mais de 8 estilos predefinidos – você obtém algumas opções de estilo únicas, como o uso de barras verticais em vez de um preenchimento sólido dentro da barra de progresso (na foto acima).
  • Regras avançadas de direcionamento – além de direcionar os tipos de artigos e modelos, você pode direcionar suas barras de progresso por regras muito específicas, tais como funções do usuário, URLs, dispositivos e muito mais.

Você também recebe todas as características “padrão” que você esperaria de um plugin:

  • Posicionamento flexível – além do posicionamento automático superior ou inferior, você também pode usar o posicionamento personalizado para colar sua barra de progresso em qualquer seletor CSS.
  • Opções de estilo – além dos 8+ estilos predefinidos, você também tem opções gerais para personalizar as cores e a altura da sua barra de progresso.

Preço: O tempo de leitura custa $15, que vem com atualizações vitalícias para um único site e 6 meses de suporte.

Reading Position Indicator

Reading Position Indicator.
Reading Position Indicator

O Reading Position Indicator é outro plugin leve e gratuito da barra de progresso no WordPress.org.

Ele não lhe dá uma tonelada de configurações, mas uma opção única é que ele permite que você use um gradiente personalizado para sua barra de progresso de leitura (além de uma cor sólida).

Aqui está tudo o que você receberá com o Indicador de Posição de Leitura:

  • Posicionamento superior ou inferior – não há um seletor de CSS mas você pode adicionar um deslocamento.
  • Direcionamento do tipo de artigo – direcione sua barra de progresso para tipos de artigos específicos.
  • Opções de personalização de estilo – escolha entre estilos de cores sólidas ou gradientes. Você também pode ajustar a espessura da barra de progresso.

Preço: O Indicador de Posição de Leitura é 100% gratuito.

ReBar

ReBar.
ReBar

ReBar é outro plugin WordPress da barra de progresso de leitura premium que é vendido através do CodeCanyon Marketplace do Envato.

Como no Reading Time, aqui estão algumas das características únicas que ele oferece que podem fazer com que valha a pena gastar o dinheiro:

  • Mais de 8 estilos predefinidos – você obtém uma série de estilos únicos que vão além dos preenchimentos de cores sólidas, tais como plástico, gradientes, estilo iOS e muito mais.
  • Regras avançadas de direcionamento – além de direcionar os tipos de artigos, você pode direcionar suas barras de progresso por regras muito específicas, tais como funções do usuário, URLs, dispositivos e muito mais.
  • Suporte Infinite scroll – ReBar ainda funciona com infinitos layouts de rolagem, o que o torna uma ótima opção para esses sites. Você pode definir a área de rolagem com base em seletores CSS e isso gerará uma barra de progresso única para cada artigo no scroll infinito.

Aqui estão algumas outras características notáveis:

  • Estilos horizontal e vertical – coloque uma barra de progresso horizontal na parte superior ou inferior da página OU coloque uma barra de progresso vertical no lado esquerdo ou direito da página.
  • Estilos personalizáveis – além dos mais de 8 estilos predefinidos, você também pode personalizar as cores e altura/largura da sua barra de progresso.
  • Suporte RTL – você pode inverter a barra de progresso para idiomas RTL.

Preço: O ReBar custa $15, que vem com atualizações vitalícias para um único site e 6 meses de suporte.

Resumo

Isso encerra nossa coleção dos 8 melhores plugins WordPress da barra de progresso de leitura.

Para as opções mais simples de adicionar uma barra de progresso básica, você pode considerar plugins tais como Read Meter ou Reading progressbar.

Por outro lado, se você quer a mais customizável gratuitamente, você pode querer começar com Worth the Read, pois ela inclui uma série de opções e características únicas que outros plugins não oferecem.

Se você quiser ir além de uma cor de preenchimento sólido para a barra de progresso, você também pode querer considerar as opções premium na CodeCanyon – ou Reading Time ou ReBar. Novamente, os detalhes mais exclusivos sobre estes plugins são que ambos vêm com mais de 8 estilos pré-definidos e opções de direcionamento muito mais avançadas.

Cada plugin tem seu toque único quando se trata de estilo e características, então vale a pena explorar todos eles para encontrar a opção certa para o seu site.

A maioria deles tem versões gratuitas no WordPress.org, o que torna fácil testá-los. Se você está hospedando seu site com Kinsta, você pode facilmente criar um site de teste para testar com segurança como cada plugin vai ficar no seu site.

Para encontrar alguns outros plugins que podem melhorar seu site, você também pode navegar em nossa lista completa com curadoria dos melhores plugins para WordPress.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).