Como Adicionar uma Barra de Progresso de Leitura em Posts do WordPress (3 Maneiras Fáceis)

Você conhece aquela sensação quando está lendo um artigo longo online e não tem ideia de quanto falta? É esse o problema que as barras de progresso de leitura resolvem para seus visitantes do WordPress.

Esses indicadores visuais simples mostram aos leitores exatamente o quanto de um artigo eles completaram, o que pode incentivá-los a continuar lendo e permanecer em sua página. Isso aproveita a mesma satisfação que você obtém ao completar qualquer coisa com um ponto final claro.

Agora, nós não usamos barras de progresso aqui no WPBeginner porque nossos tutoriais são projetados para serem escaneáveis. A maioria das pessoas pula direto para a seção que precisa, em vez de ler do início ao fim.

Mas se você está publicando posts de blog mais longos, guias aprofundados ou artigos detalhados, uma barra de progresso de leitura pode realmente ajudar a manter as pessoas engajadas.

Neste guia, mostraremos três maneiras diferentes de adicionar uma ao seu site WordPress, quer você queira uma solução de plugin simples ou algo mais personalizado.

Quando Adicionar uma Barra de Progresso de Leitura aos Seus Posts de Blog do WordPress

Para posts de blog mais longos, adicionar uma barra de progresso de leitura pode ser uma ferramenta valiosa para incentivar os visitantes a permanecerem em seu site WordPress.

No entanto, eles não são necessários para todos os sites. Através da nossa experiência, descobrimos que as barras de progresso de leitura funcionam melhor nessas situações específicas:

• Artigos Longos: Se você publica guias ou histórias detalhadas, uma barra de progresso incentiva os usuários a continuar rolando até o final.
• Conteúdo Linear: Eles são perfeitos para conteúdo que precisa ser lido do início ao fim, em vez de ser escaneado.
• Design Interativo: Um medidor de leitura adiciona um toque de interatividade. Isso faz com que a experiência do usuário pareça mais uma jornada com um destino claro.

Com isso em mente, vamos ver como adicionar facilmente uma barra de progresso de leitura aos seus posts do WordPress. Você pode usar os links rápidos abaixo para pular para o seu método preferido:

• Method 1: Design a Custom Theme With Reading Progress Indicators
• Método 2: Adicione uma Barra de Progresso de Leitura com um Plugin Gratuito
• Método 3: Adicione uma Barra de Progresso de Leitura com Código
• Dicas Bônus para Manter os Leitores do Seu Blog WordPress Engajados

Método 1: Crie um Tema Personalizado com Indicadores de Progresso de Leitura

Uma maneira de adicionar uma barra de progresso de leitura em posts do WordPress é usar um construtor de temas com um recurso de barra de progresso. Dessa forma, o design da barra de progresso se integrará perfeitamente com o resto do seu tema, tornando-o mais agradável aos olhos.

Tenha em mente que este método envolverá a alteração do seu tema, portanto, não o recomendamos se você já estiver satisfeito com o seu tema e não estiver procurando trocá-lo tão cedo. Nesse caso, você deve optar pelo método 2 (plugin) ou pelo método 3 (código).

Para este método, usaremos o Thrive Theme Builder. Além de ter uma barra de progresso de leitura, o Thrive Theme Builder possui dezenas de modelos de temas para diversos fins, de blogs a sites corporativos.

O melhor de tudo é que o construtor de arrastar e soltar é fácil de usar, tornando-o ótimo para iniciantes completos.

Você pode aprender mais sobre a plataforma em nossa análise do Thrive Themes.

Uma desvantagem do Thrive Themes é que não há versão gratuita. Dito isso, você pode usar nosso código de cupom do Thrive Themes para obter até 50% de desconto na sua primeira compra.

Etapa 1: Instale o Thrive Theme Builder

O primeiro passo é configurar o Thrive Theme Builder. Você pode acessar este plugin fazendo login na sua conta no site da Thrive Themes.

Em seguida, baixe e instale o plugin Thrive Product Manager. Para mais informações, confira nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Assim que o plugin estiver ativo, clique em Gerenciador de Produtos na sua área de administração do WordPress.

