¿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 | 4 comentarios

¿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

Recientemente, le envié un correo electrónico (boletín cuyo formulario de inscripción se encuentra en la barra lateral de este artículo) para preguntarle 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...

Anuncio: 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 hacer. 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 lectura.

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ñadir 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 en función de los tipos de publicación. Sólo compruébalo. También puede elegir el método de recuento (PHP, JS, etc.).
  2. Puede añadir una nueva columna en el back office. Esta columna aparecerá en la lista de artículos (y/o páginas, según su elección) para obtener las estadísticas de vistas por publicación.
  3. Puedes 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, puedes configurar todo lo que tenga que ver con el número de vistas en la fachada. 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 mostrar o no un icono junto al número de vistas y puede modificar 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, así es como funciona:

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 modelo de material creado 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 editar una plantilla de artículo con el Constructor de Temas

Así que lo tienes, 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 colocarás 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 copie y pegue los códigos cortos anteriores, ya que he añadido deliberadamente un espacio entre los paréntesis para permitir que se muestren.

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 haz clic en "PRUEBA GRATUITA

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

Por último, es posible que no estés del todo satisfecho con la representación final, en este caso, puedes añadir algo de 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
Reading Time Blog Post

1.120 palabras

4

A ti también te debería gustar:

Comment personnaliser le curseur de la souris sur votre site ?

¿Cómo personalizar el cursor del ratón en su sitio?

¿Desea un sitio personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasen por encima de un enlace, el cursor estará totalmente personalizado.

4 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

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Pínchalo en Pinterest

Acciones
Comparte esto