Introducción
Este tutorial explica, con todo lujo de detalles y ejemplos prácticos, cómo crear banners laterales verticales en WordPress utilizando position: sticky. Verás la estructura HTML/WordPress recomendada, el CSS necesario, integración en un tema (functions.php y plantilla), buenas prácticas de accesibilidad y rendimiento, y ejemplos de depuración. Los fragmentos de código están preparados para copiar y pegar en tu proyecto.
Concepto y requisitos de position: sticky
position: sticky fija un elemento dentro de su contenedor cuando el scroll lo alcanza hasta un umbral (por ejemplo top). Requisitos y matices importantes:
- El elemento sticky se comporta respecto a su containing block (el ancestro más cercano con posición distinta a static o el contenedor directo). Si un ancestro tiene overflow: hidden/auto/scroll, el sticky solo funcionará dentro de ese ancestro.
- Hay que declarar explicitamente top (o bottom) para que funcione.
- Compatibilidad moderna: la mayoría de navegadores modernos soportan sticky en navegadores muy antiguos no funcionará y deberías proporcionar fallbacks.
- En móviles, a veces es mejor desactivar sticky o reducir offsets para evitar solapamiento y problemas con barras de navegación.
Anatomía recomendada para un layout con banner lateral vertical
Es habitual tener una estructura simple: contenedor principal con dos columnas (contenido y barra lateral). El banner dentro de la barra lateral debe ser el elemento sticky. Ejemplo de marcado que puedes usar dentro de tu plantilla de tema o widget:
CSS esencial para banners verticales sticky
Ejemplo de CSS que define el layout, el sticky y ajustes responsive. Asegúrate de adaptar selectores a tu tema.
/ Layout base (flexbox) /
.site-layout{
display: flex
align-items: flex-start / importantes para que sidebar se alinee al top /
gap: 24px
}
/ Área de contenido flexible /
.content-area{
flex: 1 1 0%
min-width: 0
}
/ Sidebar fijo en ancho /
.sidebar{
width: 300px / ancho del sidebar ajustar según diseño /
}
/ Wrapper interno: evita que el sticky se salga de su contenedor visual /
.sidebar-inner{
position: relative / contenedor del sticky /
}
/ El banner vertical que queremos que sea sticky /
.vertical-banner{
position: sticky
top: 24px / margen superior desde la parte visible de la ventana /
z-index: 10 / asegúrate que esté sobre otros elementos si hace falta /
/ Opcionales: control visual /
display: block
width: 100%
}
/ Imagen dentro del banner (se adapta y mantiene proporciones) /
.vertical-banner img{
display: block
width: 100%
height: auto
max-height: calc(100vh - 48px) / evita que sea más alto que la ventana /
object-fit: cover
border: 0
}
/ Safe-area para iOS (notch) /
.vertical-banner{
padding-top: env(safe-area-inset-top)
}
/ Responsive: en pantallas pequeñas, no use sticky y ponga el banner al flujo /
@media (max-width: 900px){
.site-layout{
flex-direction: column
}
.sidebar{
width: 100%
}
.vertical-banner{
position: static
top: auto
margin: 16px 0
max-height: none
}
}
Integración en WordPress: registrar área de widget y mostrar en plantilla
Registra un área de widgets para colocar los banners desde Apariencia → Widgets o el editor de bloques si tu tema lo admite. Ejemplo para functions.php:
// functions.php
function tema_registrar_sidebars(){
register_sidebar( array(
name => Sidebar Principal,
id => sidebar-principal,
description => Sidebar donde colocar banners verticales y widgets,
before_widget => ltdiv id=%1s class=widget %2sgt,
after_widget => lt/divgt,
before_title => lth3 class=widget-titlegt,
after_title => lt/h3gt,
) )
}
add_action( widgets_init, tema_registrar_sidebars )
En la plantilla del sidebar (sidebar.php) muestra el sidebar y asegúrate de que la estructura interna tenga el contenedor para sticky:
lt!-- sidebar.php gt
ltaside class=sidebargt
ltdiv class=sidebar-innergt
lt?php if ( is_active_sidebar( sidebar-principal ) ) : ?gt
lt?php dynamic_sidebar( sidebar-principal ) ?gt
lt?php endif ?gt
lt/divgt
lt/asidegt
Encolar los estilos correctamente
Ejemplo de cómo añadir tu archivo CSS al tema mediante wp_enqueue_style:
// functions.php: encolar stylesheet para banners
function tema_enqueue_styles(){
wp_enqueue_style( tema-banners, get_stylesheet_directory_uri() . /css/banners-verticales.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_enqueue_styles )
Ejemplo de widget/HTML para el banner (para pegar en un widget de texto o HTML personalizado)
ltdiv class=vertical-bannergt
lta href=/oferta target=_blank rel=noopener noreferrer aria-label=Oferta especialgt
ltimg src=/wp-content/uploads/banner-vertical-300x600.jpg alt=Oferta especial - 50% de descuento loading=lazy /gt
lt/agt
lt/divgt
Consideraciones de accesibilidad
- Usa siempre alt descriptivos en imágenes.
- Si el banner es interactivo, proporciona aria-label en enlaces y asegúrate de que sea navegable por teclado.
- Evita interacciones que bloqueen el contenido principal o impidan la lectura — por ejemplo, no superpongas el banner de forma que oculte botones importantes al hacer scroll.
Comportamiento en móviles y fallback
En la mayoría de diseños es preferible desactivar sticky en pantallas pequeñas (como en el ejemplo CSS anterior). Otra estrategia es usar JavaScript para habilitar o deshabilitar la clase sticky según el ancho o la altura del viewport:
// Ejemplo JS (puedes encolarlo como archivo .js en tu tema)
(function(){
function ajustarSticky(){
var el = document.querySelector(.vertical-banner)
if(!el) return
// si la pantalla es pequeña, quitar la clase sticky (o cambiar estilo)
if(window.innerWidth <= 900){
el.style.position = static
el.style.top =
} else {
el.style.position = sticky
el.style.top = 24px
}
}
window.addEventListener(resize, ajustarSticky)
document.addEventListener(DOMContentLoaded, ajustarSticky)
})()
Rendimiento y buenas prácticas
- Usa loading=lazy en imágenes para retrasar la carga y mejorar LCP.
- Optimiza imágenes (WebP/AVIF cuando sea posible) y ajusta dimensiones exactas.
- Evita anuncios pesados o iframes con mucho JS si afectan el rendimiento encapsula en contenedores ligeros.
- Comprueba que los ancestros del sticky no tengan overflow que limite su comportamiento.
Depuración: checklist
- En DevTools inspecciona el elemento y confirma que position es sticky y que existe top.
- Comprueba ancestros: si alguno tiene overflow distinto de visible, el sticky quedará confinado o no funcionará.
- Verifica que el contenedor del sticky no sea más pequeño que el elemento sticky.
- Prueba en distintos tamaños de viewport y navegadores. Usa el panel de rendering si necesitas emular safe-area-insets.
- Si el banner no se comporta como esperado, revisa z-index y confirma que no quede debajo de un elemento con z-index mayor.
Políticas y UX
Si los banners son anuncios comerciales, respeta las políticas de la red publicitaria que uses y evita prácticas intrusivas (p. ej. contenido que cubra botones de navegación). Mantén una relación adecuada entre contenido y publicidad para no perjudicar la experiencia del usuario.
Ejemplo completo (resumen práctico)
Pasos rápidos para implementar:
- Registrar sidebar en functions.php.
- Colocar el HTML del banner en el widget o plantilla dentro de .sidebar-inner.
- Añadir el CSS mostrado en tu stylesheet (banners-verticales.css).
- Comprobar en móvil y escritorio añadir JS si necesitas toggles dinámicos.
- Optimizar imágenes y revisar accesibilidad.
Notas finales
Con position: sticky puedes lograr banners laterales verticales que mejoran visibilidad sin recurrir a técnicas más intrusivas como position: fixed fuera del flujo. Ajusta offsets, z-index y comportamiento responsive para compatibilidad y buena experiencia. Los ejemplos incluidos en este artículo están preparados para integrarse en un tema WordPress estándar adáptalos a la estructura y nomenclatura de tu tema.
Leave a Reply