WordPress : Agregar Whatsapp Flotante

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.

Código necesario para mostrar Whatsapp

Nota : el numero de celular se puede agregar tambien en variables globales con el Plugin Custom Global Variables 

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 = "minumerocelular";
	$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=150 height=auto />";
	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.

Analizando 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 anterior

Referencia:

https://decodecms.com/agregar-whatsapp-flotante-en-wordpress/

https://www.youtube.com/watch?v=xO0AQ8y7ewQ