Cómo Crear un Botón de WhatsApp en WordPress sin Plugins

Dificultad Media

Cuando hablamos de personalizar nuestra experiencia en WordPress, la programación a medida se convierte en nuestra mejor aliada. No solo nos permite tener un control total sobre el aspecto y la funcionalidad de nuestro sitio, sino que también nos brinda la libertad de implementar características específicas, como un botón de WhatsApp, sin depender de plugins adicionales. Lo mejor de crear desarrollos a medida a través del fichero functions.php de WordPress es que ayudamos a que la velocidad de carga no se vea mermada, ya que nos estaremos ahorrando un plugin que probablemente tenga funcionalidades que no te sirvan para nada.

Creando un Botón de WhatsApp en WordPress: Paso a Paso

Ahora, entremos en la esencia de nuestro objetivo: ¿cómo creamos un botón de WhatsApp sin depender de plugins externos?

Registro del Número de Teléfono

En primer lugar, necesitamos registrar el número de teléfono que estará vinculado al botón de WhatsApp. Para ello, accedemos al panel de administración de WordPress y dirigimos nuestra atención al archivo functions.php. Como he mencionado en anteriores artículos, lo ideal es editar este fichero en un tema hijo de WordPress o Child Template.

// Función para registrar el número de teléfono
function registrar_numero_whatsapp() {
    return '1234567890'; // Reemplaza con tu número de teléfono
}

Este código nos proporciona la flexibilidad de cambiar el número de teléfono según sea necesario.

Generación del Código HTML del Botón de WhatsApp

Ahora, generemos el código HTML necesario para el botón de WhatsApp. Este código se colocará donde queramos que aparezca el botón en nuestro sitio.

// Función para generar el código HTML del botón de WhatsApp
function generar_boton_whatsapp() {
    $numero_whatsapp = registrar_numero_whatsapp();
    echo "<a class='whatsappBtn' href='https://wa.me/{$numero_whatsapp}' target='_blank' rel='noopener noreferrer'>¡Contáctanos por WhatsApp!</a>";
}

Este código crea un enlace que abrirá WhatsApp con el número registrado cuando se hace clic.

Integración en el Tema de WordPress

Finalmente, necesitamos integrar estas funciones en nuestro tema de WordPress. Esto se logra llamando a las funciones en el lugar adecuado de nuestro tema.

// Llamamos a las funciones en el tema
add_action('wp_footer', 'generar_boton_whatsapp');

Asegúrate de que esta llamada se encuentre en una posición adecuada dentro del tema para garantizar que el botón aparezca donde lo deseas.

Formas rápidas de añadir el botón de WhatsApp a tu web en WordPress sin plugins

Si por ejemplo, queremos integrar el botón de WhatsApp directamente en un fichero que utilice la plantilla en todas las secciones, como por ejemplo el fichero del footer, podemos utilizar el siguiente código:

<a class="whatsappBtn" href="https://api.whatsapp.com/send?phone=34123456788&amp;text=Hola! He visto la web de TUDOMINIO.com y me gustaría saber más sobre:" title="Contacta con TUEMPRESA por WhatsApp"><i class="fab fa-whatsapp"></i> </a>

Podemos ubicarlo también en el fichero de la cabecera ya que el botón se mantendrá estático durante la navegación. De nuevo te recomiendo hacerlo en un tema hijo de WordPress y no directamente sobre el tema principal. Para que se vea completo este botón, debes añadir font-awesome a tu WordPress.

Estilos CSS para tu botón de WhatsApp sin plugins

Dado que este botón cumple una función clara, lo ideal es que esté ubicado a la altura del dedo pulgar, lo ubicaremos en la zona inferior derecha. Utilizaremos los colores corporativos de WhatsApp, de forma que sea lo más reconocible para cualquier persona. Recomiendo utilizar los colores corporativos de WhatsApp y no los de tu imagen corporativa por cuestiones de agilidad, «entendimiento» por parte del usuario y por otra cuestión clara: al utilizar tus colores corporativos el botón pueda quedar «demasiado integrado» en el diseño y que pierda visibilidad.

Hay momentos importantes para preocuparte por tu imagen corporativo, pero este, bajo mi punto de vista, no es el momento. A continuación dejo el css para que tu botón destaque sin llegar a ser invasivo:

/* WHATSAPP BTN SIN CHAT */
.whatsappBtn {
    font-size: 1em;
    color: #fff;
    background-color: green;
    padding: 10px 15px;
    border-radius: 50px;
    position: fixed;
    width: auto;
    right: 20px;
    text-align: center;
    bottom:20px;
    z-index: 9;
}

.whatsappBtn i {
    font-size: 40px;
}

.whatsappBtn:hover i, .whatsappBtn:hover {
    color:#fff;
}

Cualquier comentario será bienvenido 🙂