2 min 26/09/2021

En este post vamos ver como poner el tiempo de lectura y como calcularlo, con su correspondiente iconito por supuesto 😜. Es una funcionalidad muy interesante ya que le da al lector una estimación del tiempo que le puede llevar leer un post. A ver, en mi web igual es una flipada ya que mis post suelen ser cortos, pero imagínate una web que tenga 4000 palabras. Sería interesante saber el tiempo que te lleva leerlo, no??

Como calcular el tiempo de lectura

Primero vamos con algo básico, ¿cómo calculamos el tiempo de lectura de una web?. Eso mismo me pregunté yo cuando Isaac me dijo que quería esa implementación para su web de viajes. Y él mismo me dio la contestación. Si estimamos que una persona lee una media de 300 palabras por minutos la formula mágica se reduce a calcular el número de palabra entre 300 🤯.

Tiempo de lectura = número de palabras / 300

Ahí tienes tu fórmula mágica 😁

Como calculamos el tiempo de lectura para un post de WordPress

Bueno, primero os voy explicar un poco el proceso y luego os meto la fórmula mágica. Tendríamos que coger el contenido del post, convertimos el html en caracteres, luego rendererizamos los shortcodes que haya en el contenido, eliminamos las etiquetas html y contamos las palabras que nos devuelta el último resultado. Con este último valor ya tenemos en número de palabras de nuestro post. Sólo nos queda dividirlo entre 300 y ya tenemos nuestro objetivo. Vale, después del coñazo, aquí tienes lo que venías a buscar, el código que hace esa magia 😜

/**
 * Count the number of words in each article.
 *
 * @param  string $content Post content
 * @return integer $count
 */
function soivigol_count_words( $content ) {
	$decode_content   = html_entity_decode( $content );
	$filter_shortcode = do_shortcode( $decode_content );
	$strip_tags       = wp_strip_all_tags( $filter_shortcode, true );
	$count            = str_word_count( $strip_tags );
	return ceil( $count / 300 ) . ' min';
}

Ahora solo tendrías que llamar esta función donde quieras poner ese número mágico y listo.

Como ponemos el tiempo de lectura en un post

Vamos ver donde tendrías que llamar la función del apartado anterior. Si fuese tan fácil como ponerla donde quieras… 😅

Primero tendremos que llamarla en el hook exacto donde quieras que se imprima. En mi caso uso la plantilla de Kadence (una maravilla dijera lo que dijese en otros posts anteriores 😁). Esta plantilla tiene un hook maravilloso para poner contenido justo antes del contenido que es kadence_single_before_entry_content. Si usas otra plantilla puedes buscar tu hook particular. O también puedes usar la solución que yo te voy a dar que es aplicando un filter en el contenido de la web. El código final quedaría así:

/**
 * Añadir código al inicio del post en el caso de un post.
 *
 * @param string $content Contenido de la web.
 */
function soivigol_my_single_content( $content ) {
	if ( is_single() ) {
		ob_start();
		?>
		<p class="soivigol-count">
			<img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/imgs/clock.svg' ) ?>" alt=""><?php echo esc_html( soivigol_count_words( get_the_content() ) ); ?>
		</p>
		<?php
		$content = ob_get_clean() . $content;
	}
	return $content;
}
add_filter( 'the_content', 'soivigol_my_single_content' );

Os explico un poco. Primero comprobamos que sea un single. En caso afirmativo, añadimos el icono ( yo lo añadí como una imagen desde un svg que me pasó el diseñador en la carpeta del child-theme, pero tu puedes añadir el svg o la imagen desde otro sitio). Hacemos un echo del resultado de la función que creamos antes. A esta función le pasamos como parámetro el contenido de la web que lo recuperamos con get_the_content(). Luego recogemos ese código con ob_get_clean() (acordaros de poner el ob_start() desde donde recogerá el código) y lo añadimos justo antes del $content. Y listo. Ya tenemos nuestro maravilloso contador.

Estilos CSS para que quede más bonito

Os voy a pasar los estilos CSS que le puse yo a mi web para esto.

.soivigol-count img {
	display: inline-block;
	margin-right: 1rem;
	vertical-align: middle;
}

.soivigol-count {
	color: #B6B3BA;
	margin-top: 2rem;
	margin-bottom: 3rem;
	position: relative;
}

Muy sencillito como ves 😁.

Conclusión

Pueden ser cosas que no les demos mucha importancia, pero el lector lo agradece, especialmente en post muy grandes. Seguro que hay algún plugin que hace esto mismo, pero como son unas pocas líneas de código no me molesté en buscar aparte que esto lo hice para un diseño a medida como el de Chavetas por lo que no era muy recomendable tirar de plugins 😅. Y mira, si te sirve, pues mejor que mejor 😉

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *