Cómo mostrar el tiempo de lectura estimado y el recuento de palabras en Divi (con ReadingTime.js)

Algunas personas (incluyéndome a mí) aprecian un poco de anticipación sobre la longitud de una publicación de blog o, lo que es más importante, cuánto tiempo llevará leerla. Una excelente manera de hacer esto es mostrar un tiempo de lectura estimado y/o un recuento de palabras en la parte superior de las publicaciones de tu blog. Verá esta función en blogs populares como medium.com . No tiene que ser intrusivo o distraer al usuario para que no interactúe con el contenido. Pero puede agregar un buen impulso de UX para aquellos que pasan mucho tiempo devorando contenido en la web.

En este tutorial, le mostraremos una manera rápida y fácil de agregar un tiempo de lectura estimado y un recuento de palabras a las publicaciones de su blog Divi . La biblioteca readTime.js que vamos a usar es simple, liviana y fácil de implementar en su sitio Divi. Además, puede tener más control sobre el estilo y la ubicación del tiempo de lectura y la ubicación del conteo de palabras. ¡Todo esto sin tener que depender de otro plugin!

Agregaremos el tiempo de lectura estimado y el recuento de palabras a una plantilla de publicación de blog utilizando Divi Theme Builder . Entonces, una vez que se agregue a la plantilla, el tiempo de lectura y el conteo de palabras se mostrarán bien en todas sus publicaciones en todo su sitio.

Empecemos.

Vistazo

Aquí hay un vistazo rápido al tiempo de lectura y al conteo de palabras que agregaremos a una plantilla de publicación en Divi.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Cómo cargar la plantilla

Ir al Creador de temas Divi

Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.

Subir plantilla de sitio web

Luego, en la esquina superior derecha, verás un ícono con dos flechas. Haga clic en el icono.

Vaya a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en ‘ Importar plantillas de Divi Theme Builder ‘.

Guardar los cambios del generador de temas Divi

Una vez que haya cargado el archivo, notará una nueva plantilla con una nueva área del cuerpo que se ha asignado a Todas las publicaciones. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.

Vayamos al tutorial para que podamos aprender a construir esta cosa desde cero, ¿de acuerdo?

Cómo mostrar el tiempo de lectura estimado y el recuento de palabras en Divi

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Navega hasta Divi Theme Builder
  2. Haga clic en el icono de portabilidad en la parte superior derecha de la página.
  3. Seleccione la pestaña Importar en la ventana emergente Portabilidad.
  4. Elija/importe el archivo de plantilla de publicación de Divi Business Consultant ( descárguelo aquí ).
  5. Haga clic en el botón Importar

Después de eso, tendrás una plantilla de publicación lista para editar.

Agregar el texto/HTML a la plantilla de publicación

Para editar la plantilla de publicación, haga clic en el icono de edición en el área del cuerpo personalizado.

En el editor de diseño de la publicación, agregue una nueva fila de una columna debajo de la fila que contiene los metadatos de la publicación en la sección superior del diseño.

Una vez hecho esto, agregue un módulo de texto a la nueva fila.

En la configuración del módulo de texto, pegue el siguiente HTML dentro del cuerpo (usando la pestaña de texto):

01
<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

Lo importante que debe recordar es que la etiqueta de intervalo con la clase «eta» eventualmente mostrará el tiempo de lectura estimado del contenido de la publicación. Y la etiqueta de intervalo con la clase «conteo de palabras» mostrará el conteo de palabras del contenido de la publicación.

Dar estilo al texto de tiempo de lectura

En la pestaña de diseño, actualice los estilos de texto de la siguiente manera:

  • Fuente del texto: Poppins
  • Peso de fuente de texto: Negrita
  • Estilo de fuente de texto: TT
  • Texto Color del texto: #ffffff
  • Texto Tamaño del texto: 14 px (escritorio), 12 px (teléfono)
  • Espaciado entre letras de texto: 2px
  • Alineación de texto: centro

Estilo de la fila

Una vez completada la configuración de texto, abra la configuración de la fila y actualice lo siguiente:

  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%

En la pestaña Avanzado, actualice la posición:

  • Posición: Absoluta
  • Ubicación: abajo a la izquierda

Agregar el código

Para agregar el código necesario para generar el tiempo de lectura estimado y el conteo de palabras, primero agregue un módulo de código debajo del módulo de texto.

Vamos a utilizar la biblioteca readtime.js con un código personalizado para apuntar a nuestra área de contenido de publicación, la clase objetivo de tiempo de lectura eta y la clase objetivo de conteo de palabras word-count .

Pegue el siguiente código en el bloque de código asegurándose de incluir el código en las etiquetas del script :

01
02
03
04
05
06
07
08
09
10
(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'),
wordsPerMinute: 275,
lang: 'en',
});
});
})( jQuery );

Sobre el Código

La clase de destino et_pb_post_content es lo que se usa para designar el área de contenido de la publicación en Divi que contiene el contenido de la publicación para que el código sepa el texto que necesita para contar y estimar el tiempo de lectura. Por ejemplo, si usó el cuerpo como objetivo, el código calcularía todo el contenido/texto en la página completa, no solo el contenido del artículo.

ReadingTimeTarget se asigna a la clase eta que corresponde a la clase que agregamos a la etiqueta span en el módulo de texto . Y wordCountTarget se asigna a la clase de recuento de palabras que agregamos a la otra etiqueta de intervalo en el módulo de texto.

Además, no dude en actualizar el valor de palabras por minuto (actualmente 275) para representar lo que cree que debería ser. Por supuesto, esto afectará el tiempo de lectura mostrado. Por lo que he investigado, el adulto promedio lee unas 300 palabras por minuto. Además, siempre puede actualizar el valor del idioma también. Por ejemplo, puede reemplazar ‘en’ por ‘fr’ si desea que el texto se muestre en francés). Para obtener más información, puede consultar la documentación en github .

Guarde el diseño de la plantilla y el generador de temas.

Luego, navega a Divi > Opciones de tema > Integraciones.

Luego agregue la biblioteca al área del encabezado con las etiquetas de script :

01
src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

Debe tener un aspecto como este…

Resultado final

Ahora todo lo que necesita hacer es visitar una publicación de blog en vivo en su sitio para ver el tiempo de lectura estimado y el recuento de palabras en la parte superior del contenido de la publicación.

Pensamientos finales

Agregar un tiempo de lectura estimado y un recuento de palabras a las publicaciones de su blog Divi es sorprendentemente fácil. Además, puede elegir dónde desea que se muestre el elemento en su plantilla de publicación y diseñarlo utilizando la configuración de diseño integrada de Divi. ¡Con suerte, esto será útil!

Espero escuchar de usted en los comentarios.

¡Salud!