Como exibir tempo estimado de leitura no WordPress

Exiba o tempo médio de leitura de seus artigos e reduza a taxa de rejeição.
3
371

Quem tem sites e blogs está — ou deveria estar — às voltas com uma preocupação: o bounce rate, ou "taxa de rejeição". É uma métrica sobre o comportamento de seus leitores. Quando só uma página é visualizada, sem resultar em novas visualizações, o visitante é parte da rejeição, pois não teve interesse em outros conteúdos além do ponto de entrada.

Dependendo do projeto, isso é mais ou menos prejudicial. Se o conteúdo está em página única, como oferta numa página de aterrissagem ou hotsite, não chega a ser grave. Mas quem precisa manter o usuário, como a página inicial de um portal ou uma listagem, é mau sinal. Deve-se buscar formas de "fidelizar" leitores que estão "pulando" por aí.

Em textos, uma das formas de fazer isso é oferecer informações prévias. O leitor deve saber do que se trata o artigo sem ter que ler tudo. Caso se sinta enganado ao final, é quase certo que sairá em seguida, talvez não voltando mais.

Uma opção é disponibilizar é a estimativa de tempo de leitura. Muita gente tem preguiça de textos longos, ou falta tempo na volta do almoço ou fila do banco. Ao ter noção de quanto tempo o artigo vai tomar, a pessoa decide se vale a pena continuar ou partir para outro. ALGUNS AUTORES relatam queda de até 13% na rejeição só por exibir esse dado.

Também podemos usá-lo para entender o leitor. O Medium, um dos grandes que informa o tempo estimado por artigo, fez isso para concluir que o tempo ideal de leitura (no que concerne ao engajamento) é 7 minutos.

Se você usa o WordPress, é fácil exibir uma estimativa de tempo sem plugins. O código que segue pode ser adaptado para qualquer site baseado em PHP.

Serão três métodos:

  • Método 1: contagem de palavras e tempo no formato de minutos aproximados.
  • Método 2: contagem de caracteres e tempo no formato minutos aproximados.
  • Método 3: contagem de caracteres e tempo no formato horas:minutos:segundos.

Já implementado e estilizado, ficaria assim:

Meio óbvio, mas bom lembrar que o tempo estimado é impreciso, pois depende do estilo de escrita, velocidade de leitura do visitante, etc. Portanto, o cálculo é baseado numa média segundo especialistas

Método 1

Adicione o seguinte ao seu arquivo functions.php (usuários do WordPress):

/* TT READING TIME 
// Calcula o tempo estimado de leitura do conteúdo
// @www.tutoriart.com.br/
*/
function tt_reading_time() {
 $content = get_post_field('post_content');
 $word_count = str_word_count(strip_tags($content));
 $min = floor($word_count / 200); // tempo médio de leitura: 200 palavras
 $tempo = 'Tempo de leitura: ';
 if ($min <= 1) {
 $tempo .= '1 minuto';
 }
 else {
 $tempo .= $min . ' minutos';
 }
 return $tempo;
}
/* http://wordpress.stackexchange.com/a/39920/31885 */
function tt_reading_time_filter( $content ) {
 $custom_content = '<div id="tt-temp-estim">'.tt_reading_time().'</div>';
 $custom_content .= $content;
 return $custom_content;
}
add_filter( 'the_content', 'tt_reading_time_filter' );

O estilo vai na style.css, ou se tiver painel de CSS, use.

#tt-temp-estim{font-style: italic;font-size: 0.8em;margin: 0 0 25px}

Só isso. Mande pro servidor e está funcionando.

Desmontando

A primeira parte da função usa str_word_count para contar as palavras no conteúdo post_content.

Esse trecho em especial pode ser modificado:

$min = ceil($word_count / 200);

Ele aplica na função a leitura média do público em 200 palavras por minuto, estimativa tida como normal. Alguns especialistas dizem que, na tela, o número pode ser menor, em torno de 150 palavras. Fica a seu critério alterar o valor após a barra.

O ceil arredonda o valor para cima. Então se o texto tiver 1200 palavras, será: 1237 / 200 = 6,185. No caso, será exibido o tempo de 7 minutos.

Método 2

O problema da função é que str_word_count é impreciso com certos caracteres. Podemos fazer a contagem por caracteres, excluindo os espaços em branco e tags de HTML e PHP.

Mas como saber quantos caracteres lemos por minuto, em média?

Vamos nos basear na média de 200 palavras. Contei os caracteres de cinco textos de diferentes autores. Esse foi o resultado:

  • Texto 1 (lorem ipsum): 1309 caracteres.
  • Texto 2 (notícia): 1316.
  • Texto 3 (artigo científico): 1205.
  • Texto 4 (artigo de blog): 1098.
  • Texto 5 (fórum): 1078.

Claro que os números podem variar de acordo com o estilo do autor, mas nessa experiência, a média foi de 1201 caracteres em 200 palavras, ou seja, cerca de 1200 caracteres por minuto.

Agora podemos criar a nova função:

