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

Algunas personas (incluyéndome a mí) aprecian un pequeño aviso sobre la longitud de una publicación de blog o, lo que es más importante, cuánto tiempo va a tomar leer. Una excelente manera de hacer esto es mostrar un tiempo de lectura estimado y / o recuento de palabras en la parte superior de las publicaciones de su blog. Puedes ver esta función en blogs populares como medium.com. No tiene que ser intrusivo o distraer al usuario de interactuar 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 readingTime.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 recuento 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 agrega a la plantilla, el tiempo de lectura y el recuento de palabras se mostrarán muy bien en todas sus publicaciones en su sitio.

Empecemos.

Vistazo

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

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Cómo cargar la plantilla

Ir a Divi Theme Builder

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

Cargar plantilla de sitio web

Luego, en la esquina superior derecha, verá 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 Divi Theme Builder'.

Guardar cambios en Divi Theme Builder

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 esto desde cero, ¿de acuerdo?

Cómo mostrar el tiempo de lectura estimado de la publicación 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 consultor comercial de Divi (descargar aquí).
5. Haga clic en el botón Importar

Después de eso, tendrá 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):

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

Lo importante a recordar es que la etiqueta span 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 "recuento de palabras" mostrará el recuento de palabras del contenido de la publicación.

Aplicar estilo al texto del tiempo de lectura

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

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

Diseñando la Fila

Una vez que la configuración de texto esté completa, abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

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

• Posición: Absoluto
• 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 recuento de palabras, primero, agregue un módulo de código debajo del módulo de texto.

Vamos a utilizar la biblioteca readingtime.js con algún código personalizado para apuntar nuestra área de contenido de la entrada, el tiempo de lectura eta clase de destino, y la clase de destino cuenta de la palabra número de palabras.

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

(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 utiliza 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ó body como objetivo, el código calcularía todo el contenido / texto en toda la página, 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 el wordCountTarget se asigna a la clase de recuento de palabras que agregamos a la otra etiqueta span en el módulo de texto.

Además, siéntase libre de 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 alrededor de 300 palabras por minuto. Además, siempre puede actualizar el valor del idioma. 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, navegue a Divi> Opciones de tema> Integraciones.

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

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 de una publicación 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 darle estilo utilizando la configuración de diseño Divi incorporada. ¡Con suerte, esto será útil!

Espero tener noticias tuyas en los comentarios.

¡Salud!