Agregar el botón de WhatsApp a mi WordPress

Este botoncito flotante de WhatsApp que se ha puesto de moda entre los sitios web comerciales, que lo que hacen es complementar la funcionalidad para CONECTAR AL CLIENTE, ya desde hace muchos años el cliente ya no está para “escribir en el formulario de CONTACTO” y ver que el mensaje de “Te contactaremos lo más rápido posible” es lo más lejano a la realidad. Bueno, pues este botoncillo se puede agregar a través de un plugin en el directorio de Plugins de WordPress pero te quiero presentar mi versión, el cómo lo hubiera hecho el adanzilla.

Así que vamos a aprender cómo agregarlo a nuestro sitio web (WordPress)

Pueden descargarlo desde github https://github.com/adanzilla/PrettyChatAppButton o dándole click aquí para descargarlo las instrucciones son super sencillas

Vía FTP

1. Descarga el archivo
2. Descomprímelo
3. Sube la carpeta a /wp-content/plugins
4. En administrador > plugins podrás activarlo
5. En administrador > apariencia > personalizar > WhatsApp Button configura el número al que deben de llegar los mensajes y el tamaño del botón

Vía Dashboard de WordPress

1. En administrador > plugins da click en el botón agregar nuevo 
2. Da click en el botón cargar plugin
3. Sube el archivo ZIP que descargaste
4. Actívalo
5. En administrador > apariencia > personalizar > WhatsApp Button configura el número al que deben de llegar los mensajes y el tamaño del botón

Y vamos a aprender cómo funciona

Desde que mi gran maestro @John AS me comentó “Hazte un plugin” en respuesta a un problema que tenía con WordPress, he escrito una decena de Plugins para WordPress, el 99% han sido personalizados para cubrir una funcionalidad específica del cliente pero, en esta ocasión quise publicar un Plugin de en el Directorio de Plugins de WordPress, la funcionalidad no es la gran ciencia, en realidad existe un billón de plugins que te agregan un botón de WhatsApp a tu WordPress, pero quería utilizarlo como ejemplo para enseñar y demostrar una forma de hacerlo.

El código completito está por supuesto en GITHUB

Y basicamente lo que hacemos es con jQuery generar el elemento <img> dentro de un elemento <a> porque seremos todo menos puercos para programar (aunque @lair_nula diga lo contrario)

	var button_whatsapp = jQuery('<a>');
	
	button_whatsapp
		.addClass('whatsapp-button')
		.prop({ 
			'href' : 'https://wa.me/'+wabutton_ajax.conf.number+'?text=' + wabutton_ajax.conf.message,
			'target' : '_blank'
		})
		.css({
			'position' : 'fixed',
			'bottom' : wabutton_ajax.conf.bottom,
			'right' : wabutton_ajax.conf.right,
			'width' : wabutton_ajax.conf.width,
			'height' : wabutton_ajax.conf.height,
			'z-index' : wabutton_ajax.conf.zindex,
		});


	var logo = jQuery('<img>');

	logo
		.addClass('whatsapp-button')
		.prop({ "src" : wabutton_ajax.logo_whatsapp });


	jQuery( button_whatsapp ).append( logo );
	jQuery('body').append( button_whatsapp );

Pero para pasar los valores de configuración al script de jQuery nos valemos de wp_localize_script() quien es la función que nos ayuda a pasar argumentos a nuestro script, claro siempre y cuando hayamos agregado de forma correcta como lo dicta nuestro viejo post “Agregar SCRIPTS a mi WordPress de forma correcta”

        wp_enqueue_script( 'WAButton', WABUTTON_PLUGIN_URL . 'js/main.js', [ "jquery" ], WABUTTON_VERSION, true );
        wp_localize_script('WAButton', 'wabutton_ajax', [ 
			'ajax_url'            => admin_url( 'admin-ajax.php'), 
			'wabutton_plugin_url' => WABUTTON_PLUGIN_URL, 
			'site_url'            => site_url( "/" ),
			'logo_whatsapp'       => WABUTTON_SRC_LOGO,
			'conf'                => $conf
        ]);

A grandes rasgos es como funciona nuestro plugin, para mayor detalle pueden checar el código en GITHUB el cual es público o directamente con su servidor.