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.