Introducción

Este tutorial muestra cómo crear un cuadro de aviso (alert) reutilizable en WordPress usando solo HTML y CSS. El enfoque permite variantes (éxito, información, advertencia, error), un botón de cierre sin JavaScript (mediante la técnica del checkbox) y un método claro para integrarlo y reutilizarlo en cualquier entrada o área de widgets de WordPress.

Características que conseguiremos

• Markup simple y accesible (HTML) que puedes pegar en un bloque HTML personalizado.
• Estilos limpios y variables CSS para personalizar colores y tamaños.
• Botón de cierre funcional sin JavaScript (checkbox selector CSS).
• Variantes predefinidas: info, success, warning, error.
• Instrucciones para hacer el alert reutilizable en WordPress (Reusable Block o widget Custom HTML) y para añadir el CSS globalmente.

Estructura básica y conceptos

La estructura HTML que usaremos en cada aviso es compacta y consistente. En el CSS definimos variables para colores y un conjunto de clases BEM-like para mantener todo organizado. Para que el cierre funcione sin JS utilizamos un input type=checkbox oculto y un label asociado que actúa de botón de cierre: cuando el checkbox está marcado, el alert colapsa mediante reglas CSS.

Markup de ejemplo (HTML)

A continuación tienes un bloque HTML representativo que puedes pegar tal cual en un bloque Custom HTML de Gutenberg o en un widget HTML personalizado. Cambia el texto y el valor del id si vas a tener varios avisos en la misma página.

  
  ✕

  

  

    Información:
    
Este es un aviso informativo que puedes reutilizar en cualquier entrada o bloque.
  

CSS completo (pegable en Apariencia → Personalizar → CSS Adicional)

Pega el siguiente CSS en la sección CSS adicional del personalizador, o en el stylesheet de tu child theme. Las variables facilitan la personalización de colores y tamaños.

:root{
  --alert-radius: 8px
  --alert-padding: 12px 16px
  --alert-gap: 12px
  --alert-font-size: 15px
  --alert-max-height: 200px
  --transition-speed: 300ms

  / Colores por defecto (puedes sobrescribir) /
  --color-info-bg: #e8f4fd
  --color-info-border: #bfe6ff
  --color-info-text: #154861

  --color-success-bg: #ecf8f1
  --color-success-border: #c9eed6
  --color-success-text: #0f4d2a

  --color-warning-bg: #fff8e6
  --color-warning-border: #ffe8a8
  --color-warning-text: #6a4a00

  --color-error-bg: #fff0f0
  --color-error-border: #ffc8c8
  --color-error-text: #6b0f0f
}

/ Base del alert /
.alert{
  display: flex
  align-items: flex-start
  gap: var(--alert-gap)
  padding: var(--alert-padding)
  border-radius: var(--alert-radius)
  border: 1px solid transparent
  font-size: var(--alert-font-size)
  max-width: 100%
  box-sizing: border-box
  transition: opacity var(--transition-speed) ease, max-height var(--transition-speed) ease, padding var(--transition-speed) ease
  overflow: hidden
  position: relative
}

/ Variantes /
.alert--info{
  background: var(--color-info-bg)
  border-color: var(--color-info-border)
  color: var(--color-info-text)
}

.alert--success{
  background: var(--color-success-bg)
  border-color: var(--color-success-border)
  color: var(--color-success-text)
}

.alert--warning{
  background: var(--color-warning-bg)
  border-color: var(--color-warning-border)
  color: var(--color-warning-text)
}

.alert--error{
  background: var(--color-error-bg)
  border-color: var(--color-error-border)
  color: var(--color-error-text)
}

/ Icono (puede personalizarse con pseudo-elemento) /
.alert__icon{
  flex: 0 0 36px
  height: 36px
  border-radius: 6px
  display: inline-grid
  place-items: center
  font-size: 18px
  line-height: 1
}

/ Iconos por variante usando contenido unicode /
.alert--info .alert__icon::before{ content: ℹ️ }
.alert--success .alert__icon::before{ content: ✅ }
.alert--warning .alert__icon::before{ content: ⚠️ }
.alert--error .alert__icon::before{ content: ⛔ }

/ Contenido /
.alert__body{
  flex: 1 1 auto
  min-width: 0
}
.alert__title{ display: block font-weight: 700 margin-bottom: 4px }
.alert__text{ margin: 0 }

/ Toggle (checkbox) oculto /
.alert__toggle{
  position: absolute
  opacity: 0
  pointer-events: none
}

/ Botón de cierre visual /
.alert__close{
  position: absolute
  top: 8px
  right: 8px
  cursor: pointer
  background: transparent
  border: none
  font-size: 14px
  line-height: 1
  padding: 6px
  border-radius: 4px
  color: inherit
  text-decoration: none
}

/ Efecto de cierre usando el checkbox: cuando está marcado colapsa el alert /
.alert__toggle:checked   .alert__close   .alert__icon   .alert__body,
.alert__toggle:checked   .alert__close   .alert__icon,
.alert__toggle:checked   .alert__close   .alert__icon   .alert__body   {
  opacity: 0
  max-height: 0
  padding: 0
  margin: 0
}
.alert__toggle:checked   .alert__close,
.alert__toggle:checked   .alert__close   .alert__icon{
  display: none
}
.alert__toggle:checked{
  display: none
}

/ Mejora visual: transición de colapso /
.alert{
  max-height: var(--alert-max-height)
}
.alert__body{
  transition: opacity var(--transition-speed) ease, max-height var(--transition-speed) ease, margin var(--transition-speed) ease
}

/ Responsive: textos más pequeños en pantallas pequeñas /
@media (max-width:480px){
  :root{ --alert-font-size: 14px --alert-gap:10px }
  .alert__icon{ flex-basis: 30px height: 30px font-size: 16px }
}

/ Imprimir: opcional, ocultar en PDF/impr. si no interesa /
@media print{
  .alert{ display: none !important }
}

Explicación rápida del CSS clave

1. Variables: definen colores y tamaños para fácil personalización.
2. Estructura flexible: display:flex para icono contenido y buena adaptación a ancho de contenedor.
3. Cierre sin JS: el input checkbox (oculto) y el label funcionan como interruptor con el selector :checked actuamos sobre el contenido para colapsarlo.
4. Accesibilidad: role=alert y aria-live=polite permiten a lectores de pantalla conocer el aviso el botón de cierre es un label asociado al checkbox, por lo que es interactuable desde teclado y pantalla táctil.

Variantes y personalización rápida

Puedes crear variantes adicionales duplicando las reglas .alert–X y cambiando las variables de color. Para un color personalizado, por ejemplo:

/ Variante personalizada /
.alert--azul-mar{
  background: #eef7ff
  border-color: #cfe9ff
  color: #08324a
}
.alert--azul-mar .alert__icon::before{ content: 🌊 }

Cómo integrarlo y reutilizarlo en WordPress

1. Agregar el CSS globalmente: Ve a Apariencia → Personalizar → CSS adicional y pega el CSS. Alternativa: usa un plugin de CSS personalizado o añade al stylesheet del child theme.
2. Crear el HTML del aviso: En el editor de entradas o páginas añade un bloque HTML personalizado y pega la estructura HTML del ejemplo. Ajusta id si vas a insertar más de un aviso en la misma página.
3. Hacerlo reutilizable (Reusable Block):
   1. Selecciona el bloque HTML que acabas de crear.
   2. Haz clic en los tres puntos del bloque y elige Añadir a bloques reutilizables.
   3. Asigna un nombre (por ejemplo, Aviso Reutilizable) y guarda.
4. Usarlo en cualquier lugar: Inserta el bloque reutilizable en otras entradas o plantillas como cualquier bloque. Si necesitas cambiar estilo global, basta con editar el CSS si quieres cambiar el texto siempre y no el diseño, conviértelo a bloque y edítalo localmente o actualiza el bloque reutilizable.
5. Opción de widget: Para mostrar en áreas de widgets, ve a Apariencia → Widgets y añade un widget HTML personalizado con la misma estructura HTML.

Buenas prácticas y notas finales

• Mantén ids únicos si colocas múltiples alerts en la misma página para evitar colisiones del input/label.
• Si prefieres no usar el checkbox, elimina esa parte del markup y el CSS relacionado no habrá botón de cierre sin JavaScript.
• Si necesitas lógica más compleja (por ejemplo, persistencia del cierre entre páginas), entonces sí será necesario JavaScript y/o almacenamiento en cookies/localStorage este tutorial deliberadamente evita JS.
• Prueba con lectores de pantalla y teclado para asegurarte de que el label (botón de cierre) sea accesible y visible.

Ejemplos de uso rápido

Copiar y pegar este bloque en un Custom HTML Block te da un aviso funciónal inmediato:

  
  ✕

  

  

    Hecho:
    
Tu publicación ha sido guardada correctamente.
  

Recursos útiles

• WordPress (sitio oficial)