Como exibir o tempo estimado de leitura da postagem e a contagem de palavras em Divi (com ReadingTime.js)

Algumas pessoas (inclusive eu) apreciam saber a duração de uma postagem no blog ou, mais importante, quanto tempo leva para ler. Uma ótima maneira de fazer isso é exibir um tempo estimado de leitura e / ou contagem de palavras na parte superior das postagens de seu blog. Você vê esse recurso em blogs populares como o medium.com. Não precisa ser intrusivo ou distrair o usuário de se envolver com o conteúdo. Mas pode adicionar um bom impulso de UX para aqueles que passam muito tempo devorando conteúdo na web.

Neste tutorial, mostraremos uma maneira rápida e fácil de adicionar um tempo estimado de leitura e contagem de palavras às postagens do seu blog Divi. A biblioteca readingTime.js que vamos usar é simples, leve e fácil de implementar em seu site Divi. Além disso, você pode ter mais controle sobre o estilo e a localização do tempo de leitura e da contagem de palavras. Tudo isso sem precisar depender de outro plugin!

Estaremos adicionando o tempo estimado de leitura e a contagem de palavras a um modelo de postagem de blog usando o Divi Theme Builder. Assim, depois de adicionado ao modelo, o tempo de leitura e a contagem de palavras serão exibidos perfeitamente em todas as suas postagens no site.

Vamos começar.

Espiada

Aqui está uma rápida olhada no tempo de leitura e contagem de palavras que adicionaremos a um modelo de postagem no Divi.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Como fazer o upload do modelo

Vá para Divi Theme Builder

Para fazer o upload do modelo, navegue até o Divi Theme Builder no backend do seu site WordPress.

Carregar modelo de site

Então, no canto superior direito, você verá um ícone com duas setas. Clique no ícone.

Navegue até a aba de importação, carregue o arquivo JSON que você conseguiu baixar neste post e clique em 'Importar Divi Theme Builder Templates'.

Salvar alterações do Divi Theme Builder

Depois de carregar o arquivo, você notará um novo modelo com uma nova área do corpo que foi atribuída a Todas as postagens. Salve as alterações do Divi Theme Builder assim que quiser que o modelo seja ativado.

Vamos para o tutorial para que possamos aprender a construir isso do zero, certo?

Como exibir o tempo estimado de leitura da postagem e a contagem de palavras em Divi

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Navegue até o Divi Theme Builder
2. Clique no ícone de portabilidade no canto superior direito da página.
3. Selecione a guia Importar no pop-up Portabilidade.
4. Escolha / importe o arquivo de modelo de postagem do Divi Business Consultant (faça download aqui).
5. Clique no botão Importar

Depois disso, você terá um modelo de postagem pronto para editar.

Adicionando o Texto / HTML ao Modelo de Postagem

Para editar o modelo de postagem, clique no ícone de edição na área personalizada do corpo.

No editor de layout de postagem, adicione uma nova linha de uma coluna sob a linha que contém os metadados de postagem na seção superior do layout.

Uma vez feito isso, adicione um módulo de texto à nova linha.

Nas configurações do módulo de texto, cole o seguinte HTML dentro do corpo (usando a guia de texto):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

O importante a lembrar é que a tag span com a classe “eta” acabará por exibir o tempo estimado de leitura do conteúdo da postagem. E a tag span com a classe “contagem de palavras” exibirá a contagem de palavras do conteúdo da postagem.

Estilizando o Texto do Tempo de Leitura

Na guia de design, atualize os estilos de texto da seguinte maneira:

• Fonte do texto: Poppins
• Peso da fonte do texto: negrito
• Estilo da fonte do texto: TT
• Cor do texto do texto: #ffffff
• Tamanho do texto do texto: 14 px (desktop), 12 px (telefone)
• Espaçamento entre letras do texto: 2px
• Alinhamento de texto: centro

Estilizando a linha

Assim que as configurações de texto forem concluídas, abra as configurações da linha e atualize o seguinte:

• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Na guia Avançado, atualize a posição:

• Posição: Absoluta
• Localização: canto inferior esquerdo

Adicionando o Código

Para adicionar o código necessário para gerar o tempo estimado de leitura e a contagem de palavras, primeiro adicione um módulo de código sob o módulo de texto.

Vamos usar a biblioteca readingtime.js com algum código personalizado para direcionar nossa área de conteúdo de postagem, classe de destino de tempo de leitura eta e classe de contagem de palavras de destino de contagem de palavras .

Cole o seguinte código no bloco de código, certificando-se de envolvê-lo nas tags de script :

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

Sobre o Código

A classe de destino et_pb_post_content é usada para designar a área de conteúdo da postagem no Divi que contém o conteúdo da postagem, de forma que o código saiba o texto de que precisa para contar e estimar o tempo de leitura. Por exemplo, se você usasse body como destino, o código calcularia todo o conteúdo / texto da página inteira, não apenas o conteúdo do artigo.

O readingTimeTarget é atribuído à classe eta que corresponde à classe que adicionamos à tag span no módulo de texto. E o wordCountTarget é atribuído à classe de contagem de palavras que adicionamos à outra tag span no módulo de texto.

Além disso, fique à vontade para atualizar o valor de palavras por minuto (atualmente 275) para representar o que você acha que deveria ser. É claro que isso afetará o tempo de leitura exibido. Pelo que pesquisei, o adulto médio lê cerca de 300 palavras por minuto. Além disso, você sempre pode atualizar o valor do idioma também. Por exemplo, você pode substituir 'en' por 'fr' se quiser que o texto seja exibido em francês). Para mais informações, você pode verificar a documentação no github.

Salve o layout do modelo e o Criador de temas.

Em seguida, navegue até Divi> Opções de tema> Integrações.

Em seguida, adicione a biblioteca à área do cabeçalho com as tags de script :

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

Deve ser assim ...

Resultado final

Agora tudo o que você precisa fazer é visitar uma postagem de blog ao vivo em seu site para ver o tempo estimado de leitura e a contagem de palavras na parte superior do conteúdo da postagem.

Pensamentos finais

Adicionar um tempo estimado de leitura de postagem e contagem de palavras às postagens do seu blog Divi é surpreendentemente fácil. Além disso, você pode escolher onde deseja que o elemento seja exibido em seu modelo de postagem e estilizá-lo usando as configurações de design Divi integradas. Esperançosamente, isso será útil!

Estou ansioso para ouvir de você nos comentários.

Saúde!