Etiqueta: Desarrollo Web

WordPress: cómo agregar una barra fija en el pie para móviles

Cómo agregar una barra fija en la parte inferior en móviles con WordPress

En esta guía vas a aprender a crear una barra fija en la parte inferior de tu sitio WordPress visible solo en dispositivos móviles. Este tipo de barra es ideal para mostrar accesos rápidos como WhatsApp, llamada telefónica, formulario de contacto, ubicación o redes sociales.

Una barra fija mobile mejora la experiencia del usuario porque mantiene siempre visibles las acciones más importantes sin obligar al visitante a desplazarse hasta el footer tradicional.

Se utiliza mucho en sitios de:

  • negocios locales
  • estudios jurídicos
  • clínicas
  • inmobiliarias
  • ecommerce
  • landing pages de conversión

¿Por qué usar una barra fija móvil?

Las pantallas móviles tienen poco espacio y los usuarios esperan interacciones rápidas.

Una barra sticky inferior ayuda a:

  • aumentar conversiones
  • mejorar accesibilidad
  • facilitar contacto inmediato
  • reducir fricción de navegación

Ejemplos de botones frecuentes:

  • Comprar
  • WhatsApp
  • Llamar
  • Contacto
  • Cómo llegar
  • Reservar turno

Método recomendado: HTML + CSS + JavaScript liviano

Actualmente, lo más recomendable es insertar la barra mediante:

  • bloque HTML personalizado
  • plugin de snippets
  • tema hijo

Evitar modificar directamente archivos del tema principal.

Código HTML

Podés insertar este bloque usando:

  • widget HTML
  • bloque HTML personalizado
  • footer template
<div class="mobile-fixed-bar" id="mobileBar">
    <a href="https://wa.me/5491112345678" target="_blank" rel="noopener">
        WhatsApp
    </a>

    <a href="tel:+541112345678">
        Llamar
    </a>

    <a href="/contacto/">
        Contacto
    </a>
</div>

Código CSS para el diseño de la barra

Este CSS crea la barra fija responsive y adaptada a móviles modernos:

.mobile-fixed-bar {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0);
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0,0,0,.12);
    z-index: 9999;
    border-top: 1px solid #e5e5e5;
}

.mobile-fixed-bar a {
    text-align: center;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
}

.mobile-fixed-bar a:hover {
    background: #f5f5f5;
}

@media (min-width: 769px) {
    .mobile-fixed-bar {
        display: none;
    }
}

JavaScript opcional: ocultar al subir scroll

Este script hace que la barra aparezca al bajar y se oculte al subir, mejorando UX.

<script>
let lastScroll = 0;
const bar = document.getElementById('mobileBar');

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;

    if (currentScroll > lastScroll && currentScroll > 100) {
        bar.style.transform = 'translateY(100%)';
    } else {
        bar.style.transform = 'translateY(0)';
    }

    lastScroll = currentScroll;
});
</script>

Agregar transición:

.mobile-fixed-bar {
    transition: transform .3s ease;
}

Dónde agregar el código en WordPress

Opción 1: Editor de bloques (recomendada)

Insertar:

  • HTML en bloque personalizado
  • CSS en “CSS adicional”

Ruta:

Apariencia → Personalizar → CSS adicional

Opción 2: Plugin de snippets

Plugins recomendados:

  • WPCode
  • Code Snippets

Permiten agregar:

  • HTML
  • CSS
  • JS

sin tocar archivos del tema.

Opción 3: Tema hijo

Si hacés desarrollos personalizados:

  • HTML en footer template
  • CSS en style.css
  • JS en archivo separado

Buenas prácticas SEO y UX

Para que la barra no perjudique rendimiento:

1. No usar imágenes pesadas

Preferir:

  • SVG inline
  • texto simple
  • icon fonts livianas

2. No tapar contenido

Agregar espacio inferior:

body {
    padding-bottom: 70px;
}

Así evitas que el contenido quede oculto detrás de la barra.

3. Accesibilidad

Agregar atributos:

aria-label="Contactar por WhatsApp"

y buen contraste visual.

4. Safe areas

El uso de:

env(safe-area-inset-bottom)

evita problemas con iPhone y navegadores modernos.

Personalizaciones posibles

Podés adaptar la barra para:

Ecommerce

  • Comprar
  • Carrito
  • Checkout

Restaurantes

  • Reservar mesa
  • Menú
  • WhatsApp

Profesionales

  • Turnos
  • Llamar
  • Ubicación

Conclusión

Agregar una barra fija inferior en WordPress para móviles sigue siendo una excelente estrategia en 2026 para mejorar conversiones y navegación.

La implementación moderna recomienda usar:

  • HTML simple
  • CSS responsive
  • JavaScript mínimo

sin depender de código PHP innecesario ni modificaciones invasivas del tema.

Con esta solución vas a tener una barra sticky mobile rápida, adaptable y compatible con WordPress moderno, Gutenberg y constructores visuales.

Plugins alternativos (sin código)

Si preferís no programar, podés usar plugins como:

  • Sticky Menu & Sticky Header
  • WPCode
  • Floating Chat Buttons

aunque una implementación manual suele ser más liviana y flexible.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube  para videos tutoriales de Hosting, prácticas y demás. También puede encontrarnos en  X (Twitter), Facebook e Instagram.