Snippets e Shortcodes

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.

Por

125

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: