Cómo mostrar el tiempo de lectura estimado y el número de palabras en Div (con Readingtime.js)

Algunas personas (incluido yo) aprecian un poco de cabezas a lo largo de una publicación de blog o, lo que es más importante, cuánto tiempo llevará leer. Una excelente manera de hacerlo es mostrar un tiempo de lectura estimado y / o el número de palabras en la parte superior de las publicaciones del blog. Verá esta función en blogs populares como Medium.com. No debe ser intrusivo ni distraer al usuario de la participación del contenido. Pero puede agregar un buen impulso de UX para aquellos que pasan mucho tiempo devorando en la web. En este tutorial, le mostraremos una manera rápida y fácil de agregar un tiempo de lectura estimado y una serie de palabras a sus publicaciones en el DIV. Readingtime.js La biblioteca que usaremos es simple, fácil y fácil de implementar en su div. Además, puede tener más control sobre el estilo y la colocación del tiempo de lectura y colocar la cantidad de palabras. ¡Todo esto sin tener que confiar en otro complemento!
Agregaremos el tiempo de lectura estimado y el número de palabras en una plantilla de publicación de blog utilizando el constructor de temas. Entonces, una vez agregado a la plantilla, el tiempo de lectura y la cantidad de palabras se mostrarán bellamente en todas sus publicaciones en su sitio. Tire del ojo con un vistazo rápido al tiempo de lectura y la cantidad de palabras que agregaremos a una plantilla de publicación en el Div.



Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Cómo cargar la plantilla Acceda al constructor de temas de la división para cargar la plantilla, navegue por el constructor de temas Divin en su sitio web de WordPress.
Cargue la plantilla del sitio web y luego, en la esquina superior derecha, verá un icono de dos flores. Haga clic en el icono.

Navegue por la pestaña Importar, cargue el archivo JSON que podría descargar en esta publicación y haga clic en “Importar el Div Div Theme Builder”.

Guardar los cambios de la Divic Divic Divic después de haber cargado el archivo, notará una nueva plantilla con un nuevo área corporal que se ha atribuido a todas las publicaciones. Guarde los cambios en el constructor de temas Div tan pronto como desee que se active la plantilla. Pasemos al tutorial para que podamos aprender a construir esto desde cero, ¿verdad?

Cómo mostrar el tiempo de lectura estimado y el número de palabras en el Div

Navegue al generador de tema superior
Haga clic en el icono de portabilidad en la parte superior derecha de la página.
Seleccione la pestaña Importar en la ventana de portabilidad emergente.
Elija / importe la plantilla de consultores comerciales post div (descargue aquí).
Haga clic en el botón Importar
Después de eso, tendrá una publicación para editar la publicación.
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 la publicación de Publicing Publisher, agregue una nueva fila con una sola columna debajo de la fila que contiene los datos de publicación meta en la sección superior.

Después de haber terminado agregar 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):
Tiempo de lectura: (Count de palabras: )


Es importante tener en cuenta que la etiqueta SPAN con la clase “ETA” eventualmente mostrará el tiempo estimado para leer el contenido de la publicación. Y la etiqueta SPAN con la clase “Número de palabras” mostrará el número de palabras del contenido de publicación.

Texto de fuente: Poppins

El peso de la fuente de texto: en negrita

Text -Text Style: TT
Color de texto de texto: #ffffff
Tamaño de texto de texto: 14 PX (escritorio), 12 PX (teléfono)
Texto de la carta de espacio: 2 PX
Alineación de texto: Centro
Fila de estilo Una vez que se complete la configuración del texto, abra la configuración de la fila y actualice lo siguiente:
El ancho de la canaleta: 1
Ancho: 100%

Ancho máximo: 100%
En la pestaña avanzada, actualice el puesto:
Posición: Absoluto
Ubicación: abajo a la izquierda

Agregar el código para agregar el código requerido para generar el tiempo de lectura estimado y el número de palabras, primero, agregue un módulo de código en el módulo de texto.
Usaremos la biblioteca Readingtime.js con un cierto código personalizado para apuntar al área de publicación, el tiempo de lectura de la clase de destino y el número de palabras de conteo de clases de destino. Glind el siguiente código en el bloque de código, asegurándose de envolver el código en las etiquetas de script: (función ($) {
$ (documento) .Ready (function () {

$ (‘. ET_PB_POST_CONTENT’). Readingtime ({

ReadingTiminartarget: $ (‘. Sta’),
WordCountTarget: $ (‘. Word-Count’),
Wordsperminute: 275,
Lang: ‘en’,
});
});
}) (JQuery);
Acerca del código de clase de destino ET_PB_POST_CONTENT es lo que se usa para designar el área de publicación del DIV que contiene el contenido de la publicación, de modo que el código conozca el texto que necesita contar y estimar el tiempo de lectura. Por ejemplo, si usa el cuerpo como objetivo, el código calcularía todo el contenido / texto en toda la página, no solo el contenido del artículo. Y WordCountTarget se atribuye a la clase de conteo de las palabras que agregamos a la otra etiqueta de span en el módulo de texto. Además, no dude en actualizar el valor de las 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 investigué, el adulto promedio lee alrededor de 300 palabras por minuto. Además, siempre puede actualizar el valor del idioma. Por ejemplo, puede reemplazar “EN” para “FR” si desea que el texto se muestre en francés). Para obtener más información, puede consultar la documentación sobre GitHub.
Guarde la apariencia de la plantilla y el generador de temas. Luego navegue a las divisiones> Opciones de tema> Integración. Luego agregue la biblioteca al área del encabezado con las etiquetas de script: src = “https://cdnjs.cloudflare.com/ajax/lbs/resing time/2.0/redingtime.min.js”
Debería verse así …
Resultado final ahora todo lo que tiene que hacer es visitar una publicación de blog en vivo en su sitio para ver el tiempo de lectura estimado y la cantidad de palabras en la parte superior del contenido de la publicación.
Los pensamientos finales agregar una publicación de lectura estimada y un número de palabras a sus publicaciones en su blog es sorprendentemente fácil.Además, puede elegir dónde desea que se muestre el elemento en los patrones de su publicación y estilizarlo utilizando la configuración de desesperación de la Divica Incorporada.¡Esperamos que esto sea útil! Espero tener noticias suyas en los comentarios.¡Suerte!