En esta entrada se va explicar como crear un div flotante para presentar cierta información en nuestro WordPress.
Aunque en vez de div o capa, se puede decir que vamos a crear un «botón flotante».
La idea es hacer algo similar al clásico botón de subir hacia arriba de cualquier web o un botón de contacto rápido para WhastApp.
Se va a crear una función en el fichero functions.php de nuestro tema que va a pintar ese botón, recuerda que es recomendable trabajar con el tema hijo para evitar pérdidas de código, y luego, le daremos estilo con CSS y haremos que sea flotante gracias a la propiedad position fixed.
Índice de contenidos
Parte 1: Código a añadir en el functions.php
Nos apoyamos en la acción wp_footer para llamar a una función que va a devolver el botón flotante.
Ahora, se debe insertar el código CSS que «va a convertir» el div o html del punto anterior en flotante y quedando siempre fijo a pesar de que se haga scroll.
Parte 2: CSS para hacer el botón flotante
Copia este CSS y añádelo a tu tema
No tienes que hacer nada más, el botón flotante ya debiera de aparecer en tu web.
Si pegas el botón muy arriba o muy abajo, puede que la cabecera de página o el pie quede por encima de tu botón, si te pasa esto, incremente el valor de la propiedad z-index hasta que salga por encima de ese elemento.
Otras variaciones del botón
En este ejemplo, el botón aparece abajo a la derecha, pero si puede situar en cualquier parte de nuestra web.
Botón abajo a la izquierda
Modifica los valores bottom y left a tu criterio.
Arriba a la izquierda
Modifica los valores top y left a tu criterio.
A la derecha y centrado verticalmente
Deja el valor top a 50vh y el right a tu criterio.
Fantástico tutorial, Javier. Muy bien explicado y muy útil sin duda.
Una pregunta de todas formas: ¿Cómo se debería hacer/modificar el código para que el texto del botón flotante sea multi-idioma?
Mi idea es que en la versión en inglés aparezca la palabra «Help» y en la versión en castellano «Ayuda».
Muchas gracias de antemano.
¡Hola Alejandro!
Me alegro que te haya servido.
Esto que dices es un pelín más técnico, puedes usar JavaScript.
Por ejemplo, para cambiar el texto del botón puedes «acceder» al botón por su id, imagina que es «floating-div» (siguiendo el mismo ejemplo) y modificar su innerHTML, algo tipo a:
let button = document.getElementById("floating-div-top-left");
button.innerHTML="algo";
Luego para que varíe según el idioma puedes usar en JS el elemento window.location.href y ahí ver si contiene un idioma u otro, mira el método contains de JS para saber si hay un string en una cadena de caracteres y así poder saber el idioma.
Así todo, si usas un plugin multi-idioma fijo que puedes añadir el string de «Ayuda» y su traducción a inglés correspondiente para que este cambio de texto sea «automático».
¡Un saludo y suerte con el cambio!