En este artículo, exploraremos cómo agregar una barra fija en dispositivos móviles en tu sitio web de WordPress, que permanecerá visible en la parte inferior de la pantalla incluso mientras el usuario hace scroll. Esta barra puede contener enlaces a secciones importantes, como el contacto, redes sociales, términos y condiciones, o cualquier otra funcionalidad clave que desees que esté siempre accesible para los usuarios.
Implementar una barra fija en dispositivos móviles es una excelente manera de mejorar la experiencia de usuario en tu sitio web, especialmente en dispositivos móviles donde el espacio en pantalla es limitado. Al mantener esta barra siempre visible, los usuarios pueden acceder rápidamente a los recursos más importantes sin tener que desplazarse hasta el final de la página. Además, esta funcionalidad puede mejorar la navegación y facilitar la interacción del usuario con las diversas secciones de tu sitio, lo que puede incrementar la satisfacción y las conversiones.
En los siguientes pasos, aprenderás a agregar y personalizar esta barra fija en dispositivos móviles, asegurando que se ajuste correctamente a las necesidades de tu sitio web y que no interfiera con el contenido principal de las páginas.
Resultado final:
Al final, obtendremos una barra fija en dispositivos móviles que permanecerá visible en la parte inferior de la pantalla mientras los usuarios navegan por tu sitio. Esta barra contendrá los enlaces clave que hayas elegido, y su diseño será discreto pero funcional, mejorando la accesibilidad y la navegación del sitio en dispositivos móviles. El resultado final se verá similar a la imagen que se muestra a continuación, ofreciendo una experiencia de usuario más fluida y eficiente.
Código PHP para generar la barra fija en dispositivos móviles
El siguiente código PHP permite agregar una barra fija en dispositivos móviles en tu sitio de WordPress. La barra se posiciona en la parte inferior de la pantalla y permanece visible incluso cuando el usuario hace scroll. Esta barra incluye botones de WhatsApp, teléfono y un enlace de contacto, lo que facilita la interacción con los usuarios. Este código también utiliza JavaScript para mostrar y ocultar la barra según el desplazamiento del usuario.
<?php // No copiar esta línea
add_action('wp_footer', 'dcms_add_fixed_button_bar');
function dcms_add_fixed_button_bar(){
// Si se desea mostrar solo en dispositivos móviles, descomentar la siguiente línea
// if ( ! wp_is_mobile() ) return;
?>
<section class="fixed-footer">
<?php dcms_add_whatsapp() ?>
<?php dcms_add_phone() ?>
<div class="contact"><a href="#" class="button">Contacto</a></div>
</section>
<script>
(function( $ ) {
$('.fixed-footer').hide();
$(window).scroll(function(){
if ($(this).scrollTop() < 200 || screen.width > 768) {
$('.fixed-footer').fadeOut();
} else {
$('.fixed-footer').fadeIn();
}
});
})( jQuery );
</script>
<?php
}
function dcms_add_whatsapp(){
$tel = "34123456789"; // Número de WhatsApp
$ms = urlencode("Este es un texto por defecto"); // Mensaje predeterminado
$url = "https://wa.me/$tel?text=$ms";
$img = get_stylesheet_directory_uri().'/img/whatsapp-icon.svg'; // Ruta del ícono de WhatsApp
?>
<div class="whatsapp">
<a href="<?= $url ?>">
<img src="<?= $img ?>" width="60" height="60" alt="icon"/>
</a>
</div>
<?php
}
function dcms_add_phone(){
$tel = "+34000000000"; // Número de teléfono
$img = get_stylesheet_directory_uri().'/img/telephone-icon.svg'; // Ruta del ícono de teléfono
?>
<div class="phone">
<a href="tel:<?= $tel ?>">
<img src="<?= $img ?>" width="46" height="46" alt="icon"/>
</a>
</div>
<?php
}
Explicación del código
- Hook
wp_footer:
Utilizamos este hook para inyectar el código en el pie de página de nuestro sitio web. La funcióndcms_add_fixed_button_bares la encargada de generar el HTML y JavaScript que hace funcionar la barra fija. - Condicional
wp_is_mobile():
Dentro de la funcióndcms_add_fixed_button_bar(), puedes descomentar la líneaif ( ! wp_is_mobile() ) return;si deseas que la barra solo se muestre en dispositivos móviles. - HTML de la barra fija:
Creamos una sección con la clasefixed-footer, donde se incluyen los botones para WhatsApp, teléfono y un enlace de contacto. Los botones están generados por las funcionesdcms_add_whatsapp()ydcms_add_phone(). - JavaScript para mostrar/ocultar la barra:
El código JavaScript se encarga de mostrar la barra cuando el usuario hace scroll hacia abajo (más de 200px) y de ocultarla si se desplaza hacia arriba o si el ancho de la pantalla es mayor a 768px (en dispositivos no móviles). - Funciones para los botones:
dcms_add_whatsapp(): Genera el botón de WhatsApp, con un enlace hacia el número de teléfono y un mensaje predeterminado.dcms_add_phone(): Genera el botón de teléfono, que permite realizar una llamada al número indicado.
Cómo usar este código
Puedes agregar este código al archivo functions.php de tu tema hijo. También, asegúrate de tener los iconos correspondientes para WhatsApp y teléfono en la carpeta img de tu tema hijo. Si no tienes los íconos, puedes descargarlos desde los enlaces proporcionados:
Al implementar este código, tendrás una barra fija funcional en la parte inferior de la pantalla en dispositivos móviles, que permanecerá visible mientras los usuarios navegan por tu sitio.
Código CSS para estilizar la barra fija en dispositivos móviles
El siguiente código CSS está diseñado para darle estilo a la barra fija en dispositivos móviles, implementada en el código PHP anterior. Con este código, podrás asegurarte de que la barra se muestre correctamente y se ajuste a la interfaz de usuario en tu sitio web.
.fixed-footer {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
padding: 12px 20px;
background-color: white;
box-shadow: 0 0 5px #ccc;
}
.fixed-footer .contact a.button {
text-decoration: none;
display: block;
background-color: #ea5600;
color: white;
padding: 8px 20px;
border-radius: 50px;
max-width: 200px;
margin: auto;
text-align: center;
}
@media(min-width: 768px) {
.fixed-footer {
display: none;
}
}
Explicación del código CSS:
.fixed-footer:- Usamos CSS Grid para dividir la barra en tres columnas: dos para los íconos de contacto (WhatsApp y teléfono) y una más grande para el botón de contacto.
- Se utiliza position: fixed para que la barra permanezca fija en la parte inferior de la pantalla, sin importar el desplazamiento de la página.
- Se añaden padding y box-shadow para darle un diseño limpio y un poco de sombra que haga destacar la barra en la parte inferior de la pantalla.
.fixed-footer .contact a.button:- Se estiliza el botón de contacto para que tenga un fondo naranja (#ea5600), texto blanco y bordes redondeados.
- El botón tiene un padding para darle más espacio interno, y se asegura que no se estire más allá de los 200px de ancho.
- El botón se centra con margin: auto.
- @media(min-width: 768px):
- Este bloque oculta la barra fija en dispositivos con pantallas más grandes, como tablets o escritorios, asegurando que solo se muestre en móviles.
Instrucciones:
- Agrega el código CSS proporcionado al final del archivo
style.cssde tu tema hijo. - Asegúrate de que la barra se vea correctamente en dispositivos móviles.
- Puedes modificar los estilos de acuerdo a la paleta de colores o el diseño de tu sitio web.
Resumen
Como has podido observar, agregar una barra fija en dispositivos móviles con iconos de contacto como WhatsApp y teléfono es muy sencillo utilizando una combinación de código PHP y CSS. Este método no solo es efectivo sino que también mejora la experiencia del usuario, permitiendo un acceso fácil a los métodos de contacto desde cualquier página de tu sitio.
Si estás profundizando tus conocimientos en WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.
