Tutorial WordPress: Diseñar un CTA flotante en lateral solo con CSS position: fixed

Introducción

Este tutorial explica paso a paso cómo diseñar un CTA (Call To Action) flotante lateral en un sitio WordPress usando únicamente CSS con position: fixed. La solución mostrada es ligera, accesible y puede insertarse desde un snippet en functions.php, en un bloque HTML del editor o mediante un widget. Se incluirá un método para permitir que el usuario cierre el CTA sin JavaScript, usando únicamente HTML y CSS (checkbox hack), y se explicarán pautas de accesibilidad, responsive y buenas prácticas para producción en WordPress.

Resumen de la idea

El CTA permanecerá anclado al lateral de la pantalla mediante position: fixed.
Se proporcionará una variante izquierda/derecha con el mismo CSS.
La opción de cierre se implementará con un input type=checkbox oculto y un label que actúa como botón de cerrar (sin JavaScript).
Se explicará cómo inyectar el HTML desde functions.php y cómo añadir el CSS (inline o mediante enqueue).

Marcado HTML (plantilla reutilizable)

Este bloque HTML es lo que deberás insertar en el footer del tema, en un widget HTML o output desde functions.php. Incluye el input para controlar el estado cerrado/abierto y un enlace a como CTA principal.

lt!-- Floating CTA lateral (HTML) --gt
ltdiv class=floating-cta-wrappergt
  ltinput id=cta-toggle type=checkbox class=cta-toggle aria-hidden=truegt
  ltdiv class=floating-cta right role=region aria-label=Acción destacadagt
    lta href=/contacto class=cta-button role=button aria-label=Contactar ahoragt
      ltspan class=cta-textgtContacta ahoralt/spangt
    lt/agt
    ltlabel for=cta-toggle class=cta-close aria-hidden=truegt×lt/labelgt
  lt/divgt
lt/divgt

Notas sobre el marcado

El input#cta-toggle permite ocultar el CTA si el usuario lo marca. Esta es una solución puramente CSS.
El enlace principal usa role=button y aria-label para mejorar la accesibilidad.
Usa una clase .right o .left para alternar el lado sin cambiar el CSS base.

CSS completo (posicionamiento, estilo, responsive y animaciones)

Incluye estilos base, soporte para foco, transición y media queries para ocultarlo en pantallas pequeñas si se desea.

/ Floating CTA lateral - CSS /
.floating-cta-wrapper { / contenedor global si se necesita más control / position: fixed inset: 0 pointer-events: none z-index: 9999 }

