• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Barra inferior fija para móviles en WordPress

Barra inferior fija para móviles en WordPress

Barra inferior fija para móviles en WordPress

[ hace 6 meses ] [ Actualizado: hace 6 meses ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Barra inferior móviles en WordPress resultado

 

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 phone icon whatsapp icon 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;
    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;
    }
}
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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar Whatsapp flotante en WordPressAgregar Whatsapp flotante en WordPress
  • Clases CSS por defecto WordPressEstilos CSS por defecto que genera WordPress
  • Tablas Responsive en WordPressTablas Responsive en WordPress sin plugins
  • Configura el theme Twenty Twenty de WordPressConfigura el theme Twenty Twenty de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 3,67 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Añadir redes sociales sin plugins en WordPress

Configura el Tema Twenty Seventeen WordPress

¿Qué son las claves de seguridad en WordPress y cómo cambiarlas?

Propiedades avanzadas de menú en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados