Este tutorial muestra paso a paso cómo añadir etiquetas visuales tipo “Actualizado 2025” en entradas de WordPress usando una combinación de pequeño código PHP (para detectar la fecha de actualización y añadir una clase o HTML) y CSS (para diseñar la insignia). Incluiré varias alternativas (añadir una clase al contenedor del post, inyectar un span en el contenido, o usar una clase manual en el editor). Todos los ejemplos de código están listados en bloques listos para copiar y pegar con el formato solicitado.

Por qué y cuándo usar esta etiqueta

• Transparencia para lectores: indicar que un artículo fue revisado en 2025 ayuda a mostrar que su contenido está actualizado.
• SEO y confianza: los usuarios son más propensos a confiar en artículos con señales claras de revisión reciente.
• Automatización: automatizar la inclusión evita errores y trabajo manual al actualizar artículos.

Requisitos y buenas prácticas

1. Usar un tema hijo o un plugin de snippets para añadir el código PHP (nunca modificar directamente un tema padre que pueda perderse tras actualizaciones).
2. Hacer copia de seguridad antes de tocar funciones del tema.
3. Probar en entorno local o staging antes de pasar a producción.
4. Asegurarse de que la comparación de año (2025) se ajusta a la lógica que desea: solo si la fecha de modificación pertenece a 2025, o si fue modificada después de la fecha de publicación, etc.

Método A — Añadir una clase a post_class() cuando la entrada fue actualizada en 2025

Este método es limpio: añadimos una clase CSS (por ejemplo, actualizado-2025) al contenedor del post si su fecha de modificación corresponde al año 2025. Después, con CSS mostramos la etiqueta visual usando ::before o un elemento dentro del contenedor.

PHP: filtro para añadir la clase

CSS para mostrar la insignia

Ejemplo con una etiqueta tipo badge en la esquina superior del contenedor del post. Ajusta colores, tamaño y posición según tu tema.

/ Estilos generales de la insignia /
.actualizado-2025 {
  position: relative / el contenedor debe estar posicionado /
}

.actualizado-2025::before {
  content: Actualizado 2025
  position: absolute
  top: 12px
  right: 12px
  background: #ff6b6b        / color de fondo /
  color: #fff
  padding: 6px 10px
  font-size: 13px
  font-weight: 600
  border-radius: 999px
  box-shadow: 0 2px 6px rgba(0,0,0,0.12)
  z-index: 5
  white-space: nowrap
  transition: transform 0.18s ease, opacity 0.18s ease
}

/ Opcional: versión más discreta en pantallas pequeñas /
@media (max-width: 600px) {
  .actualizado-2025::before {
    top: 8px
    right: 8px
    font-size: 12px
    padding: 5px 8px
  }
}

Notas

• Si tu tema ya aplica positioning específico al contenedor del post, ajusta top/right o usa un contenedor interno.
• Si prefieres que la insignia no afecte la estructura, puedes inyectar un elemento span con PHP (ver Método B) en lugar de usar ::before.

Método B — Inyectar un span con texto Actualizado 2025 en el contenido o en la cabecera del post

Si prefieres un nodo HTML real (útil para accesibilidad o para estilos más complejos), puedes inyectar un span justo después del título o dentro de la cabecera del post mediante el filtro the_content o personalizando templates de tema.

PHP: añadir span automáticamente después del título (ejemplo usando the_title filter)

Actualizado 2025
    }

    return title
}
?>

CSS para el span inyectado

/ Estilo para el span inyectado junto al título /
.badge-actualizado-2025 {
  display: inline-block
  margin-left: 10px
  vertical-align: middle
  background: #2b8a3e
  color: #fff
  padding: 4px 8px
  font-size: 12px
  border-radius: 6px
  font-weight: 700
}

Método C — Clase manual en el editor (Gutenberg) CSS

Si prefieres controlar manualmente qué entradas muestran la insignia, añade una clase CSS personalizada al bloque o a la entrada (opción «Advanced» → «Additional CSS class(es)» en Gutenberg) y luego aplica estilos con CSS.

Clase manual sugerida

/ Clase que puedes escribir manualmente en el editor: actualizado-2025-manual /
.actualizado-2025-manual .entry-title::after {
  content: Actualizado 2025
  display: inline-block
  margin-left: 8px
  background: #ffab00
  color: #0a0a0a
  padding: 4px 7px
  border-radius: 5px
  font-weight: 600
  font-size: 12px
}

Variantes avanzadas y ejemplos útiles

• Mostrar insignia solo si la fecha de modificación es posterior a la fecha de publicación: comparar get_the_modified_time() y get_the_date().
• Mostrar la fecha completa: en lugar de texto fijo, mostrar “Actualizado el 12 Ene 2025” usando get_post_modified_time(j M Y).
• Mostrar insignia para versiones dentro de un rango de años: por ejemplo, 2023–2025.

Ejemplo: mostrar la fecha completa al lado del título

Actualizado el  . esc_html(fecha) . 
    }

    return title
}
?>

Accesibilidad y consideraciones SEO

• Si usas ::before y contenido generado con CSS, ese texto no siempre es leído por algunos lectores de pantalla. Para accesibilidad completa, incluye un elemento real en el DOM (span) y oculta visualmente su equivalente solo si es redundante.
• Evita modificar la fecha visible principal de publicación si quieres preservar la información histórica la insignia debe complementar, no sustituir.
• Usa atributos como aria-hidden=true en las versiones puramente visuales y añade un pequeño texto adicional para lectores de pantalla si lo consideras necesario.

Dónde colocar el código

1. functions.php del tema hijo (para filtros PHP) o mejor aún, un plugin de snippets o un plugin propio para mantenerlo separado del tema.
2. CSS en el archivo style.css del tema hijo, o en Apariencia → Personalizar → CSS adicional, o en la hoja de estilos del plugin de snippets si lo soporta.
3. Probar cambios en staging y revisar diferentes plantillas de entrada (single.php, content.php, templates de bloques) para comprobar que la clase o el span se aplica correctamente.

Ejemplo final: lógica completa (añade clase y texto visible)

Este snippet añade una clase al post y también inyecta un span dentro del encabezado si lo prefieres, asegurando compatibilidad con lectores de pantalla.

Actualizado 2025
        title .=  Actualizado el  . esc_html(fecha) . 
    }
    return title
}
?>

/ CSS recomendado para badge   sr-only /
.badge-actualizado-2025 {
  display: inline-block
  margin-left: 8px
  background: #0066cc
  color: #fff
  padding: 4px 9px
  border-radius: 6px
  font-size: 12px
  font-weight: 700
}

/ Clase para lectores de pantalla: visible solo para SR /
.sr-only {
  position: absolute !important
  height: 1px width: 1px
  overflow: hidden
  clip: rect(1px, 1px, 1px, 1px)
  white-space: nowrap / evita saltos de línea /
  border: 0
  padding: 0
  margin: -1px
}

Pruebas y verificación

1. Actualizar manualmente una entrada y cambiar su fecha de modificación a 2025 (por ejemplo editando y guardando) para probar que la clase aparece.
2. Ver la entrada en frontend e inspeccionar el contenedor del post con las herramientas del navegador para confirmar la clase o el span.
3. Probar en diferentes dispositivos y tamaños de pantalla para ajustar el CSS responsivo.

Con estas opciones puedes elegir la que mejor se adapte a tu flujo (automática por año, automática por comparación de fechas, o manual desde el editor). Los snippets son ligeros y fácilmente reversibles cámbialos o elimínalos si necesitas ajustar la lógica en futuros años.