Introducción

Este tutorial explica paso a paso cómo crear etiquetas de lectura estimada (reading time) en WordPress con estilo de chip: una pequeña etiqueta visual que indica el tiempo aproximado que tardará el lector en completar el artículo. Incluye código listo para functions.php, un shortcode, un tag de plantilla, una opción para almacenar el valor en meta para rendimiento, y estilos CSS óptimos y accesibles.

Concepto y criterios

La aproximación común consiste en contar palabras del contenido y dividir por una velocidad media de lectura (por defecto 200 palabras por minuto). El resultado se redondea y se muestra con una unidad (min).

Decisiones recomendadas

• Velocidad de lectura: 200 wpm por defecto, configurable.
• Redondeo: redondear al número entero más cercano mostrar menos de 1 min o 1 min según preferencia.
• Accesibilidad: incluir texto para lectores de pantalla y elementos aria cuando proceda.
• Rendimiento: opción para guardar el valor en meta para evitar cálculos repetidos en sitios con muchas visitas.

Instrucciones paso a paso

1. Crear función PHP para calcular el tiempo de lectura.
2. Registrar un shortcode y una función de plantilla para mostrar el chip.
3. Añadir estilos CSS para el chip.
4. (Opcional) Guardar el tiempo calculado en postmeta en el hook save_post.
5. Incluir el shortcode en contenidos o llamar la función desde plantillas.

Código: función principal, shortcode y template tag

Añade el siguiente bloque al final de functions.php de tu tema hijo (child theme) o en un plugin personalizado.

/
  Obtener tiempo de lectura estimado (en minutos).
 
  @param WP_Postnull post
  @param int wpm Palabras por minuto por defecto.
  @param bool round_up Si true redondea hacia arriba si false redondea al entero más cercano.
  @return int Tiempo estimado en minutos (0 indica lt1).
 /
function tema_get_reading_time( post = null, wpm = 200, round_up = false ) {
    if ( is_null( post ) ) {
        global post
    }
    if ( ! post instanceof WP_Post ) {
        return 0
    }

    // Obtener contenido sin shortcodes ni etiquetas HTML
    content = strip_tags( strip_shortcodes( post->post_content ) )
    word_count = str_word_count( html_entity_decode( content ) )

    if ( wpm <= 0 ) {
        wpm = 200
    }

    minutes = (float) word_count / (float) wpm
    if ( round_up ) {
        minutes = (int) ceil( minutes )
    } else {
        minutes = (int) max( 0, round( minutes ) )
    }

    return (int) minutes
}

/
  Genera el HTML del chip de tiempo de lectura.
 
  @param array args [wpm=>200, prefix=>, suffix=>min, show_icon=>true, class=> ]
  @return string HTML listo para imprimir (sin echo).
 /
function tema_get_reading_time_chip( args = array() ) {
    defaults = array(
        wpm       => 200,
        prefix    => ,        // texto antes del número, ej.  o ≈
        suffix    => min,     // texto tras el número
        show_icon => true,
        class     => ,        // clases adicionales
        post      => null,
    )
    args = wp_parse_args( args, defaults )

    minutes = tema_get_reading_time( args[post], args[wpm] )

    // Texto legible para pantallas (accesible)
    if ( minutes <= 0 ) {
        text = Menos de 1  . args[suffix]
    } elseif ( minutes === 1 ) {
        text = 1  . args[suffix]
    } else {
        text = minutes .   . args[suffix]
    }

    // Construir HTML del chip (se recomienda usar clase .read-time-chip)
    icon_html = 
    if ( args[show_icon] ) {
        // Icono simple Unicode para evitar dependencias se puede sustituir por SVG si se desea
        icon_html = ⏱nbsp
    }

    // Atributo aria-label para contexto
    aria_label = esc_attr( text )

    class_attr = trim( read-time-chip  . args[class] )

    html  = 
    html .= icon_html .  . esc_html( args[prefix] . text ) . 
    html .= 

    return html
}

/
  Shortcode [reading_time] para insertar el chip en el contenido.
  Uso: [reading_time wpm=200 show_icon=1 prefix=≈  suffix=min class=mi-clase]
 /
function tema_reading_time_shortcode( atts ) {
    atts = shortcode_atts( array(
        wpm       => 200,
        prefix    => ,
        suffix    => min,
        show_icon => 1,
        class     => ,
    ), atts, reading_time )

    args = array(
        wpm       => intval( atts[wpm] ),
        prefix    => atts[prefix],
        suffix    => atts[suffix],
        show_icon => filter_var( atts[show_icon], FILTER_VALIDATE_BOOLEAN ),
        class     => sanitize_text_field( atts[class] ),
    )

    return tema_get_reading_time_chip( args )
}
add_shortcode( reading_time, tema_reading_time_shortcode )

/
  Función helper para llamar desde plantillas PHP:
  Ejemplo: echo tema_the_reading_time_chip()
 /
function tema_the_reading_time_chip( args = array() ) {
    echo tema_get_reading_time_chip( args )
}

CSS: estilos para el chip (estética y accesibilidad)

