✅Agregar botón contacto WHATSAPP (Sin plugins) | WordPress

¿Quieres agregar un enlace de WhatsApp a tu sitio web de WordPress? ¡No te preocupes, no necesitas usar plugins! Es muy fácil hacerlo tú mismo y personalizarlo a tu gusto.

Lo primero que necesitas es una imagen de WhatsApp que quieras utilizar. Puedes descargarla de Internet o usar una que ya tengas y subirla a la biblioteca de medios de WordPress. Una vez que tengas la imagen, sigue estos sencillos pasos:

1. Abre tu editor de WordPress y ve a la sección de «Apariencia». Luego selecciona «Personalizar».
2. Busca la sección «CSS Adicional» y ábrelo.
3. Agrega el siguiente código:

.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.whatsapp-icon:hover {
  transform: scale(1.2);
}

.whatsapp-icon img {
  display: block;
  width: 60px;
  height: 60px;
}

.whatsapp-icon span {
  display: none;
}

.whatsapp-icon:hover span {
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  padding: 5px;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  margin-left:10px;
}


Lenguaje del código: CSS (css)

4. Agrega el siguiente código en el archivo «functions.php» de tu tema hijo o si lo prefieres puedes utilizar algún plugin como CODE SNIPPETS que lo que hace es agregar un nuevo CPT donde podrás agregar todos los códigos y tenerlos organizados. Digamos que este plugin sustituye al archivo «functions.php» y así si algún día cambias de tema no perderás el código :

add_action('wp_footer', 'whatsapp_icon');
function whatsapp_icon() {
echo '<a href="https://wa.me/NUMERODETELEFONO" target="_blank" rel="noopener noreferrer" class="whatsapp-icon"><img src="RUTA-DE-LA-IMAGEN" alt="Icono de WhatsApp"><span>Contactar por WhatsApp</span></a>';
}

Lenguaje del código: PHP (php)

5. Reemplaza «NUMERODETELEFONO» con tu número de teléfono en el código anterior incluyendo el código de tú país sin el signo +.
6. Reemplaza «RUTA-DE-LA-IMAGEN» con la ruta donde se encuentra la imagen de WhatsApp que deseas utilizar.

¡Y eso es todo! Ahora deberías tener un enlace de WhatsApp que aparece en la parte inferior izquierda de tu sitio web de WordPress. Si pasas el cursor sobre el icono, aparecerá el texto «Contactar por WhatsApp».

He creado un nuevo tutorial mejorado con efectos, mensaje de bienvenida automático y varias cosas más. Échale un vistazo.

En el siguiente vídeo vamos a ver como utilizar los códigos, donde insertarlos y veremos el resultado final en nuestro WordPress.

Como puedes ver, es muy fácil hacerlo tú mismo sin necesidad de plugins. Además, puedes personalizar la posición, tamaño y estilo del icono y del texto a tu gusto retocando el código CSS.

Nos vemos en el siguiente tutorial.

Un saludo