Barra inferior fija para móviles en WordPress

En este artículo veremos cómo agregar una barra inferior en móviles y que permanezca fija al hacer scroll, la barra contendrá algunos enlaces que consideramos útiles para la funcionalidad de nuestro sitio web.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

 

Código PHP para generar el código HTML de la barra

El siguiente código incluye código HTML y código Javascript, también nos basamos en el código del artículo agregar whatsapp flotante en WordPress.

<?php // No copiar esta línea

add_action('wp_footer', 'dcms_add_fixed_button_bar');
function dcms_add_fixed_button_bar(){
//      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";
        $ms = urlencode("Este es un texto por defecto");
        $url = "https://wa.me/$tel?text=$ms";
        $img = get_stylesheet_directory_uri().'/img/whatsapp-icon.svg';
    ?>
    <div class="whatsapp">
        <a href="<?= $url ?>">
            <img src="<?= $img ?>" width=60 height=60  alt="icon"/>
        </a>
    </div>
    <?php
}

function dcms_add_phone(){
        $tel = "+34000000000";
        $img = get_stylesheet_directory_uri().'/img/telephone-icon.svg';
    ?>
    <div class="phone">
        <a href="tel:<?= $tel ?>">
            <img src="<?= $img ?>" width=46 height=46  alt="icon"/>
        </a>
    </div>
    <?php
}

 
En el código anterior:

• Usamos el hook wp_footer que hace referencia a la función dcms_add_fixed_button_bar()
• Dentro de esta función opcionalmente podemos descomentar la condicional wp_is_mobile(), para sólo generar ese código si estamos en un dispositivo móvil
• Creamos el código HTML para la sección inferior, vemos que el código hace referencia a otras funciones PHP para crear el botón de whatsapp y el de teléfono
• También incluimos código javascript para mostrar/ocultar la barra cuando se hace scroll

Puedes agregar el código anterior en el archivo functions.php de tu tema hijo.

Puedes descargar los iconos desde este enlace

 

Código CSS para estilizar la barra

El siguiente código CSS usa las clases CSS creadas anteriormente con el código PHP.

.fixed-footer{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    width: 100%;
    position:fixed;
    bottom:0;
    padding: 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;
}

.fixed-footer .whatsapp{
    margin-top: -6px;
}

@media(min-width: 768px){
    .fixed-footer{
        display: none;
    }
}

Puedes agregar el código anterior en el archivo style.css de tu tema hijo.

 

Conclusión

Como has podido comprobar, puedes tener una barra inferior fija en tu sitio web cuando se esta mostrando en un móvil y mostrar iconos de contacto de manera simple a través de código.

 

Suscríbete a DecodeCMS:  

 

La entrada Barra inferior fija para móviles en WordPress es un artículo reciente del sitio DecodeCMS.