Introducción

En este artículo encontrarás un tutorial completo para diseñar cajas informativas estilo “Nota” y “Advertencia” en WordPress utilizando únicamente CSS y pequeñas inserciones HTML o un shortcode PHP. Cubriremos desde estilos básicos y accesibles hasta variantes avanzadas (iconos, modo oscuro, animaciones suaves y soporte responsive). Todos los ejemplos de código están listados para copiar y pegar tal cual en tu tema, en el personalizador (Apariencia → Personalizar → CSS adicional) o en el functions.php de tu tema hijo.

Objetivos

• Crear dos estilos reutilizables: nota y advertencia.
• Hacerlos accesibles (roles ARIA y contraste adecuado).
• Poder insertarlos vía HTML en el editor o mediante shortcode.
• Facilitar personalización con variables CSS y soporte para modo oscuro.

Concepto y estructura HTML

La estructura HTML es muy simple y se puede pegar en un bloque HTML de Gutenberg o en cualquier editor clásico:

ltdiv class=info-box info-note role=note aria-label=Notagt
  ltdiv class=info-icon aria-hidden=truegtlt/divgt
  ltdiv class=info-contentgt
    ltpgtltbgtNota:lt/bgt Aquí va el contenido de la nota. Puedes incluir enlaces, listas y formato básico.lt/pgt
  lt/divgt
lt/divgt

ltdiv class=info-box info-warning role=alert aria-label=Advertenciagt
  ltdiv class=info-icon aria-hidden=truegtlt/divgt
  ltdiv class=info-contentgt
    ltpgtltbgtAdvertencia:lt/bgt Mensaje importante que requiere atención del lector.lt/pgt
  lt/divgt
lt/divgt

Explicación de la estructura

• Elemento contenedor: .info-box gestiona layout y espaciado.
• Modificadores: .info-note y .info-warning cambian colores y semántica visual.
• info-icon es un área para el icono (se coloca por CSS con pseudo-elementos o fondo SVG).
• role y aria-label mejoran la experiencia para lectores de pantalla.

CSS base (fácil de pegar en CSS adicional)

Este CSS proporciona un diseño moderno, con variables para facilitar la personalización y soporte para modo oscuro.

:root{
  --info-border-radius: 8px
  --info-padding: 16px
  --info-gap: 12px
  --note-bg: #f0f8ff       / fondo nota /
  --note-border: #b6e0ff   / borde nota /
  --note-accent: #1f8ed6   / color icono/texto /
  --warning-bg: #fff6f0    / fondo advertencia /
  --warning-border: #ffd1a3 / borde advertencia /
  --warning-accent: #d46a00 / color icono/texto /
  --info-text: #0b1a26     / texto general /
  --transition-fast: 200ms
}

/ Contenedor base /
.info-box{
  display:flex
  gap:var(--info-gap)
  align-items:flex-start
  padding:var(--info-padding)
  border-radius:var(--info-border-radius)
  border:1px solid transparent
  color:var(--info-text)
  transition:background var(--transition-fast), border-color var(--transition-fast)
  margin:1rem 0
  font-size:0.95rem
  line-height:1.4
}

/ Icono lateral (se llena con pseudo-elemento) /
.info-box .info-icon{
  flex:0 0 40px
  height:40px
  border-radius:6px
  display:inline-flex
  align-items:center
  justify-content:center
  font-size:18px
  position:relative
}

/ Contenido /
.info-box .info-content{
  flex:1 1 auto
}

/ Nota /
.info-note{
  background:var(--note-bg)
  border-color:var(--note-border)
}
.info-note .info-icon{
  background:linear-gradient(135deg, rgba(31,142,214,0.12), rgba(31,142,214,0.06))
  color:var(--note-accent)
}

/ Advertencia /
.info-warning{
  background:var(--warning-bg)
  border-color:var(--warning-border)
}
.info-warning .info-icon{
  background:linear-gradient(135deg, rgba(212,106,0,0.12), rgba(212,106,0,0.06))
  color:var(--warning-accent)
}

/ Iconos usando pseudo-elemento con SVG inline (mejor control visual) /
.info-box .info-icon::before{
  content: 
  display:inline-block
  width:20px
  height:20px
  background-repeat:no-repeat
  background-size:contain
  background-position:center
}

/ SVGs embebidos como data-uri (ejemplo) /
.info-note .info-icon::before{
  background-image: url(data:image/svg xmlutf8,)
}
.info-warning .info-icon::before{
  background-image: url(data:image/svg xmlutf8,)
}

/ Accesibilidad: foco visible al interactuar (si la caja es interactiva) /
.info-box:focus-within{
  outline:3px solid rgba(33,150,243,0.15)
  outline-offset:2px
}

/ Modo oscuro (si tu tema define prefers-color-scheme) /
@media (prefers-color-scheme: dark){
  :root{
    --info-text: #e6f1fb
  }
  .info-note{
    background:rgba(31,142,214,0.06)
    border-color:rgba(31,142,214,0.18)
  }
  .info-warning{
    background:rgba(212,106,0,0.04)
    border-color:rgba(212,106,0,0.16)
  }
}

/ Responsive: icono más pequeño en pantallas pequeñas /
@media (max-width:480px){
  .info-box{
    gap:10px
    padding:12px
  }
  .info-box .info-icon{
    flex:0 0 34px
    height:34px
    font-size:16px
  }
  .info-box .info-icon::before{
    width:18px
    height:18px
  }
}

Uso práctico: insertar en el editor de WordPress

Copiar y pegar la estructura HTML del apartado anterior en un bloque HTML de Gutenberg sirve inmediatamente. Si prefieres usar el editor visual, puedes crear un Bloque Reutilizable con esa estructura y así insertarlo fácilmente donde necesites.

Ejemplo de contenido dentro

ltdiv class=info-box info-note role=note aria-label=Notagt
  ltdiv class=info-icon aria-hidden=truegtlt/divgt
  ltdiv class=info-contentgt
    ltpgtltbgtNota:lt/bgt Recuerda optimizar las imágenes para mejorar tiempos de carga.lt/pgt
  lt/divgt
lt/divgt

Crear shortcodes para insertar fácilmente

Si quieres insertar cajas con shortcodes, añade este código al functions.php de tu tema hijo (o mediante un plugin de snippets). Así podrás escribir [nota]texto[/nota] y [advertencia]texto[/advertencia].

/ Shortcodes para cajas informativas /
function ib_shortcode_note(atts, content = null){
  content = do_shortcode(content)
  return ltdiv class=info-box info-note role=note aria-label=Notagt
       . ltdiv class=info-icon aria-hidden=truegtlt/divgt
       . ltdiv class=info-contentgt . wpautop(content) . lt/divgt
       . lt/divgt
}
add_shortcode(nota,ib_shortcode_note)

function ib_shortcode_warning(atts, content = null){
  content = do_shortcode(content)
  return ltdiv class=info-box info-warning role=alert aria-label=Advertenciagt
       . ltdiv class=info-icon aria-hidden=truegtlt/divgt
       . ltdiv class=info-contentgt . wpautop(content) . lt/divgt
       . lt/divgt
}
add_shortcode(advertencia,ib_shortcode_warning)

Alternativa: usar bloques de Gutenberg personalizados

Para integrarlo como bloque nativo puedes crear un bloque dinámico que renderice el HTML con las clases anteriores. Esa opción requiere conocimientos de JavaScript/React y build tools (create-block), por lo que para la mayoría de usuarios el shortcode o el bloque reutilizable son suficientes.

Accesibilidad y buenas prácticas

• Usa role=note para contenido informativo y role=alert para advertencias que deben destacarse.
• Asegura contraste mínimo 4.5:1 para texto normal. Ajusta colores si tu tema cambia el fondo global.
• Si la caja contiene enlaces, asegúrate de que sean identificables por color y subrayado opcional.
• Evita transmitir información únicamente por color añade etiquetas (ej. “Nota:” o “Advertencia:”) y iconos legibles.

Personalización rápida

Puedes cambiar los colores globales editando las variables al comienzo del CSS. Si necesitas un borde a la izquierda en vez de fondo, sustituye las reglas de fondo por:

/ Variante: borde izquierdo marcado /
.info-box{
  background:transparent
  border-left:6px solid transparent
  padding-left:12px
}
.info-note{
  background:rgba(31,142,214,0.03)
  border-left-color:var(--note-accent)
}
.info-warning{
  background:rgba(212,106,0,0.03)
  border-left-color:var(--warning-accent)
}

Resumen de clases y uso

Clase	Propósito
.info-box	Contenedor base, layout y espaciado
.info-note	Estilos para notas informativas
.info-warning	Estilos para advertencias
.info-icon	Área donde aparece el icono (generado con ::before)

Pruebas y depuración

1. Pega el CSS en Apariencia → Personalizar → CSS adicional y guarda.
2. Inserta la estructura HTML en un bloque HTML o usa el shortcode si añadiste el PHP.
3. Prueba en móvil y escritorio, verifica contraste y lectura con lector de pantalla.
4. Si tu tema aplica resets agresivos, añade selectores más específicos (ej: body .info-box) o usa !important sólo en casos extremos.

Notas finales

Con este enfoque tienes cajas informativas visualmente atractivas, accesibles y fáciles de mantener. Las variables CSS y la organización por clases facilitan la adaptación a la identidad visual de tu sitio. Implementar el shortcode permite a editores insertar avisos sin tocar HTML. Integra estos fragmentos en tu tema hijo o en el personalizador y adapta colores/espaciados según tus necesidades.