Divi Tips 99

¿Cómo añadir un tiempo de lectura y un número de visitas a las entradas de tu blog?

Publicado el 23/06/2020 | 6 comentarios

1.120 palabras

4

¿Habrás notado la pequeña barra al final de los artículos de Divi Tips? En esta barra, encontrarás el número de palabras del artículo, el tiempo de lectura, el número de vistas y un sistema de aplausos.

barre d'infos pour articles

Hace poco le envié un correo electrónico (boletín con el formulario de inscripción en la barra lateral de este artículo) preguntándole si estaría interesado en aprender a añadir estos datos a sus artículos. Has sido muy entusiasta. Así que aquí está mi respuesta...

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Contar palabras y tiempo de lectura con WP Word Count

WP Word Count
Añadir el número de palabras y el tiempo de lectura

WP Word Count es un extensión gratuita (freemium) y ligero disponible en el directorio oficial de extensiones de WordPress.

Sus ajustes son fáciles de realizar. Después de instalar y activar la extensión, esto es lo que tiene que hacer:

Parametrage Wp Word Count
  1. Vaya a la pestaña Recuento de palabras > Calcular.
  2. Haga clic en "Calcular el recuento de palabras" y espere. La extensión recuperará el número de palabras de sus mensajes.
  3. A continuación, en la pestaña Tiempo de lectura, puede introducir cuántas palabras corresponden a un minuto de lectura. Por defecto, 250 palabras equivalen a 1 minuto de lectura.
  4. Puede activar la visualización automática del tiempo de lectura en sus publicaciones simplemente marcando la casilla prevista para ello (no es útil para el resto del tutorial).
  5. También puede insertar un texto que se colocará antes y/o después del tiempo de reproducción.

Por último, en las otras pestañas (Contenido principal, Todo el contenido...), encontrará estadísticas: cuántos artículos, cuántas páginas, cuántas palabras, el tiempo total de lectura, etc.

2 - Mostrar el número de vistas de un artículo con el contador de vistas de publicaciones

Post View Counter
Añade el número de vistas

Post Views Counter es también un plugin gratuito y fácil de configurar. Lo bueno de este plugin es que puedes mostrar o no el número de vistas de forma pública. Esto significa que puede instalar el contador de visitas para fines estadísticos en el back office.

Una vez instalada y activada la extensión, encontrará sus opciones de configuración en la pestaña Configuración > Contador de visitas. Sus ajustes están separados en 2 pestañas: General y Vista.

Parametrage Post View Counter
  1. Puede activar el recuento de vistas según los tipos de publicación. Sólo compruébalo. También puede decidir el método de recuento (PHP, JS, etc.).
  2. Puede añadir una nueva columna en el back office. Aparecerá en la lista de artículos (y/o páginas, según sus elecciones) para obtener las estadísticas de vistas por publicación.
  3. Puede ajustar los métodos de recuento de fotogramas y los intervalos.
  4. Puede excluir a determinados visitantes del recuento.
  5. A continuación, desde la pestaña Vista, se puede configurar todo lo que tiene que ver con la visualización del número de vistas en la parte delantera. Por ejemplo, puede añadir un texto junto al número de vistas.
  6. Puede insertar automáticamente el número de vistas según el tipo de publicación (no es útil para el resto del tutorial).
  7. Pero también la posición de la visualización automática, por ejemplo: antes del contenido.
  8. Por último, puede elegir si desea mostrar o no un icono junto al número de vistas y puede cambiar el el icono Dashicons, que es la fuente oficial de iconos de WordPress.

Eso es todo, es una extensión bastante sencilla pero las opciones son suficientes para mejorar las entradas de tu blog.

3 - Añadir aplausos con WP Applaud

Wp Applaud
Añadir un sistema de votación

El último elemento que te sugiero añadir a tus artículos es un sistema de votación con WP Applaud. Pero podría haber elegido un sistema de estrellas como Clasificación de estrellas KKpor ejemplo.

Esta extensión es gratuita pero, digámoslo ya, no se actualiza a menudo...

