Cómo insertar un botón flotante de WhatsApp en TODO el sitio WordPress (sin plugins)

Con esta publicación aprenderás a insertar un botón flotante de Whatsapp en todo el sitio WordPress (sitewide).

• Tiempo de implementación: 2 min
• Nivel de dificultad: Fácil

Si lo que buscas es insertar el botón de Whatsapp en páginas o entradas específicas mira esta otra entrada:

Cómo insertar un botón flotante de WhatsApp en una página o entrada de WordPress (sin plugins)

Modifica el archivo functions.php del tema

Este método implica añadir código al archivo functions.php de tu tema. Es una solución eficiente, pero requiere precaución para evitar errores.

Paso 1: Acceder al archivo functions.php

1. Accede al panel de administración de WordPress.
2. Ve a “Apariencia” > “Editor de temas”.
3. En el panel derecho, busca y selecciona el archivo functions.php.

Paso 2: Añadir el código

Añade el siguiente código al final del archivo functions.php:

function add_whatsapp_button() {
    ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css">

    <a href="https://api.whatsapp.com/send?phone=TUNUMERODETELEFONO&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20sus%20servicios." class="float" target="_blank" rel="noopener noreferrer" aria-label="Chatear por WhatsApp">
      <i class="fab fa-whatsapp my-float"></i>
    </a>

    <style>
    .float {
      position: fixed;
      width: 60px;
      height: 60px;
      bottom: 40px;
      right: 40px;
      background-color: #25d366;
      color: #FFF;
      border-radius: 50px;
      text-align: center;
      font-size: 30px;
      box-shadow: 2px 2px 3px #999;
      z-index: 100;
      transition: all 0.3s ease;
    }

    .float:hover {
      background-color: #128C7E;
      transform: scale(1.1);
    }

    .my-float {
      margin-top: 16px;
    }

    @media screen and (max-width: 767px) {
      .float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
      }
      
      .my-float {
        margin-top: 13px;
      }
    }
    </style>
    <?php
}
add_action('wp_footer', 'add_whatsapp_button');

Paso 3: Personalizar el botón

Asegúrate de reemplazar TUNUMERODETELEFONO con tu número de WhatsApp real, incluyendo el código de país.

Personaliza el mensaje predeterminado en el parámetro text= del enlace si lo deseas. Recuerda usar %20 para espacios y %21 para signos de exclamación.

Si sabes hacerlo, también puedes personalizar el CSS para cambiar los colores o la posición del botón flotante.

Paso 4: Guardar los cambios

Haz clic en “Actualizar archivo” para guardar los cambios en functions.php.

¡Ya está! Asegúrate de purgar la caché si estás utilizando algún plugin de caché.