Este tutorial explica paso a paso cómo agregar un indicador visual de last updated (última actualización) en WordPress usando una clase CSS personalizada. Incluye varias formas de integrarlo (directo en la plantilla, con filtro, como shortcode), cómo añadir una clase al contenedor del post cuando corresponde, ejemplos de CSS para diseñarlo y una opción para mostrar la fecha relativa con JavaScript. Todos los ejemplos de código están listados para copiar y pegar respeta la ubicación (por ejemplo, functions.php o plantilla) según se indica.
Por qué mostrar last updated
- Transparencia para el usuario: Indica si el contenido ha sido revisado o actualizado.
- Confianza y UX: Los lectores valoran contenido actualizado, especialmente en temas técnicos o legales.
- SEO y CTR: En algunos casos mejora la tasa de clics desde resultados o redes si se muestra la fecha de actualización.
Consideraciones previas
- Decide si mostrar siempre la fecha o solo cuando la fecha de modificación sea diferente de la de publicación.
- Ten en cuenta la caché: si usas páginas cacheadas, la fecha debe actualizarse al purgar cache después de editar.
- Localización: usa las funciones de WordPress para formatear la fecha en el idioma del sitio.
- Accesibilidad: añade atributos claros (por ejemplo, aria-label) para lectores de pantalla.
Método A — Insertar directamente en la plantilla (recomendado para temas)
Agregar una función en functions.php que genere el HTML y luego llamarla desde single.php o desde la plantilla de contenido (content.php). Este método es sencillo y ofrece control total sobre la ubicación del elemento.
Ejemplo de función para functions.php:
lt?php
// functions.php
function mi_last_updated_html( post = null ) {
if ( ! post ) {
global post
}
if ( ! post ) {
return
}
// Timestamps en Unix
modified_ts = get_post_modified_time( U, true, post )
published_ts = get_post_time( U, true, post )
// Mostrar solo si ha sido modificado después de la publicación
if ( modified_ts <= published_ts ) {
return
}
// Fecha formateada y atributo datetime (ISO 8601)
date_display = get_the_modified_date( get_option( date_format ), post )
datetime_attr = get_post_modified_time( c, true, post )
// Construir HTML seguro
label = esc_html__( Actualizado:, textdomain )
html = sprintf(
ltspan class=last-updated aria-label=%sgtltbgt%slt/bgt lttime datetime=%sgt%slt/timegtlt/spangt,
esc_attr( sprintf( %s %s, label, date_display ) ),
esc_html( label ),
esc_attr( datetime_attr ),
esc_html( date_display )
)
/
Filtro para permitir modificaciones por plugins o child themes
return string HTML
/
return apply_filters( mi_last_updated_html, html, post )
}
?gt
En la plantilla (por ejemplo, single.php o content-single.php) llama a la función donde quieras que aparezca:
lt?php // dentro del loop, en la cabecera del post o donde convenga echo wp_kses_post( mi_last_updated_html( get_post() ) ) ?gt
Método B — Añadir automáticamente al contenido con un filtro (the_content)
Si no quieres tocar las plantillas, puedes añadir el marcador al final del contenido usando un filtro. Ten en cuenta que así aparecerá dentro del contenido y no en la cabecera del post.
lt?php
// functions.php
function mi_append_last_updated_to_content( content ) {
if ( ! is_singular() ! in_the_loop() ! is_main_query() ) {
return content
}
global post
html = mi_last_updated_html( post )
if ( empty( html ) ) {
return content
}
// Añadir al inicio o al final: aquí al inicio del contenido
return html . content
}
add_filter( the_content, mi_append_last_updated_to_content, 20 )
?gt
Método C — Shortcode
Crear un shortcode permite colocar la fecha de actualización en cualquier página, widget o bloque que soporte shortcodes.
lt?php
// functions.php
function mi_last_updated_shortcode( atts ) {
global post
if ( ! post ) {
return
}
return mi_last_updated_html( post )
}
add_shortcode( last_updated, mi_last_updated_shortcode )
?gt
Uso en el editor: [last_updated]
Añadir una clase personalizada al contenedor del post (post_class)
Es útil añadir una clase al elemento del post si quieres aplicar estilos que dependan de si existe una última actualización.
lt?php
// functions.php
function mi_add_last_updated_post_class( classes, class, post_id ) {
post = get_post( post_id )
if ( ! post ) {
return classes
}
modified_ts = get_post_modified_time( U, true, post )
published_ts = get_post_time( U, true, post )
if ( modified_ts > published_ts ) {
classes[] = has-last-updated
} else {
classes[] = no-last-updated
}
return classes
}
add_filter( post_class, mi_add_last_updated_post_class, 10, 3 )
?gt
CSS: ejemplo de estilos visuales
Ejemplo de reglas CSS que puedes poner en style.css del tema o en el panel de personalización (CSS adicional).
/ Estilo básico para la etiqueta /
.last-updated {
display: inline-flex
align-items: center
gap: .4rem
font-size: .95rem
color: #374151 / gris oscuro /
background: #f3f4f6 / fondo suave /
border-radius: 6px
padding: .25rem .5rem
border: 1px solid rgba(0,0,0,0.04)
}
/ Estilizar la palabra actualizada si quieres resaltar /
.last-updated b {
font-weight: 600
color: #111827
margin-right: .25rem
}
/ Ejemplo: si el contenedor del post tiene la clase /
.has-last-updated .post-header .last-updated {
/ se puede colocar dentro de la cabecera del post /
margin-top: .5rem
}
/ Ocultar en pantallas muy pequeñas si es necesario /
@media (max-width: 480px) {
.last-updated {
display: none
}
}
JavaScript opcional: fecha relativa (ej. hace 3 días)
Si prefieres mostrar la fecha relativa al lector puedes convertir la fecha ISO generada por PHP en un texto relativo con JS. El siguiente snippet usa Intl.RelativeTimeFormat (mejor en navegadores modernos).
// Colocar en un archivo JS encolado o en footer (solo como ejemplo)
document.addEventListener(DOMContentLoaded, function() {
const elements = document.querySelectorAll(.last-updated time)
if (!elements.length) return
function timeAgo(date) {
const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
const intervals = {
year: 31536000,
month: 2592000,
week: 604800,
day: 86400,
hour: 3600,
minute: 60,
second: 1
}
for (const i in intervals) {
const interval = intervals[i]
const count = Math.floor(seconds / interval)
if (count >= 1) {
return { count: count, unit: i }
}
}
return { count: 0, unit: second }
}
const rtf = new Intl.RelativeTimeFormat(document.documentElement.lang es, { numeric: auto })
elements.forEach(function(timeEl) {
const iso = timeEl.getAttribute(datetime)
if (!iso) return
const date = new Date(iso)
const diff = timeAgo(date)
const relative = rtf.format(-diff.count, diff.unit)
// Puedes dejar la fecha original en title para accesibilidad
timeEl.setAttribute(title, timeEl.textContent)
timeEl.textContent = relative
})
})
Buenas prácticas y notas finales
- Mostrar solo si hay cambios reales: Evita confundir al lector mostrando una última actualización cuando no hubo cambios sustanciales. El condicional que compara timestamps publicado vs modificado es fundamental.
- Internacionalización: Usa get_the_modified_date() y date_i18n() si haces transformaciones manuales.
- Seguridad: Escapa siempre la salida (esc_html, esc_attr, wp_kses_post) cuando inyectes HTML desde PHP.
- Cache: Si usas caché a nivel de página, asegúrate de limpiar la caché tras editar entradas o que el sistema de cache respete actualizaciones de posts.
- Accesibilidad: Mantén la fecha original disponible en el atributo title o deja la fecha en formato legible para lectores de pantalla un aria-label descriptivo ayuda.
Resumen
Puedes implementar last updated en WordPress de varias formas: insertándolo en la plantilla, añadiéndolo programáticamente al contenido, o exponiéndolo como shortcode. Añadir una clase personalizada mediante post_class permite estilos condicionales y un CSS sencillo da un resultado profesional. Para mejorar la UX, considera mostrar la fecha relativa con JavaScript y seguir buenas prácticas de localización, escape y caché.
Leave a Reply