/* TT READING TIME 
// Calcula o tempo estimado de leitura do conteúdo
// @www.tutoriart.com.br/
*/
function tt_reading_time() {
 $content = get_post_field('post_content');
 $char_count = mb_strlen(strip_tags($content), "UTF-8");
 
 $min = ceil($char_count / 1200); // tempo médio de leitura: 1200 caracteres

$tempo = 'Tempo estimado: ';
 if ($min <= 1) {
 $tempo .= '1 minuto';
 }
 else {
 $tempo .= $min . ' minutos';
 }
 $tempo .= ' ('. $char_count .' caracteres)';
 return $tempo;
}
/* http://wordpress.stackexchange.com/a/39920/31885 */
function tt_reading_time_filter( $content ) {
 $custom_content = '<div id="tt-temp-estim">'.tt_reading_time().'</div>';
 $custom_content .= $content;
 return $custom_content;
}
add_filter( 'the_content', 'tt_reading_time_filter' );

O que resulta em algo como:

Palavras e caracteres

Acho desnecessário, mas podemos exibir ambos, usando um deles como parâmetro para o tempo. Algo assim:

/* TT READING TIME 
// Calcula o tempo estimado de leitura do conteúdo
// @www.tutoriart.com.br/
*/
function tt_reading_time() {
 $content = get_post_field('post_content');
 $word_count = str_word_count(strip_tags($content));
 $char_count = mb_strlen(strip_tags($content), "UTF-8");
 
 /* $min = ceil($word_count / 200); // tempo médio de leitura: 200 palavras DESATIVADO */
 $min = ceil($char_count / 1200); // tempo médio de leitura: 1200 caracteres
 
 $tempo = 'Tempo estimado: ';
 if ($min <= 1) {
 $tempo .= '1 minuto';
 }
 else {
 $tempo .= $min . ' minutos';
 }
 $tempo .= ' ('. $word_count .' palavras, '. $char_count .' caracteres)';
 return $tempo;
}
/* http://wordpress.stackexchange.com/a/39920/31885 */
function tt_reading_time_filter( $content ) {
 $custom_content = '<div id="tt-temp-estim">'.tt_reading_time().'</div>';
 $custom_content .= $content;
 return $custom_content;
}
add_filter( 'the_content', 'tt_reading_time_filter' );

Resulta em...

Como mudar o estilo?

É só alterar o CSS que você incluiu lá no começo. Pra ficar com fundo amarelo e padding de 7px, por exemplo:

#tt-temp-estim{
    font-style: italic;
    font-size: 0.8em;
    margin: 0 0 25px;
    background-color: #ffcc00;
    padding: 7px
}

Método 3

Como devem ter notado, o tempo estimado é bem "livre", sem exibição de segundos. Se o resultado foi 1:05 segundos ou 1:59, tanto faz, vira 2 minutos. Pra muita gente, não deve ter soado legal, então vamos com uma função diferente, com exibição de horas (para textos muuito longos), minutos e segundos.

Primeiro a função, depois a explicação. Aplique no seu arquivo functions.php:

/* TT READING TIME 
// Calcula o tempo estimado de leitura do conteúdo
// @www.tutoriart.com.br/
*/
function tt_reading_time() {
 $content = get_post_field('post_content');
 $word_count = str_word_count(strip_tags($content));
 $char_count = mb_strlen(strip_tags($content), "UTF-8");

/* Se em 60 seg lemos 1200 caracteres,
 // quantos $x seg para ler $char_count caracteres? 
 // Exemplo: 3750 caracteres
 //
 // 1200 ch => 60 seg
 // 3750 ch => x seg
 //
 // 1200x = 3750 * 60 (225000)
 // x = 225000 / 1200
 // x = 187,5 seg
 */
 
 $char_lmin=1200; $lmin = 60;
 
 $x = $char_count * $lmin;
 $x = $x / $char_lmin;
 
 $tempo = 'Tempo estimado: ';
 if ($char_count <= 1200) {
 $tempo .= '< 1 min';
 }
 else {
 if ($x > 3599) $tempo .= gmdate("H:i:s", $x) . ' min';
 else $tempo .= gmdate("i:s", $x) . ' min';
 }
 $tempo .= ' ('. $word_count .' palavras, '. $char_count .' caracteres)';
 return $tempo;
}
/* http://wordpress.stackexchange.com/a/39920/31885 */
function tt_reading_time_filter( $content ) {
 $custom_content = '<div id="tt-temp-estim">'.tt_reading_time().'</div>';
 $custom_content .= $content;
 return $custom_content;
}
add_filter( 'the_content', 'tt_reading_time_filter' );

Lendo os comentários no código já dá pra sacar, mas desmontando as principais partes:

$char_lmin=1200; $lmin = 60;

Aqui definimos os valores-base: 1200 caracteres, e 60 segundos.

$x = $char_count * $lmin;
$x = $x / $char_lmin;

Depois, foi calculado o total de segundos para ler os caracteres dados em $char_count.

if ($char_count <= 1200) {
 $tempo .= '< 1 min';
 }
 else {
 if ($x > 3599) $tempo .= gmdate("H:i:s", $x) . ' min';
 else $tempo .= gmdate("i:s", $x) . ' min';
 }

Se a contagem de caracteres for igual ou menor que 1200, o tempo exibido será "inferior a 1 minuto", não precisa de outros cálculos.

Senão (else), verificamos se o número de segundos é maior que 1 hora (1 hora = 3600 segundos). Se for, o tempo em segundos é formatado usando a função gmdate. com hora, minuto e segundo. Caso contrário, usará o formato minuto e segundo.

O resto é como nas outros métodos. Veja como fica:

Formato de minuto e segundo.
Formato de hora, minuto e segundo.
- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

3 COMENTÁRIOS

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui