Botón de WhatsApp con código y horario de atención

Vamos a poner un botón de WhatsApp de forma ligera sólo con código, añadiendo restricción horaria según la hora internacional.

Para este pequeño tutorial necesitarás:

• El plugin Code Snippets, gratis en el repositorio de WordPress o descargable aquí. (También puedes poner el código en functions.php si tienes un tema child)
• Algo de conocimiento HTML (el CSS y PHP es copiar y pegar)

Código a poner en el plugin Code snippets

add_action( 'wp_footer','cosas_al_footer' ); 
function cosas_al_footer() { 
$current_time = date('h:i:s a');
$sunrise = "7:00 am";
$sunset = "8:00 pm";
$date1 = DateTime::createFromFormat('H:i a', $current_time);
$date2 = DateTime::createFromFormat('H:i a', $sunrise);
$date3 = DateTime::createFromFormat('H:i a', $sunset);
if ($date1 > $date2 && $date1 < $date3)
{ ?>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="https://wa.me/34666666666?text=Me%20gustaría%20saber%20el%20precio%20del%20coche" class="whatsapp" target="_blank" rel="noopener noreferrer"> 
<i class="fa fa-whatsapp whatsapp-icon"></i></a>

<?php } else { ?>

<?php }}

Explicación de cada parte del código:

add_action( 'wp_footer','cosas_al_footer' ); function cosas_al_footer() {

Esto es PHP, añade lo que va a venir a continuación en la zona «wp_footer». Esta zona es un hook o gancho, un recurso de programación que el tema nos da para poder añadir código en una zona concreta. En este caso es en el footer.

$current_time = date('h:i:s a'); 
$sunrise = "7:00 am"; 
$sunset = "8:00 pm"; 
$date1 = DateTime::createFromFormat('H:i a', $current_time); 
$date2 = DateTime::createFromFormat('H:i a', $sunrise); 
$date3 = DateTime::createFromFormat('H:i a', $sunset);

Esto también es PHP, estamos definiendo las variables, es decir, estamos haciendo que por ejemplo $date1, sea la hora actual del momento en el que se ejecuta este script. Nos sirve para el código que vendrá después:

En la segunda y tercera fila puedes definir $sunrise y $sunset, que serán la hora de apertura del botón y la hora de cierre del botón de whatsapp. OJO: Esta hora es la UTC, no es la del lugar donde tú estás, por lo que consulta en google qué hora UTC es ahora y aplica el cambio horario.

if ($date1 > $date2 && $date1 < $date3) { ?>

Esta línea de PHP nos va a introducir el código que se muestra en el caso que la fecha $date1 sea mayor que la fecha $date2 y que sea menor que la $date3, lo que significa, qué se va a ver si la hora actual está dentro de las horas en las que queremos que se muestre el botón.

El contenido de si se cumple esta condición vendrá entre llaves { }, pero lo que tenemos es { ?>, esto lo que significa es que tenemos la llave de apertura, pero antes de lo que vendrá ahora cerramos el PHP (?> cierra el PHP). Esto nos permite poner código HTML sin preocuparnos.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<a href="https://wa.me/34666666666?text=Me%20gustaría%20saber%20el%20precio%20del%20coche" 
class="whatsapp" target="_blank" rel="noopener noreferrer"> <i class="fa fa-whatsapp whatsapp-icon"></i></a>

Aquí viene el código que se muestra si se cumple la condición.

En la zona del número tienes que poner tu número de whatsapp, con el código del país delante.

En este caso tenemos enlazada la hoja de estilos de font-awesome para usar el icono de whatsapp, otra opción sería poner la imagen en nuestro servidor y en vez de enlazar esta stylesheet poner la imagen, en este caso el código sería distinto, sería:

<a href=»https://wa.me/34666666666?text=Me%20gustaría%20saber%20el%20precio%20del%20coche»
class=»whatsapp» target=»_blank» rel=»noopener noreferrer»> <img src=»aquí la url de tu imagen de whtasapp»></a>

Recomiendo hacer pruebas a ver qué carga más rápido en tu caso.

<?php } else { ?>

<?php }}

Este código cierra todo el snippet. Tiene dos partes, entre ambas hay un hueco para que introduzcas el HTML que quieras que se muestre en el caso que no se cumpla la condición de que sea hora de mostrar el botón. En el ejemplo está en blanco porque no se mostrará nada que sustituya al botón.

La segunda parte cierra todo el código reabriendo el PHP para cerrar las dos llaves abiertas.

CSS para que el botón de whatsapp te quede bonito

A continuación está el código CSS para que el botón se muestre en el verde de whatsapp, fijo en la esquina inferior derecha. Puedes jugar con los valores para cambiar el diseño del botón.

.whatsapp {
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
z-index:100;
}

.whatsapp-icon {
margin-top:13px;
}