Icono flotante de WhatsApp

Si quieres agregar un icono flotante de WhatsApp en todas las páginas de tu web, puedes utilizar un plugins y agregar de una manera fácil y sencilla, Pero este método requiere que agregues código de terceros y esto puede afectar la seguridad de tú proyectos web.

Yo recomiendo utilizar la menor cantidad de plugins en tu WordPress y siempre que te sea posible utiliza códigos que escribas tú mismo y así hace una web más segura y más ligeras, Esto te ayudara a optimizar la velocidad de web y a mejorar el SEO.

Como inserta WhatsApp a una web sin Plugins

Si prefieres evitar el uso de plugins y prefieres insertar el icono de WhatsApp flotante en toda la web de WordPress manualmente, puedes seguir estos pasos:

Si solo quieres agregar el icono de WhatsApp a solo una página, entra al siguiente link: Icono flotante de WhatsApp en Una Página

1. Accede al panel de administración de WordPress y navega hasta la sección de «Apariencia» y luego «Editor».
2. En el Editor, busca el archivo «functions.php» en la columna derecha. Haz clic en él para editarlo. Antes de realizar cualquier cambio en el archivo «functions.php», es muy importante hacer una copia de seguridad del mismo. Puedes copiar el código existente en un archivo de texto o hacer una copia de seguridad completa del archivo.
3. A continuación, agrega el siguiente código al final del archivo «functions.php»:

function add_whatsapp_icon() {
    echo '<a href="https://api.whatsapp.com/send?phone=XXXXXXXXXXXXX" class="whatsapp-float" target="_blank"><i class="fa fa-whatsapp"></i></a>';
}
add_action('wp_footer', 'add_whatsapp_icon');

Una vez que hayas agregado el código, guarda los cambios en el archivo «functions.php».

4. A continuación, navega a la sección de «Apariencia» y luego «Editor». Busca el archivo «style.css» en la columna derecha y haz clic en él para editarlo.
5. Agrega el siguiente código al final del archivo «style.css» para aplicar estilos al icono flotante de WhatsApp:

.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
font-size: 24px;
z-index: 9999;
}

6. Guarda los cambios en el archivo «style.css».

Una vez completados estos pasos, el icono de WhatsApp flotante debería aparecer en tu sitio web de WordPress en la esquina inferior derecha. Los usuarios podrán hacer clic en él para iniciar una conversación en WhatsApp contigo.

Si por alguna razón al cargar el código CSS no se visualiza el icono de WhatsApp, simplemente el círculo verde, esto quiere decir que tu tema no tiene configurada la opción para cargar iconos de la librería fontawesome.com. Para solucionar esto te dejaré este código, el cual debes agregarla en el archivo «functions.php» igual que como hicimos en el paso número 3.

function font_awesome_script() {
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array());
}
add_action('wp_enqueue_scripts','font_awesome_script');

Con esto debe quedar todo solucionado.

Recuerda que hacer cambios directamente en los archivos principales de WordPress puede tener implicaciones si no se realiza correctamente. Es recomendable tener conocimientos básicos de desarrollo web y hacer una copia de seguridad antes de realizar cualquier modificación.

Vídeo para agregar icono flotante de WhatsApp