Em seguida, clique no botão 'Entrar na minha conta' para conectar seu site WordPress à sua conta Thrive Themes.

Depois disso, você deverá ver uma lista de todos os produtos Thrive Themes disponíveis em sua conta.

Aqui, selecione 'Thrive Architect' e marque a caixa 'Instalar Produto'.

Este plugin construtor de páginas funciona em conjunto com o construtor de temas, por isso precisamos ativá-lo.

Em seguida, role para baixo até a seção 'Thrive Theme Builder' e marque a caixa 'Instalar Tema'.

Agora, simplesmente clique em 'Instalar produtos selecionados'.

Na página seguinte, você verá que o Thrive Product Manager está instalando e ativando o Thrive Theme Builder.

Assim que o processo for concluído, clique em 'Ir para o Painel do Theme Builder'.

Agora, prossiga e escolha um tema WordPress.

Se você não tiver certeza de qual escolher, basta clicar no botão 'Visualizar' para ver como o tema se parece primeiro. Em seguida, clique em 'Escolher' assim que tiver tomado sua decisão.

Agora você deve chegar ao Assistente do Theme Builder.

Este assistente de configuração irá guiá-lo no upload do seu próprio logotipo, na escolha das cores da marca para adicionar ao seu tema e na configuração das diferentes estruturas e modelos do seu tema.

Prossiga e conclua o assistente de configuração antes de passar para a próxima etapa.

Etapa 2: Adicionar uma Barra de Progresso de Leitura ao Seu Modelo de Postagem Única

Com o seu tema configurado, vamos agora adicionar uma barra de progresso de leitura ao modelo do seu tema. Como queremos apenas exibir a barra de medidor de leitura nas postagens do WordPress, precisaremos apenas editar o modelo de postagem única.

Para fazer isso, mude para a aba 'Modelos' no Thrive Theme Builder. Em seguida, encontre o modelo 'Postagem Padrão' e clique em 'Editar'.

Você deve estar agora dentro do construtor de temas. Deve haver uma barra lateral esquerda para editar seu modelo, uma prévia do próprio modelo e uma pequena barra de ferramentas no lado direito para adicionar mais blocos ou alterar o estilo do modelo.

Para adicionar o medidor de leitura, role para baixo na barra lateral esquerda e encontre a configuração 'Indicador de progresso de leitura'. Simplesmente clique no alternador para ativá-lo.

Após adicionar a barra de progresso, deve haver mais algumas configurações para você editá-la.

Primeiro, você pode escolher adicionar a barra de progresso abaixo do cabeçalho ou no topo da área de visualização (logo acima do cabeçalho). Se você escolher a primeira opção, precisará garantir que o cabeçalho esteja definido como fixo, o que mostraremos como fazer mais tarde.

Em seguida, você pode alterar a cor da barra de progresso. Simplesmente clique no seletor de cores para fazer isso.

Agora, você pode escolher uma das cores do tema, que é o esquema de cores pré-definido do seu tema. Ou, você pode clicar em ‘Desvincular da cor do tema’ para escolher uma cor totalmente diferente que não faz parte do seu tema.

Se você escolher a opção ‘Desvincular da cor do tema’, você também poderá ajustar a opacidade da cor.

Dessa forma, você pode ajustar o quão opaca a barra de progresso fica contra seu fundo. Dito isso, é melhor fazer com que a cor da barra de progresso não seja tão vibrante a ponto de distrair os usuários da leitura.

Assim que estiver satisfeito com a cor, basta clicar em ‘Aplicar’.

Finalmente, você pode ajustar a altura da barra de progresso.

O construtor de temas permite redimensionar a barra para até 10 pixels. Isso garante que a barra de progresso não pareça muito grande. Com isso em mente, recomendamos um tamanho entre 5 e 10 para que a barra de progresso seja claramente visível.

Quando estiver satisfeito com a aparência da barra, clique em ‘Salvar Trabalho’ para manter suas alterações.

Passo 3: Torne seu Cabeçalho Fixo (Opcional)