Pega este CSS en style.css de tu tema hijo o en un archivo CSS que enqueues. Ajusta colores y tamaños según tu diseño.

/ Chip básico /
.read-time-chip{
    display: inline-flex
    align-items: center
    gap: .4rem
    background-color: rgba(0,0,0,0.06)
    color: #111
    padding: .25rem .6rem
    border-radius: 999px
    font-size: .85rem
    line-height: 1
    vertical-align: middle
    text-decoration: none
}

/ Icono dentro del chip /
.read-time-icon{
    font-size: 0.95rem
    line-height: 1
}

/ Ajustes para temas oscuros (si tu tema tiene .dark-mode) /
.dark-mode .read-time-chip{
    background-color: rgba(255,255,255,0.06)
    color: #fff
}

/ Opcional: variante delimitada /
.read-time-chip.outline{
    background: transparent
    border: 1px solid rgba(0,0,0,0.08)
}

/ Si usas un screen-reader-text para accesibilidad /
.screen-reader-text{
    position: absolute !important
    height: 1px width: 1px
    overflow: hidden
    clip: rect(1px, 1px, 1px, 1px)
    white-space: nowrap
}

Opción: guardar el tiempo en post meta al guardar el post

Para sitios con muchas lecturas, es conveniente almacenar el tiempo calculado en postmeta y actualizarlo solo cuando el contenido cambia.

/
  Calcular y guardar tiempo de lectura en postmeta al guardar el post.
 /
function tema_save_reading_time_meta( post_id, post, update ) {
    // Evitar autosaves y revisiones
    if ( wp_is_post_autosave( post_id )  wp_is_post_revision( post_id ) ) {
        return
    }

    if ( post !== post->post_type ) {
        return
    }

    minutes = tema_get_reading_time( post, 200, true ) // redondear hacia arriba
    update_post_meta( post_id, _reading_time_minutes, minutes )
}
add_action( save_post, tema_save_reading_time_meta, 10, 3 )

/
  Recuperar desde meta si existe.
 /
function tema_get_reading_time_from_meta( post_id = null ) {
    if ( is_null( post_id ) ) {
        global post
        if ( ! post instanceof WP_Post ) {
            return 0
        }
        post_id = post->ID
    }

    meta = get_post_meta( post_id, _reading_time_minutes, true )
    if ( meta !==  ) {
        return intval( meta )
    }

    // Fallback: calcular sobre la marcha
    post_obj = get_post( post_id )
    return tema_get_reading_time( post_obj )
}

Cómo usarlo en plantillas y en el contenido

1. Shortcode en el contenido del editor: [reading_time]
2. Shortcode con opciones: [reading_time wpm=250 prefix=≈ suffix= min show_icon=0]
3. En plantillas PHP (por ejemplo single.php):

/ Imprimir el chip con helper /
if ( function_exists( tema_the_reading_time_chip ) ) {
    tema_the_reading_time_chip()
}

/ O personalizar parámetros /
echo tema_get_reading_time_chip( array(
    wpm => 220,
    prefix => ≈ ,
    suffix => min,
    show_icon => true,
    class => my-custom-class,
) )

Encolar CSS desde functions.php (opcional)

Si prefieres no tocar style.css, crea un archivo CSS en tu tema hijo y enquéalo:

function tema_enqueue_reading_time_styles() {
    wp_enqueue_style( tema-reading-time, get_stylesheet_directory_uri() . /assets/css/reading-time.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_enqueue_reading_time_styles )

Buenas prácticas y consideraciones

• Compatibilidad: el shortcode y la función no dependen de plugins externos funcionan en cualquier tema que permita shortcodes.
• Internationalización: si vas a distribuir, envuelve textos en funciones __() o _e() para traducción. En este artículo usamos cadenas directas por simplicidad.
• Cache y rendimiento: si calculas en cada carga, el coste es bajo (contar palabras) pero en sites con mucha carga prefiere guardar en postmeta.
• Accesibilidad: el chip incluye aria-label para que lectores de pantalla obtengan la información de forma clara evita depender únicamente de iconos.
• Estética: adapta colores y tamaños al diseño usa variables CSS en temas modernos para coherencia.

Ejemplos visuales de uso

Uso básico en el contenido (editor):

[reading_time]

En plantilla PHP para mostrar antes del título:

/ dentro de single.php, antes del título /
echo tema_get_reading_time_chip( array( class => before-title ) )
the_title( 
, 
 )

Tabla resumen de opciones

Opción	Descripción
wpm	Palabras por minuto usadas para el cálculo (ej. 200)
prefix	Texto antes del número (ej. ≈ )
suffix	Unidad de tiempo (ej. min)
show_icon	Mostrar o no el icono dentro del chip
class	Clases CSS adicionales para personalizar

Conclusión

Integrar una etiqueta de lectura estimada es sencillo y aporta valor al lector al gestionar expectativas. Con el código anterior tienes una solución completa: cálculo preciso, shortcode, función para plantillas, almacenamiento opcional en meta para rendimiento y estilos listos para usar. Adapta los detalles visuales a tu tema y considera internacionalizar las cadenas si publicarás el plugin o snippet.