Una vez instalado y activado, funciona como sigue:

Parametrages Wp Applaud
  1. Ve a la pestaña WPApplaudir para marcar los tipos de publicaciones en las que quieres que aparezca el "pequeño aplauso".
  2. Puede excluir las publicaciones manualmente.
  3. Puedes desactivar el CSS para incrustar el tuyo propio.
  4. Puede elegir el método de recuento (Ajax y recuento máximo por usuario).
  5. Tiene la posibilidad de añadir títulos personalizados.
  6. Por último, y esto es lo que más nos interesa para el resto del tutorial: los otros métodos de visualización. Puede utilizar un código corto para mostrar el aplauso en el lugar deseado en lugar de hacerlo automáticamente.

4 - Integrar elementos en las entradas del blog con el Theme Builder

Ahora que has instalado y configurado las 3 extensiones, te sugiero que muestres esta información de lectura en las entradas de tu blog.

Para ello necesitará un plantilla de artículo creada con el Constructor de temas. Si aún no lo ha hecho, puede seguir este tutorial para crear una plantilla de artículo Divi.

Modele Article Theme Builder
Crear o modificar una plantilla de artículo con el Theme Builder

Como ves, creas o modificas tu plantilla de artículo creada con el Theme Builder.

1 Ajout Ligne Modele Article
Insertar una nueva línea 4/4

Añade una nueva fila (el "+" verde) dividida en 4 columnas.

2 Ajout Shortcodes

En cada columna de esta fila, se añade un módulo de texto en el que se colocan los shortcodes correspondientes:

  • [ wp-word-count ]* para mostrar el número de palabras.
  • [ wp-word-count-reading-time ]* para mostrar el tiempo de lectura.
  • [para mostrar el número de vistas.
  • [ wp_applaud ]* para mostrar el sistema de votación.

*Nota: no copies y pegues los shortcodes anteriores ya que he añadido deliberadamente un espacio entre los paréntesis para que se puedan visualizar.

Así de sencillo, aquí está el resultado:

3 Resultat Infos Lecture
Mostrar el número de vistas y el tiempo de lectura dentro de un artículo de Divi

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

5 - Ajustar la visualización con un poco de CSS

Por último, es posible que no esté del todo satisfecho con la representación final, en cuyo caso puede añadir algún código CSS para perfeccionar la visualización.

En el siguiente ejemplo, he añadido un Módulo de código con un poco de CSS pero tienes muchas otras soluciones para añadir código a Divi.

Ajuster Affichage Infos Articles
Ajustar la visualización con CSS si es necesario

Por ejemplo, puede añadir un "antes" y un "después" para mostrar el texto en torno al tiempo de lectura. Esto es posible en las opciones del plugin WP Word Count pero la visual no es óptima... También se puede cambiar el color del contador de votos (WP Applaud)...

Entonces, ¿qué te parecen estos consejos para mejorar las entradas de tu blog con Divi?

Ajouter Temps De Lecture Article WordPress
Ajouter Compteur De Vue Articles WordPress
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

La nouvelle interface de Divi 5

La nouvelle interface de Divi 5

Découvrez la nouvelle interface de Divi 5 : les comparaisons avec Divi 4 et les similitudes avec Gutenberg (article + vidéo). Alerte spoiler : ça déchire 💣 !

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

6 Commentaires

  1. Harold

    Magnifique tout ça, merci !

  2. Decoster

    Bonjour,
    Merci pour cet article très intéressant.
    Comment procéder pour afficher le nombre de mots et le temps de lecture juste sous le titre de l’article, à la suite des méta.
    J’aurais bien voulu joindre une capture d’écran mais je ne trouve pas le lien ???
    Merci.
    Bien cordialement.

  3. Mandy Cee

    Merci Beaucoup

  4. Elo G

    Bonjour,

    l’extension n’est plus disponible depuis Octobre 2022 pour problème de sécurité.

    Serait-il possible d’avoir un autre tuto ?

    Merci 🙂

  5. Lycia Diaz

    Ah mince, il faut que je trouve une autre solution alors.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.