/ estado por defecto: visible /
.floating-cta {
  position: fixed
  bottom: 18%
  right: 12px / se sobrescribe si se usa .left /
  display: flex
  align-items: center
  gap: 10px
  pointer-events: auto
  transform: translateX(0)
  transition: transform 240ms cubic-bezier(.2,.9,.2,1), opacity 200ms
  opacity: 1
  -webkit-font-smoothing: antialiased
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

/ Alternativa lateral izquierda /
.floating-cta.left { left: 12px right: auto }

/ Botón principal del CTA /
.floating-cta .cta-button {
  background: linear-gradient(180deg,#ff6b6b,#ff3b3b)
  color: #fff
  padding: 14px 18px
  border-radius: 28px
  text-decoration: none
  box-shadow: 0 6px 20px rgba(16,24,40,0.18)
  display: inline-flex
  align-items: center
  gap: 8px
  transition: transform 180ms ease, box-shadow 180ms ease
  font-weight: 600
  font-size: 15px
  line-height: 1
  outline: none
}

/ Hover y foco accesible /
.floating-cta .cta-button:hover,
.floating-cta .cta-button:focus {
  transform: translateY(-3px)
  box-shadow: 0 10px 30px rgba(16,24,40,0.22)
}

/ Indicador de texto (puedes ocultarlo en móviles) /
.floating-cta .cta-text { display: inline-block }

/ Botón cerrar: pequeño y discreto /
.floating-cta .cta-close {
  cursor: pointer
  font-size: 20px
  color: rgba(0,0,0,0.6)
  background: #fff
  border-radius: 50%
  width: 36px
  height: 36px
  display: inline-flex
  align-items: center
  justify-content: center
  box-shadow: 0 6px 18px rgba(2,6,23,0.12)
  text-decoration: none
}

/ Cuando el checkbox está marcado, ocultamos el CTA con transform y opacity /
.cta-toggle { position: absolute left: -9999px top: auto width: 1px height: 1px overflow: hidden clip: rect(0 0 0 0) }

/ Selector que aplica la ocultación sin JavaScript /
.cta-toggle:checked   .floating-cta,
.cta-toggle:checked   .floating-cta.right { transform: translateX(110%) opacity: 0 pointer-events: none }

/ Si el input se coloca antes del wrapper, puede requerir selector general:
   .cta-toggle:checked ~ .floating-cta { ... } /

/ Responsive: en móviles puedes optar por ocultarlo o hacerlo menos intrusivo /
@media (max-width: 900px) {
  .floating-cta { bottom: 6% right: 8px }
  .floating-cta .cta-text { display: none } / solo icono o pequeño texto /
  .floating-cta .cta-button { padding: 12px 12px border-radius: 20px }
}

/ En pantallas muy pequeñas ocultamos por completo (opcional) /
@media (max-width: 520px) {
  .floating-cta { display: none }
}

Cómo inyectarlo en WordPress desde functions.php

La forma más directa es añadir una función que imprima el HTML en wp_footer. Si prefieres, coloca el mismo HTML en un widget HTML o bloque del editor. A continuación un ejemplo seguro para functions.php que además registra y añade el CSS vía inline.

/ functions.php - añadir CTA flotante en el footer / function mi_cta_flotante_markup() { ?> ltdiv class=floating-cta-wrappergt ltinput id=cta-toggle type=checkbox class=cta-toggle aria-hidden=truegt ltdiv class=floating-cta right role=region aria-label=Acción destacadagt lta href= class=cta-button role=button aria-label=Contactar ahoragt ltspan class=cta-textgtContacta ahoralt/spangt lt/agt ltlabel for=cta-toggle class=cta-close aria-hidden=truegt×lt/labelgt lt/divgt lt/divgt lt!-- Puedes añadir aquí también un SVG pequeño como icono dentro del enlace --gt

Para añadir el CSS, lo ideal es encolar un archivo CSS con wp_enqueue_style. Si prefieres inyectarlo inline desde functions.php, usa wp_add_inline_style junto a tu handle de estilo principal o imprime en wp_head (no recomendado para producción).

/ functions.php - encolar CSS (ejemplo) /
function mi_cta_flotante_enqueue() {
    wp_enqueue_style( mi-cta-flotante-style, get_stylesheet_directory_uri() . /css/cta-flotante.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_cta_flotante_enqueue )

Accesibilidad y buenas prácticas

Añade aria-label descriptivos al contenedor y al botón para lectores de pantalla.
Permite el cierre (como hemos hecho) para que los usuarios no se sientan obstruidos.
Revisa el contraste de color: el texto del CTA debe cumplir con WCAG AA/AAA según el contexto.
Soporta navegación por teclado: los enlaces deben ser focusables y con estilos de :focus visibles.
En pantallas pequeñas, considera ocultarlo o simplificarlo para no cubrir contenido crítico.

Variantes y personalizaciones

Lateral izquierdo: cambia la clase a left y ajusta CSS (ya incluido en el ejemplo).
Icono texto: inserta un SVG dentro del enlace antes de .cta-text para mejor reconocimiento visual.
Aparecer tras X segundos: esto requiere JavaScript la versión presentada se muestra siempre sin JS.
Recordar cierre: para que la decisión de cerrar persista entre páginas, usa localStorage con JavaScript. Nuestro enfoque actual evita JS.

Consejos finales para producción

Comprueba que el z-index no sea superado por otros elementos (por ejemplo, menús o modales).
Minimiza el CSS y colócalo en un archivo propio para cacheo y rendimiento.
Prueba en diferentes navegadores y tamaños de pantalla, y con lectores de pantalla.
Si usas traducciones, envuelve el texto en funciones de internacionalización si lo generas desde PHP (por ejemplo, esc_html_e() o __()).

Ejemplo de pequeño refinamiento (texto traducible en PHP)

/ Ejemplo con traducción en functions.php / function mi_cta_flotante_markup_tr() { cta_text = __( Contacta ahora, mi-textdomain ) ?> ltdiv class=floating-cta-wrappergt ltinput id=cta-toggle type=checkbox class=cta-toggle aria-hidden=truegt ltdiv class=floating-cta right role=region aria-label=gt lta href= class=cta-button role=button aria-label=gt ltspan class=cta-textgtlt/spangt lt/agt ltlabel for=cta-toggle class=cta-close aria-hidden=truegt×lt/labelgt lt/divgt lt/divgt

Resumen

Crear un CTA flotante lateral con position: fixed y solo CSS es totalmente viable y puede integrarse en WordPress desde un snippet en functions.php o mediante un widget HTML. La técnica del input label permite ofrecer un cierre sin JavaScript, y con media queries y atención a la accesibilidad lograrás una solución elegante, rápida y compatible. Implementa el CSS en un archivo encolado, prueba en distintos dispositivos y ajusta colores y posiciones según la estética del sitio.

SushiHost