Como adicionar tempo de leitura a postagens no WordPress com Elementor

No Elementor Pro, você pode exibir essa informação sem precisar instalar plugins adicionais.

Fornecer um tempo estimado de leitura para os seus artigos no WordPress pode melhorar a experiência do usuário e aumentar o engajamento do público. No Elementor Pro, você pode exibir essa informação sem precisar instalar plugins adicionais.

Neste artigo, vou te mostrar como fazer isso de maneira simples utilizando uma função PHP personalizada e o recurso de tags dinâmicas do Elementor.

Função de tempo de leitura

A função personalizada estimate_reading_time() calcula o tempo estimado de leitura de uma postagem do WordPress. Ou seja, essa função conta o número de palavras no conteúdo e divide por uma taxa média de leitura (em palavras por minuto).

Posteriormente, criamos uma tag dinâmica personalizada no Elementor para exibir esse tempo estimado automaticamente.

Código PHP para criar a função de tempo de leitura

Adicione o seguinte código ao arquivo functions.php do tema no seu site para ativar a funcionalidade:

  1. include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
  2. if ( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
  3. add_action('elementor/dynamic_tags/register_tags', function( $dynamic_tags ) {
  4. include_once 'path_to_your_reading_time_tag_class.php';
  5. $dynamic_tags->register_tag( 'Reading_Time_Tag' );
  6. });
  7. class Reading_Time_Tag extends \Elementor\Core\DynamicTags\Tag {
  8. public function get_name() {
  9. return 'reading-time';
  10. }
  11. public function get_title() {
  12. return __('Reading Time', 'text-domain');
  13. }
  14. public function get_group() {
  15. return 'post';
  16. }
  17. public function get_categories() {
  18. return [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ];
  19. }
  20. protected function register_controls() {
  21. }
  22. public function render() {
  23. $post_id = get_the_ID();
  24. $content = get_post_field('post_content', $post_id);
  25. echo estimate_reading_time($content);
  26. }
  27. }
  28. }
  29. function estimate_reading_time($content) {
  30. $word_count = str_word_count(strip_tags($content));
  31. $words_per_minute = 200; // Average reading speed (words per minute)
  32. $reading_time = ceil($word_count / $words_per_minute);
  33. return $reading_time . ' minute' . ($reading_time === 1 ? '' : 's') . ' read';
  34. }

Como adicionar o código com o plugin Code Snippets

Por outro lado, o plugin Code Snippets permite que você adicione código PHP ao seu WordPress sem modificar diretamente os arquivos do tema. Por isso, recomendo usá-lo para garantir uma implementação segura e compatível com futuras atualizações.

Passos para Adicionar a Função ao Code Snippets

  1. Instale e Ative o Code Snippets
    • No painel do WordPress, vá até Plugins > Adicionar Novo.
    • Busque por Code Snippets, instale e ative o plugin.
  2. Crie um Novo Snippet
    • Vá para Snippets > Adicionar Novo.
    • Dê um nome ao snippet (por exemplo, Tempo de Leitura Elementor).
  3. Adicione o Código
    • Copie e cole o código PHP acima na área de edição do snippet.
    • Certifique-se de que o snippet está configurado para ser executado em todos os lugares.
  4. Ative o Snippet
    • Clique em Salvar alterações e ativar.

Agora, o código estará ativo no seu site.

Como usar a Tag Dinâmica no Elementor

Após ativar o snippet, você pode exibir o tempo de leitura diretamente no Elementor usando as tags dinâmicas:

  1. Edite uma postagem ou página com o Elementor.
  2. Selecione o widget de Texto onde deseja exibir o tempo de leitura.
  3. Clique no ícone Dinâmico dentro do campo de texto.
  4. Escolha a tag personalizada chamada Tempo de Leitura.
  5. Agora, o Elementor mostrará automaticamente o tempo estimado de leitura da postagem.

Conclusão

Em resumo, ao integrar essa função personalizada com o Code Snippets, você pode adicionar um tempo estimado de leitura às suas postagens no Elementor sem precisar de plugins extras. Certamente, isso melhora a experiência do usuário e mantém seu site mais leve e otimizado.

Mas lembre-se sempre de testar os snippets em um ambiente de desenvolvimento antes de aplicá-los no site ativo para evitar problemas inesperados. Certamente, seus leitores terão uma ideia clara de quanto tempo levará para consumir seu conteúdo!

Estude mais

 

Novo projeto