En un artículo anterior vimos cómo agregar un enlace de Whatsapp en WordPress, sin embargo sólo era visible como parte del contenido, en este artículo veremos cómo agregar un icono de Whatsapp que se mantenga visible siempre de forma flotante en la parte inferior del sitio.
Resultado Final
Al final obtendremos algo similar a lo que se muestra en la siguiente imagen, mostrando el icono de Whatsapp de manera fija en la parte inferior de tu sitio.
Cuando se use el botón de Whatsapp se verá algo simila a lo que se muestra en la siguiente imagen:
Código necesario para mostrar Whatsapp
Puedes agregar el siguiente código PHP al final de tu archivo functions.php de tu child-theme o usando algún plugin de snippets.
add_action('wp_footer','dcms_add_footer_whatsapp');
function dcms_add_footer_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';
echo "<div id='float-whatsapp' style='position:fixed;bottom:40px;right:40px;'>";
echo " <a href=${url} target='_blank'>";
echo " <img src='${img}' width=60 height=60 />";
echo " </a>";
echo "</div>";
}
desde este enlace.
En el código anterior:
- Usamos el hook wp_footer que hace referencia a la función dcms_add_footer_whatsapp
- Dentro de la función podemos cambiar el valor del número telefónico en la variable $tel, que debe constar sólo de números
- También podemos enviar un mensaje por defecto en la variable $ms
- Con estos datos formamos la url, en la variable $url
- Hacemos referencia a la imagen de whatsapp en la variable $img, la tenemos en una carpeta img dentro del theme o child-theme
- Finalmente formamos el HTML con CSS en línea usando todos los valores de las variables anteriores
Conclusión
Como hemos visto, puedes agregar un icono de Whatsapp de manera simple en el pie de tu sitio web a través de código y sin usar plugins adicionales.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(4 votos, promedio: 5,00 de 5)
Cargando...
Excelente tutorial
Sabes solé tengo una duda como haría para que se sevea en una página diferente ya que tengo varias páginas y quería saber si es posible poner varios WhatsApp en diferentes paginas con diferentes números es posible buenos me gustaría saber si hay esa posibilidad de hacerlos
Hola, si, claro que es posible, podrías usar por ejemplo la función de WordPress is_page() para comprobar la página en la que te encuentras (como parámetro puedes poner el alias de la página o el ID).
La idea es reemplazar las dos líneas del telefono y mensaje y colocarlas en condicionales, por ejemplo:
Saludos.
Hola, estuve intentando y no tuve resultado, habrá la forma que puedas poner el código completo como se vería en cada pagina diferente con numero ya que se me complico seria genial.
Muchas gracias bendiciones 👍
y volví a intentarlo y se ve en todas las paginas yo quiero saber si se puede ver en una pagina especifica
Por ejm:
Tengo una área de Post Venta y otro de Servicios
como seria la forma correcta de poner el código completo serie genial su ayuda muchas gracias.
Hola, ¿será el mismo contacto para ambas páginas?, si es el mismo contacto para ambos entonces puedes probar:
Tienes que reemplazar xxx y yyy por los IDs de las páginas. Puedes averiguar el ID desde el backend de WordPress al ingresar a editar la página verás un parámetro en la url de la barra de direcciones de tu navegador post=xxx, donde xxx es un número
Hola,
estuve revisando y aun no encuentro resultado.
quisas no me explique bien y como no tengo conocimiento en PHP se me es complicado por ahora.
Ejm
Quisera que el boton de whatsapp sevea en una pagina especifica.
En inicio de la web no! y solo en areas que yo especifique!
en una entrada* ahi tengo el post venta* (con un numero distinto)
en otra entrada* ahi tengo are de servicios* (con un numero distinto)
en otra entrada* ahi tengo venta* (con un numero distinto)
y asi de esa manera que pueda agregar mas si fuera el caso pero
que no se repita en las demas paginas que sea independientes es posible quedo atento
muy agradecido desde ya! muchas gracias.
Como hago para ocultarlo en paginas especificas, y como hago para ocultarlo en la seccion de blog de la pagina
Hola
Puedes poner todas tus condiciones antes de que se ejecute el código, es decir, sino quieres mostrarlo en algunas páginas o en la lista de categorías puedes usar por ejemplo:
cambia xxx por el ID de la página, si quieres más páginas agrégalas de manera similar con la condicional ||
Saludos.
Muchas Gracias, y ¿para ocultarlo de todas las entradas de blog?
Hola, en ese caso puedes usar is_single() que devuelve verdadero cuando es una entrada, tu código quedaría:
Saludos.
Ya logre ocultar el boton en los blogs, gracias! Por cierto tengo el boton de Messenger pero como plugin y carga un al cargarse, ¿es posible ocultarlo tambien en las entradas de blog? hay algun comando php para ocultar plugins en ciertas paginas del sitio web, o en su defecto habra alguna opcion de cargar un estilo (display:none;) para que no salga. Serias muy bueno si me ayudas gracias 🙂
Hola, lo más práctico en ese caso, puesto que no conozco como esta programado, es ocultarlo por CSS, podrías evaluar usar la clase CSS .archive, que se crea a nivel de body y luego buscar la clase o id del elemento que quieres ocultar. Revisa el siguiente artículo y video: https://decodecms.com/estilos-css-defecto-genera-wordpress/
Gracias funciono usando:
**CSS**
/*ocultar burbuja de facebook messenger en articulos de blog*/
.post-template-default .hidefbbubble {
display: none!important;
}
y abriendo configuración del plugin y yendo a un apartado que dice «Code Snippet»:
Era
…
Le añadi algo
…
Y funciono, Ahora ya la burbuja de chat de Messenger no sale en los articulos de blog.
Hola, que bueno que lo solucionaste 🙂
Hola, muchas gracias por los tutoriales, están geniales, solo quisiera saber como poner que si están en mi página por el celular, entonces les abra la aplicación, pero si están por la web, que les abra el web whatsapp.
Muchas Gracias
Hola, eso ya lo hace el código a través de la url https://wa.me/ , esa url es parte de la API de Whatsapp y al acceder se interpreta que se irá a una web (en caso de ordenador) o a la app (en caso de un móvil)
No me funciona, pues al accesar por la Web, me arroja a una página, que pareciera que es la del Whatsapp, sin embargo no lo abre, y me dice Abre Whatsapp o descarga, al pinchar «abre», me abre el web whatsapp, pero no con los parámetros que agregamos, sino que solo lo abre…. 🙁 (Puedes verlo en la página)
Hola, tienes razón, ya he corregido el código que había un / en la formación de la url que hacia que se pierda el número, debe ser:
Gracias por el aviso.
Muchas gracias, de igualmanera no levanta ditectamente Web Whatsapp, dice que la aplicación no está instalada, pero aperece un link que dice «usar web whatsapp» y ahí si lo envía….. Muchas Gracias
Hola, si, efectivamente, en este caso particular wa.me hace eso, al parecer la API esta buscando promocionar su aplicación de escritorio. Tomaré nota para evaluar mejorar el código con una condición de detección de movil por PHP, y usar una url u otra, Aunque en el futuro puede ser que igualmente web.whatsapp.com haga algo similar.
esta URL «https://web.whatsapp.com/send?phone=»
funciona en web whatsapp y en la app sin preguntar va directamente a la app
Hola, es posible entonces que tenga una redirección, aunque en la documentación recomiendan https://wa.me
Hola, me sale el icono pero no logro hacer que se vea la imagende whatsapp solo un cuadro transparente, creo no estoy poniendo bien la ruta, subi la imagen por filezilla, tienes un tutorial de como puedo subir la imagen y poner su liga paso por paso gracias! tu canal es muy bueno sencillo y funcona
Hola, debes colocar la imagen en una carpeta img que se encuentre dentro del tema activo que estes usando. Si sigues con problemas envíame detalles a través del formulario de contacto: https://decodecms.com/contacto/
Ya pude, si busque el archivo functions dentro del tema activo como dices y puse la carpeta ahi junto y funciono muchas gracias
Hola:
A mí no me funciona el enlace si hacemos scroll por encima del footer, queda como por debajo del contenido. Algo estaré haciendo mal.
¡Gracias!
Solucionado, disculpa. Me faltaba el «z-index». Muchas gracias por el aporte.
hola buenas he visto tus comentario hermano .
me gustaria saber si a ese codigo se le puede añadir o modificar para que tome el link o url de donde el cliente mando el mensaje.. ? por ejemplo si el cliente envio el mensaje desde la pagina home, que una ves que el envie el mesaje tambien tome la url home automaticamente ?
Hola, si, pero en lugar de comprobar la url puedes comprobar la página, el home se comprueba con is_home() o is_front_page(), revisa esta respuesta: https://decodecms.com/agregar-whatsapp-flotante-en-wordpress/#comment-4675
Buen post, una duda. No me carga la imagen, solo se ve un cuadro con imagen rota. Intente desde mis archivos y con el link directo del post pero no se ve el icono de Whatsapp. Que peude ser?
Hola, revisa qué url se genera, puedes usar el inspector de código de tu navegador, asegúrate de que la url de la imagen cargue en el navegador, puedes usar la barra de direcciones, antes de usarla en el código.
Hola Jhon! Muchas gracias por todos tus tutoriales. Soy fan de no usar plugins así que tu contenido me ayuda muchísimo haciendo mi primer sitio.
Oye, quisiera preguntarte si sabes porque el logo flotante desaparece o se oculta cuando llego al footer?
Estoy tratando de no usar plugins para el footer pero he tenido problemas porque tampoco puedo insertar los códigos de Facebook de «me gusta» y «compartir» ahí.
¿A qué se deberá?
Espero puedas ayudarme. Muchas gracias.
Hola, si se esta ocultando es posible que el footer sea igualmente fixed o que tenga un z-index mayor, podrías probar agregando a z-index un valor alto. style=’position:fixed;bottom:40px;right:40px;z-index:9999′
Hola, cómo estás? Gracias por tu aporte. Queria consultarte cómo puedo hacer para que me abra el link en otra ventana diferente. Veo que está la etiqueta target blank pero no funciona. Gracias
Hola, si funciona, en el video al final lo prueba y se abre una nueva pestaña, revisa que lo hayas escrito bien, es _blank, con guion bajo al inicio.
Todo el código me funciona bien pero el icono de WhatsApp no sale
Hola, debe ser debido a una ruta incorrecta de la imagen, usa el inspector de código para ver la ruta que se genera, si sigues con problemas envía la url del sitio en donde lo implementaste para revisar.
Hola como va, pensando en páginas que usan acf, existe la posibilidad de que dentro del mensaje que se personaliza capture la url desde donde pulso el botón?. Ej:si estaba mirando un auto «X»…el mensaje diga «queria consultar más información sobre este auto : http://www.lapagina.com/el-auto-en-cuestion )
Hola, podrías probar usar la función https://developer.wordpress.org/reference/functions/get_http_origin/ para obtener la url de origen
Hola Jhon, pregunta, usé el código que compartiste y anda perfecto, pero en mi sitio versión movil no se vé, que tengo que hacer o modificar para que aparezca en la versión movil? Gracias
Hola, si se ve en tu ordenador, si que debería verse en movil, sin embargo cuida que el nombre del archivo de imagen no tenga caracteres especiales y sea de un formato adecuado (.svg, .png, .jpg) ya que en móviles algunos navegadores como safari pueden tener problemas.
He seguido todos los pasos, pero no me sale el boton flotante, yo la imagen del whatsapp la importe desde cpanel y la guarde en la carpeta images del theme. Esta bien? o estoy fallando en algo?
Hola, teóricamente lo que comentas es correcto, asegúrate de que tu imagen es accesible desde una url, luego usa esa url en el código.
Te sugiero no usar espacios ni caracteres especiales como parte del nombre de tu imagen.
Hola Jhon, gracias por tus aportes.
Una pregunta:
Si tengo varios usuarios ofreciendo sus servicios, como hacer que el boton de whatsapp obtenga un numero diferente para cada uno de ellos?
Hola, ¿desde qué página se enviaría los mensajes de Whatsapp?, si es desde alguna página del perfil de usuario, entonces podrías recuperar este dato del usuario que se esta mostrando actualmente.
Hola, ¿porque será que no se visualiza la imagen del icono?
Es posiblemente debido a la ruta en donde esta el archivo, puedes inspeccionar el código generado y comprobar qué ruta esta utilizando para la imagen, asegúrate que sea una ruta válida, puedes usar el inspector de código de tu navegador para esto.
ayuda. Ahora me quedo un problema. no puedo modificar el numero. Me aparece siempre el del ejemplo. He intentado tambien eliminando toda la linea de codigo nueva, pero sigue apareciendome el icono sin imagen y el numero de telefono de ejemplo. Es muy raro y no se por que quedo asi. Como puedo volver a eliminar el codigo?
Hola, si ya realizaste los cambios y no se reflejan, posiblemente sea un problema de cache, ya sea por un plugin de cache o por la cache del navegador. Saludos.
Hola,
Muchas gracias por compartir el código, pero en la vista móvil el icono se me va de la plantilla y se ve una columna blanca y luego el icono, ¿hay alguna manera de ajustarlo para que quede también dentro de la vista móvil y no la desconfigure?
En la vista normal el icono aparece correctamente.
gracias
Hola posiblemente requieras hacer un retoque CSS para la vista móvil, ya que tu theme debe tener algún estilo diferente para movil que entra en conflicto. Podrías revisar media queries de CSS para aplicar código sólo a la vista móvil.
Hola, Jhon. Muchas gracias por tu código.
Me gustaría preguntarte: Cómo puedo agregar un texto + función en la variable $ms?
Por ejemplo:
$ms = urlencode( Pregunta por este producto: get_the_title());
Gracias, un saludo
Hola excelente tutorial, una pregunta cómo puedo colocarlo exactamente en ese lugar pero del lado izquierdo, lo hice moviendo los valores de la posición 40 x 40, pero no es responsive, si lo veo en escritorio o en pantallas más grande no Mante una posición congruente, como lo puedo hacer responsive para todos los dispositivos?
Hola, en lugar de right:40px, usa left:40px
Hola. Lo he instalado y funciona correctamente. Sin embargo, se borra el código casi al día siguiente de la instalación.
Hola, tal vez insertaste el código en algún archivo temporal que te crea algún plugin de optimización.