Se você optar por exibir sua barra de progresso de leitura abaixo do cabeçalho, precisará seguir esta etapa. Caso contrário, você pode pular.

Primeiro, role a barra lateral esquerda para cima e clique em ‘Cabeçalho’.

Um conjunto diferente de configurações para personalizar o cabeçalho agora deve aparecer na barra lateral.

Prossiga e role para baixo até a Seção de Cabeçalho e clique em ‘Editar’.

Agora, abra a guia Comportamento de Rolagem.

Em seguida, você precisa selecionar ‘Fixo’. Dependendo do seu tema, você também pode precisar alterar a distância do topo da tela para 1 px para que a barra de progresso apareça.

Você pode deixar o restante das configurações como estão e clicar em ‘Concluído’ na parte inferior.

Passo 4: Adicione um Indicador de Tempo de Leitura (Opcional)

Outra coisa que você pode fazer com o Thrive Theme Builder é mostrar o tempo estimado de leitura para percorrer um post do início ao fim. Isso ajuda os usuários a verem quanto tempo levará para ler um artigo, permitindo que escolham conteúdo que se ajuste ao tempo disponível.

Primeiro, clique no bloco responsável por exibir seus metadados do post.

Esta é a parte do seu modelo de postagem única que exibe informações como o autor da postagem do blog, categorias, tags e assim por diante.

Em seguida, clique no ícone de ‘Texto dinâmico‘ na barra de ferramentas.

Aqui, você deve selecionar ‘Conteúdo’ no primeiro menu suspenso e ‘Tempo de leitura restante (em minutos)’ no segundo.

Depois disso, clique em ‘Inserir’.

Agora você deve ver um novo texto que diz, ‘0 minutos restantes’ nos metadados da postagem. Você pode ajustar este texto como desejar.

No nosso caso, decidimos remover a palavra ‘restantes’.

Quando terminar, não se esqueça de clicar em ‘Salvar trabalho’.

Etapa 5: Visualize seus indicadores de progresso de leitura

Agora que você configurou as definições da sua barra de progresso, pode visitar sua postagem do blog para ver a barra em ação.

Se você quiser fazer uma pré-visualização em vez de ver a barra ao vivo no seu site, você pode simplesmente clicar no botão ‘Pré-visualizar’ na parte inferior. O Thrive Theme Builder permite que você pré-visualize seu site em desktop, tablet e mobile.

Sinta-se à vontade para fazer quantas alterações forem necessárias.

Veja como fica nossa barra de progresso de leitura:

Método 2: Adicione uma Barra de Progresso de Leitura com um Plugin Gratuito

Se você quiser apenas adicionar uma barra de progresso de leitura simples às suas postagens do WordPress gratuitamente, você pode usar o plugin Catch Scroll Progress Bar.

Este plugin de barra de progresso de leitura mostrará automaticamente um medidor de leitura em suas páginas e postagens, e você pode personalizá-lo facilmente de acordo com suas preferências.

Primeiro, instale o plugin na sua área de administração do WordPress. Para mais informações, leia nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Assim que isso for feito, vá para Catch Scroll Progress Bar no seu painel do WordPress. Agora você verá algumas configurações da barra de progresso para configurar.

Com este plugin, você pode alterar a posição da barra de progresso de cima para baixo. Dito isso, você pode simplesmente deixá-la como está se preferir a posição normal no topo.

Outra coisa que você pode personalizar é a cor de fundo e a cor de primeiro plano.

A cor de fundo é a cor da barra vazia antes de rolar. Enquanto isso, a cor de primeiro plano preenche a barra para mostrar o progresso à medida que o leitor rola a página para baixo.

Em seguida, vem a opacidade, que controla a transparência das cores de fundo e de primeiro plano. O intervalo é entre 0 e 1, sendo 1 opaco e 0 transparente ou invisível.

Sinta-se à vontade para experimentar os números até encontrar o nível de opacidade que você gosta.

Em seguida, você pode ajustar a altura e o raio da borda da barra de progresso.

Para a altura, descobrimos que o melhor número é entre 1 e 8, mas não mais do que isso. Caso contrário, a barra de progresso pode parecer muito grande.

O raio da borda controla o quão arredondados os cantos da sua barra de progresso ficam. Se você não gostar de como isso fica, pode simplesmente inserir '0'.

Agora, este plugin também permite que você decida em quais modelos exibir a barra de progresso: na sua página inicial, página de blog, arquivos e categorias e/ou posts ou páginas individuais.

Normalmente, você só precisa adicionar uma barra de progresso de leitura em suas postagens de blog WordPress. Neste caso, escolhemos apenas ‘Página/post único’ nas configurações de condição do modelo.

Também marcamos a opção 'Posts' em 'Selecionar o tipo de post para aplicar a barra de progresso', porque queremos que a barra apareça apenas em posts de blog.

Dito isso, sinta-se à vontade para verificar as condições que melhor se adequam ao seu site.

Assim que estiver satisfeito com as configurações da sua barra de progresso, clique em 'Salvar Alterações'.

Agora, se você visualizar sua postagem do blog no celular ou no desktop, você deverá ver uma barra de progresso.

Método 3: Adicione uma Barra de Progresso de Leitura com Código

Você também pode usar código personalizado para adicionar uma barra de progresso de leitura ao seu site WordPress.

Frequentemente, tutoriais pedirão que você adicione código diretamente ao arquivo functions.php do seu tema. Mas, não recomendamos fazer isso porque o menor erro pode quebrar seu site.

Em vez disso, recomendamos o uso do plugin WPCode. É a maneira mais fácil e segura de adicionar código personalizado no WordPress sem precisar editar nenhum arquivo principal do WordPress.

Testamos completamente o WPCode e descobrimos que ele é uma solução confiável e amigável para iniciantes.

Ele vem com uma biblioteca integrada de snippets de código prontos que você pode adicionar ao seu site em apenas alguns cliques, incluindo um para uma barra de progresso de leitura. Você pode conferir nossa análise completa do WPCode para saber mais sobre seus recursos e por que o recomendamos.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, consulte nosso tutorial sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, vá para Trechos de Código » Biblioteca no painel do WordPress.

A partir daí, procure por ‘Barra de Progresso de Rolagem’ na biblioteca, passe o mouse sobre ela e clique no botão ‘Usar snippet’.

O WPCode adicionará o código automaticamente para você.

O plugin também escolherá automaticamente o método correto de ‘Inserção Automática’ para você em segundo plano.

Depois disso, tudo o que você precisa fazer é alternar o interruptor de Inativo para Ativo.

Em seguida, clique no botão ‘Atualizar’.

Agora, você pode visualizar uma postagem de blog em seu site.

Uma barra de progresso simples deverá aparecer agora, assim:

Dicas Bônus para Manter os Leitores do Seu Blog WordPress Engajados

Quer transformar visitantes casuais em leitores fiéis? Nós temos o que você precisa!

Confira estes tutoriais especializados de WordPress repletos de dicas para manter seu público engajado:

• Estilize cada postagem do WordPress de forma diferente para tornar seu conteúdo visualmente atraente.
• Crie divisores de forma personalizados para quebrar seu texto e guiar os leitores pelo seu conteúdo.
• Adicione emojis para expressar sua personalidade e um toque de diversão ao seu blog.
• Destaque novas postagens para visitantes recorrentes e faça com que eles voltem sempre.
• Destaque texto em suas postagens do WordPress e enfatize pontos importantes para seus leitores.
• Adicione notas de rodapé simples e elegantes às suas postagens para exibir sua pesquisa.
• Impressione seus visitantes mostrando depoimentos rotativos em seu site WordPress.
• Adicione um redimensionador de fonte ao seu site WordPress para garantir que seu conteúdo seja acessível a todos.

Esperamos que este artigo tenha ajudado você a adicionar barras de progresso de leitura no WordPress. Você também pode querer ver nosso guia completo sobre como editar um site WordPress e nossas melhores escolhas de melhores alternativas ao Canva para gráficos de design de sites.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.