Tutorial WordPress: Crear una barra superior de aviso con solo HTML CSS

Introducción

En este tutorial verás cómo crear una barra superior de aviso (top notice bar) para WordPress utilizando únicamente HTML y CSS. La solución es ligera, compatible con la mayoría de temas y puede colocarse en el header del tema o mediante un widget HTML. Incluyo versiones fijas, responsivas y una variante dismissible sin JavaScript, usando únicamente la técnica del checkbox. Todos los fragmentos de código están listos para pegarse en tu tema hijo o en el personalizador de WordPress.

Requisitos y opciones de colocación en WordPress

Tema hijo (recomendado) para no perder cambios con actualizaciones.
Dónde pegar el HTML:
- header.php del tema hijo (antes del cierre de la etiqueta ltheadergt o justo después de ltbodygt si tu tema lo soporta).
- Widget HTML personalizado en la ubicación de cabecera si el tema ofrece esa área.
- Un plugin de inserción de fragmentos que permita HTML en el header.
Dónde pegar el CSS:
- Apariencia → Personalizar → CSS adicional.
- style.css del tema hijo.

Estructura HTML básica (barra simple, fija arriba)

Este HTML crea una barra de aviso simple con texto y un enlace. Coloca este bloque en el header del tema (o en un widget HTML si tu tema lo permite).

ltdiv class=top-noticegt
  ltdiv class=top-notice__innergt
    ltspan class=top-notice__textgtAviso importante: ltbgtEnvíos gratis para pedidos superiores a 50€lt/bgtlt/spangt
    lta class=top-notice__cta href=#gtVer condicioneslt/agt
  lt/divgt
lt/divgt

CSS básico para estilo, posicionamiento y responsividad

Pega el CSS en Apariencia → Personalizar → CSS adicional o en style.css del tema hijo.

/ Barra superior fija /
.top-notice{
  position: fixed
  top: 0
  left: 0
  right: 0
  background: #0b74de         / color de fondo /
  color: #fff                 / color del texto /
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
  z-index: 9999               / alto para que quede encima del contenido /
  box-shadow: 0 2px 6px rgba(0,0,0,0.12)
}

/ Contenedor interior para ancho y alineación /
.top-notice__inner{
  max-width: 1200px
  margin: 0 auto
  padding: 10px 18px
  display: flex
  align-items: center
  justify-content: space-between
  gap: 12px
}

/ Texto y CTA /
.top-notice__text{
  font-size: 15px
  line-height: 1.2
}
.top-notice__cta{
  background: rgba(255,255,255,0.12)
  color: #fff
  padding: 8px 12px
  border-radius: 6px
  text-decoration: none
  font-weight: 600
  font-size: 14px
}

/ Ajustes para móviles /
@media (max-width: 720px){
  .top-notice__inner{ padding: 8px 12px flex-direction: column align-items: flex-start }
  .top-notice__cta{ align-self: stretch text-align: center }
  .top-notice__text{ font-size: 14px }
}

/ Si el administrador está logueado y el tema usa la clase body.admin-bar, evita solapamiento /
body.admin-bar .top-notice{
  top: 32px / o 46px según el admin bar del tema/versión WP /
}

Variante cerrable (dismissible) sin JavaScript — checkbox hack

Esta variante permite que el usuario cierre la barra y se oculte con CSS mediante un input checkbox. El estado de cierre no persistirá entre recargas (para persistir hace falta JavaScript o cookies/server).

ltinput type=checkbox id=notice-toggle class=notice-toggle /gt
ltlabel for=notice-toggle class=top-noticegt
  ltdiv class=top-notice__innergt
    ltspan class=top-notice__textgtOferta limitada: ltbgt20% dto en nueva colecciónlt/bgtlt/spangt
    ltspan class=top-notice__ctagtCerrarlt/spangt
  lt/divgt
lt/labelgt

/ Ocultar el checkbox visualmente pero accesible /
.notice-toggle{ position: absolute left: -9999px }

/ Usamos el label como barra por defecto visible /
.top-notice{ display: block cursor: pointer }

/ Cuando el checkbox está marcado, ocultamos la barra usando el selector :checked   label /
.notice-toggle:checked   .top-notice{
  display: none
}

/ Reutiliza estilo de ejemplo anterior para .top-notice__inner, etc. /
/ ... (añadir las reglas CSS de la sección anterior para colores/ajustes) ... /

Variaciones y mejoras visuales (acciones rápidas)

Colores: usar variables CSS para mantener coherencia con tu tema. Ejemplo: –accent-color.
Gradientes y iconos: añadir un pequeño SVG inline o una pseudo-clase con background-image si el tema lo permite.
Barra que empuja el contenido: en lugar de position: fixed, usar position: relative en el header y ajustar margin-top del contenido principal requiere editar plantillas del tema.
Animación de entrada: añadir transition/transform para un fade/slide suave al cargar.

Consideraciones de accesibilidad y SEO

Si el contenido es informativo y puede cambiar, añade role=region y aria-label para que sea fácil de localizar por lectores de pantalla.
Evitar contrastes bajos: asegúrate de una relación de contraste suficiente entre texto y fondo.
Si el aviso contiene información crítica (como cierre de tienda o problemas), usa aria-live=polite en el contenedor para anunciar cambios.

Ejemplo completo (HTML CSS resumido) lista para adaptar

Combina el HTML simple con el CSS indicado arriba. Inserta el HTML en header.php o en un widget y el CSS en Personalizar → CSS adicional. Ajusta colores, textos y tamaños a tu diseño.

ltdiv class=top-notice role=region aria-label=Aviso superiorgt
  ltdiv class=top-notice__innergt
    ltspan class=top-notice__textgtltbgtIMPORTANTE:lt/bgt Entrega estimada 24-48h en pedidos urbanos.lt/spangt
    lta class=top-notice__cta href=#gtMás infolt/agt
  lt/divgt
lt/divgt

/ Copiar aquí el CSS completo mostrado en la sección CSS básico y adaptarlo a tu tema /

Consejos finales prácticos

Prueba en móvil: asegúrate de que la barra no ocupe demasiado espacio y que el CTA sea fácilmente pulsable.
Prueba con el admin bar activado (inicia sesión en WP) y ajusta top en body.admin-bar para que no se solapen elementos.
Usa un tema hijo para mantener los cambios. Si no quieres tocar archivos del tema, usa un widget HTML y el CSS adicional.
Para avisos legales (cookies, condiciones) considera la persistencia del cierre mediante JavaScript o plugins especializados si necesitas memoria entre sesiones.

Ejemplo rápido de ajuste para admin-bar (copia en tu CSS)

/ Evita solapamiento con la barra de administración de WordPress /
body.admin-bar .top-notice{ top: 32px }
@media (max-width: 782px){
  body.admin-bar .top-notice{ top: 46px }
}

Con esto tienes una barra de aviso funcional, ligera y totalmente basada en HTML y CSS, lista para integrarla en WordPress. Ajusta estilos, tamaños y comportamiento según las necesidades del proyecto.

SushiHost