Configura icono flotante de Whatsapp en Wordpress

Configura icono flotante de Whatsapp en WordPress

Posted junio 4, 2020

Si buscas como colocar Whatsapp en WordPress sin usar plugin aquí te lo explico.

En nuestra pagina siempre vamos a querer que a la menor de la dudas nuestros clientes se comuniquen con nosotros, y que mejor que utilizar un medio de comunicación tan fácil como el Whatsapp.

Hemos visto en varias paginas web el icono de Whatsapp flotando mientras navegamos en la pagina, lo podemos confirmar aquí en nuestra web, que al darle clic al botón se comunica con un representante del sitio, sin duda hay varios plugin que lo pueden realizar y fácil de instalar, pero esta publicación hemos decidido hacerlo colocando código en nuestro tema.

Plantilla Ecommerce Plus

$50.00

Añadir al carrito

Bueno primero que nada vamos a descargar el icono que vamos a utilizar les voy a colocar por aquí una imagen que les puede ser útil es un SVG. Es el que nosotros utilizamos en nuestra web igual ustedes le pueden colocar el que ustedes gusten, puede ser uno personalizado

DESCARGAR

Esta imagen la vamos a colocar en la siguiente dirección wp-content>themes>nuestrotema>img si no cuentan con esta ultima carpeta solo créenla o en el código que les presentaremos a continuación tendrán que cambiar.

Luego con un plugin como Code Snippets o con el editor de tema nos dirigimos a nuestros funtions.php al final de todos los codigos vamos a ingresar el siguiente código.

add_action('wp_footer','dcms_add_footer_whatsapp');

function dcms_add_footer_whatsapp(){
	$tel = "50379905281";
	$ms = urlencode("Escribenos");

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

Que tenemos que cambiar de este código:

$tel = «50379905281»; Aquí colocaremos nuestro numero de contacto

$ms = urlencode(«Escribenos»); Este es un mensaje predeterminado que nosotros colocamos al presionar nuestro botón o lo podemos dejar vació.

$img = get_stylesheet_directory_uri().’/img/whatsapp-icon.svg’; Esta es la dirección donde se encuentra almacenada nuestra imagen del botón.

style=’position:fixed;bottom:40px;right:40px;’>»; Esta es la posición donde se encuentra ubicado nuestro botón dentro de nuestra pagina.

Aqui nos indica el tamaño del icono