Muestra el tiempo de lectura de tus artículos sin necesidad de plugins

¿Te gustaría mostrar antes de tus artículos un útil texto que informe a tus visitantes del tiempo de lectura estimado del contenido?, ¿tu tema no incluye esta funcionalidad?, ¿no quieres instalar un plugin solo para esto del tiempo de lectura?

Pues nada, en cuestión de segundos lo vas a tener implementado: rápido, sencillo, perfecto.

Tiempo de lectura sin plugins (copiapega style)

/* Tiempo de lectura estimado antes del contenido */
function ayudawp_tiempo_lectura($content) {
if (is_single()) {
$palabras = str_word_count(strip_tags($content));
$minutos = ceil($palabras / 250); // 250 palabras por minuto
$tiempo = '<p class="ayudawp-tiempo-lectura">⏱️ Tiempo de lectura estimado: ' . $minutos . ' min</p>';
$content = $tiempo . $content;
}
return $content;
}
add_filter('the_content', 'ayudawp_tiempo_lectura');

¿Cómo lo añado a mi web?

Aquí tienes las posibilidades:

• Al final del archivo functions.php de tu tema (hijo) activo.
• Usando un plugin de fragmentos de código.
• Como plugin independiente personalizado.
• En un plugin MU personalizado.

Da un poco lo mismo, funciona elijas el método que elijas, pero en este caso mi consejo es que lo añadas al archivo functions.php del tema (hijo) activo, ya que es algo que afecta a la visualización … en el tema activo.

¿Qué hace el código?

Algo sencillo pero que funciona genial:

1. «Lee» el artículo y cuenta las palabras que tenga.
2. Calcula a razón de 250 palabras por minuto (puedes cambiarlo).
3. Muestra el cálculo en minutos con un sencillo texto e icono de cronógrafo, justo antes del contenido.

El resultado es instantáneo…

¿Qué puedo cambiar en el código?

De su funcionalidad básica puedes cambiar lo siguiente:

• El texto.
• El icono (o no mostrarlo).
• Dónde mostrarlo, por defecto solo en el contenido individual (is_single), pero puedes ampliarlo con condicionales.
• El cálculo de 250 palabras por minuto por otro que te parezca más adecuado (ceil($palabras / 250)).

¿Y se puede cambiar el aspecto?

Claro, puedes aplicar al texto un poco de estilo para que la visualización se integre a la perfección con tu tema. Solo tienes que crear una clase llamada ayudawp-tiempo-lectura y añadirle el CSS que quieras.

Si no se te ocurre nada aquí te dejo unos ejemplos majetes para la clase ayudawp-tiempo-lectura:

Opción 1: minimalista con icono:

.ayudawp-tiempo-lectura {
font-size: 14px;
color: #666;
margin: 10px 0;
padding: 8px 0;
border-bottom: 1px solid #eee;
font-style: italic;
}

Opción 2: caja con fondo suave

.ayudawp-tiempo-lectura {
    background: #f8f9fa;
    padding: 12px 16px;
    border-left: 4px solid #007cba;
    margin: 15px 0;
    font-size: 14px;
    color: #555;
    border-radius: 0 4px 4px 0;}

Opción 3: estilo botón

.ayudawp-tiempo-lectura {
    display: inline-block;
    background: #007cba;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Opción 4: con gradiente y sombra moderna

.ayudawp-tiempo-lectura {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display: inline-block;}

Opción 5: estilo periódico clásico

.ayudawp-tiempo-lectura {
    font-family: Georgia, serif;
    font-size: 13px;
    color: #333;
    text-align: center;
    margin: 20px 0;
    padding: 8px 0;
    border-top: 2px solid #333;
    border-bottom: 1px solid #333;
    text-transform: uppercase;
    letter-spacing: 1px;}

Opción 6: con animación al pasar el cursor

.ayudawp-tiempo-lectura {
    background: #2c3e50;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    margin: 10px 0;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: default;
}

.ayudawp-tiempo-lectura:hover {
    background: #34495e;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);}

Opción 7: estilo vidrio-morfismo

.ayudawp-tiempo-lectura {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    color: #333;
    margin: 15px 0;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

Opción 8: estilo amarillo estiloso

.ayudawp-tiempo-lectura {
    position: relative;
    background: #fff3cd;
    color: #856404;
    padding: 8px 12px 8px 35px;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    font-size: 13px;
    margin: 12px 0;
}

.ayudawp-tiempo-lectura::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

Opción 9: estilo tarjeta flotante

.ayudawp-tiempo-lectura {
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #555;
    margin: 20px 0;
    border: 2px solid #f0f0f0;
    transition: box-shadow 0.3s ease;
}

.ayudawp-tiempo-lectura:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

Opción 10: modo oscuro automático

.ayudawp-tiempo-lectura {
    background: var(--bg-color, #f5f5f5);
    color: var(--text-color, #333);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin: 15px 0;
    border: 1px solid var(--border-color, #ddd);
}

@media (prefers-color-scheme: dark) {
    .ayudawp-tiempo-lectura {
        --bg-color: #2d2d2d;
        --text-color: #e0e0e0;
        --border-color: #444;
    }
}

Puedes elegir el que mejor se adapte al diseño de tu sitio, aquí los tienes para que te decidas…

El más versátil es probablemente la opción 2 (caja con fondo suave) ya que funciona bien en la mayoría de temas.

¿Te ha gustado?, ¿lo vas a poner en tu web? Anda, cuéntame si lo has añadido y qué opción de estilo elegiste 😉

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!