Mostrar elementos según día y hora en WordPress

En este artículo veremos cómo seleccionar cualquier elemento de nuestro sitio web para que sólo sean visibles determinados días y horas, realizaremos esto utilizando código Javascript.

Agregar código Javascript

En un artículo anterior habíamos visto diferentes formas en que podemos agregar código Javascript en WordPress, por lo que te sugiero revisarlo antes.

Seleccionando el elemento que quieres ocultar

Para la selección del elemento, puedes hacerlo de manera similar a como seleccionas un elemento para dar estilos CSS.

En la imagen anterior para seleccionar el ítem de menú de contacto, podemos utilizar tanto el ID como las clases del elemento, por ejemplo:

#menu-item-2447
.menu-item-2447

En el caso anterior estas clases no se repetirán ya que incluyen el identificador del menú como parte del nombre, sin embargo es recomendable usar una clase o identificador padre.

Código Javascript

Una vez que tienes identificado el elemento a ocultar, entonces solo sera necesario usarlo en la constante selection del código Javascript. Ten en cuenta que puedes seleccionar varios elementos separándolos por una coma.

En este código también puedes configurar el horario de acuerdo a los días (1-7) y rango de horas (0-24) en la constante shedule, este horario indica sólo los días y horas en que el elemento estará visible.


(function( $ ) {
        'use strict';

    // Datos de ejemplo
    const schedule = {
        '1' : '8-10-15-20', // rango de horas
        '2' : '10-12'
    };

    // Selector, pueden selecionarse varios
    const selection = '#menu-item-2447, form.woocommerce-product-search';

    const current = new Date();
    const day = current.getDay();
    const hour = current.getHours();

    $(selection).hide();

    if ( schedule[day] ) {
        const hours = schedule[day].split('-')
                        .map( h => parseInt(h));

        if  ((hour >= hours[0] && hour <= hours[1]) ||
              (hour >= hours[2] && hour <= hours[3])) {
            $(selection).show();
        } 
    } 

})( jQuery );

En el código anterior:

Usamos la constante schedule para definir los días y horas en los que se mostrará el elemento o elementos seleccionados
La constante selector almacena el elemento o elementos a ocultar fuera del horario
Obtenemos la fecha actual, el día y hora del ordenador del usuario
Ocultamos los elementos seleccionados
Hacemos comprobaciones, si estamos en el día y el rango de horas, entonces mostramos el elemento

Conclusión

Tal como has podido comprobar puedes mostrar determinados elementos de tu sitio web sólo en determinados días y horas y hemos visto como realizar esto directamente a través de código.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.