X
Jhon Marreros Guzmán

Agregar Whatsapp flotante en WordPress

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>";
}

Puedes modificar el número de teléfono en la variable $tel, el número de teléfono no debe llevar espacios ni signos de ningún tipo.
Puedes modificar el mensaje por defecto en la variable $ms
Puedes descargar el icono de Whatsapp 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.

 

Artículos Relacionados

Categorías: Recursos
Etiquetas: mejorassocial

Ver comentarios (64)

  • 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:

      if ( is_page('contacto') ){
	$tel = "34123456789";
	$ms = urlencode("Este es un texto para contacto");
}
if ( is_page('servicios') ){
	$tel = "34123456789";
	$ms = urlencode("Este es un texto para servicios");
}

      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:

          function dcms_add_footer_whatsapp(){
	//Si cumple esta condición hacemos un return, sino continuará
	if ( ! is_page(xxx) && ! is_page(yyy)  ) return;

	$tel = "34123456789";
	$ms = urlencode("Este es un texto por defecto");
...
}

          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:

      function dcms_add_footer_whatsapp(){
	//Si cumple esta condición hacemos un return, sino continuará
	if ( is_page(xxx) || is_category() ) return;

	$tel = "34123456789";
	$ms = urlencode("Este es un texto por defecto");
...
}

      cambia xxx por el ID de la página, si quieres más páginas agrégalas de manera similar con la condicional ||

      Saludos.

        • Hola, en ese caso puedes usar is_single() que devuelve verdadero cuando es una entrada, tu código quedaría:

          function dcms_add_footer_whatsapp(){
	//Si cumple esta condición hacemos un return, sino continuará
	if ( is_single() ) return;

	$tel = "34123456789";
	$ms = urlencode("Este es un texto por defecto");
...
}

          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 :)

      • Gracias funciono usando:

        **CSS**
        /*ocultar burbuja de facebook messenger en articulos de blog*/
        .post-template-default .hidefbbubble {
        display: none;
        }

        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, 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: 

          $url ="https://wa.me/${tel}?text=${ms}";

          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, 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

      • 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!

  • 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 ?

  • 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.

Deja un comentario