Crear un botón flotante de llamada directa en WordPress

¡Buenos días! En este vídeo-tutorial vamos a ver cómo crear un botón flotante que permite a los usuarios clickar en él y llamarnos directamente al móvil que indiquemos. Y lo haremos sin utilizar plugins 🙂 ¡Vamos allá!

Veamos cómo lo hemos hecho.

Creamos el botón con PHP y HTML

Para ello hemos utilizado una función de PHP que simplemente incrusta un poco de HTML en el footer de nuestra web.

La siguiente función la puedes insertar en el functions.php de tu tema, en un plugin de Snippets o con otros métodos de insertar PHP en WordPress.

function bps_call_button () { ?>

  <a href="tel:600000000">
  	<div id="call-me">
		<img src="http://empresiona.local/wp-content/uploads/2019/05/telephone.png">	
 	</div>
  </a> 
  
<?php
}

add_action('wp_footer', 'bps_call_button');

Acuérdate de cambiar dos cosas:

• El número de teléfono, que se indica justo después de tel: , en la etiqueta <a>.
• El icono del botón de llamada, entre las comillas del src=””, en el <img>.

Para obtener la URL de una imagen subida a tus medios puedes irte a Medios > Biblioteca y hacer click sobre alguna imágen. Tendrás el enlace en la parte derecha:

Ahora sólo queda darle estilos a ese botón y hacer que sólo se vea en los móviles.

Estilizamos el botón de llamada con CSS

Para insertar CSS en WordPress también tenemos varias opciones así que elige la que mejor te funcione.

El CSS que he utilizado en el vídeo es el siguiente:

#call-me {
	position:fixed;
	right:20px;
	bottom:20px;
	width:50px;
	height:50px;
	background-color:#6cc;
	padding:15px;
	border-radius:50%;
}

@media screen and (min-width:500px) {
	#call-me {
		display:none
	}
}

Puede que necesites modificarlo un poco para adaptar los estilos a tu web y al icono de llamada que elijas.

¡Y ya estamos! Con esto ya tenemos el botón mostrándose en todas las páginas y sólo en pantallas de móviles.