5 formas de agregar un widget de fecha y hora a su sitio web de WordPress

Mostrar un widget de fecha y hora es algo que comenzó con los sitios web de los periódicos. Obtener la fecha de hoy de su periódico es algo que siempre ha sido parte de la vida de las personas. Cuando el periodismo impreso se trasladó a la web, eso no iba a cambiar.

Sin embargo, mostrar la fecha y hora actuales no es solo para sitios web de noticias. Hay muchas razones por las que otros sitios deberían pensar en hacer lo mismo:

• Puede mostrar la hora actual en su zona horaria para que los clientes sepan cuándo pueden comunicarse con el servicio de atención al cliente.
• Hace que su sitio parezca vivo y relevante, incluso si su contenido es un poco más antiguo. Esto es importante ya que la mayoría de nosotros buscamos la información más reciente y actualizada.
• Si tiene próximos eventos en su página, la hora y la fecha actuales ayudan a los visitantes a comprender cuánto tiempo más deben esperar por ellos (alternativamente, use un módulo de temporizador de cuenta regresiva como el que se incluye en el tema Divi)

En resumen, mostrar un widget de fecha y hora ayuda a unir a su audiencia, hace que su sitio sea más atractivo y lo posiciona como un proveedor de noticias e información actualizadas. Razón suficiente para aprender a implementar uno en su sitio de WordPress.

En el siguiente artículo, le mostraremos varias formas en las que puede crear un widget de fecha y hora para su sitio web. Primero, repasaremos cómo hacerlo manualmente, luego hablaremos sobre algunas soluciones de complementos que le permiten hacer lo mismo sin ningún tipo de codificación.

¿Suena bien? Entonces, no vayamos directamente a eso.

Cómo crear un widget de fecha y hora manualmente en WordPress

Una forma de incluir la hora y la fecha actuales en su sitio es codificar una solución usted mismo. Esto es lo que haremos primero. Crearemos un código abreviado simple que, si se ingresa en cualquier lugar de su sitio, mostrará la hora y la fecha a sus visitantes.

Crea el código corto

Nuestro primer paso es configurar el shortcode real. Para eso, primero abriremos functions.php de nuestro tema actual. Recomendamos encarecidamente que utilice un tema secundario para no perder ningún cambio cuando se actualice su tema principal.

Una vez que hayamos abierto el archivo, pega este fragmento de código al final:

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

Algo de información sobre eso: El código anterior es una función que escupe la fecha y hora actual y luego la asigna a un código abreviado llamado [time_date] . Si ingresa el código corto en su sitio, entonces activará la función.

En el formato que hemos utilizado anteriormente, la hora y la fecha se emiten en este formato: 6 de julio de 2017, 12:35:41. Sin embargo, puede utilizar diferentes formatos que puede conocer aquí.

Ahora, para probar el código, simplemente copie el shortcode en algún lugar de su sitio. Sin embargo, tenga en cuenta que, de forma predeterminada, los códigos cortos no funcionan dentro de los widgets. Para usarlos, debe instalar el complemento Shortcode Widget o agregar esta línea a functions.php .

add_filter('widget_text','do_shortcode');

Después de eso, aquí está el resultado:

Cambiar a JavaScript

Se ve bien hasta ahora, ¿no? Sin embargo, si sigue los pasos anteriores, notará rápidamente que el reloj no se actualiza. En cambio, solo escupe la hora actual una vez, cuando se carga la página. Después de eso, permanece estático, lo que frustra un poco el propósito, ¿no estás de acuerdo?

Esto se debe a que PHP es un lenguaje del lado del servidor, lo que significa que debe realizar llamadas adicionales al servidor para actualizar la información. Por esa razón, es mejor trabajar con un lenguaje del lado del cliente como JavaScript.

Afortunadamente, hay muchos relojes JavaScript disponibles en la red. Una breve búsqueda en Google mostrará muchos ejemplos. Usé este servicio para generar el código JavaScript para mi formato deseado. Después de eso, ingresé el código en un archivo llamado clock.js que copié en mi carpeta de temas.

El script requiere un div del nombre clockbox . Por esa razón, cambié mi función anterior a la siguiente:

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

Ahora, todo lo que queda es llamar a mi nuevo archivo JavaScript:

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

Y voilá:

Agregar estilo

Finalmente, probablemente desee poder diseñar su widget de fecha y hora para que se ajuste a su marca general. Afortunadamente, dado que la función que usamos creó la ID de CSS, podemos agregar nuestro propio estilo al widget de fecha y hora de la siguiente manera:

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

Aquí está el resultado:

Eso no fue tan difícil ahora, ¿verdad? Te dije que sería fácil. Sin embargo, esta es solo una forma de crear su propio widget de fecha y hora. Con opciones de codificación adicionales, puede hacer que sucedan muchas más cosas.

Sin embargo, si no es uno de los que practican la ruta manual, también puede lograr resultados similares con la ayuda de los complementos de WordPress.

Complementos para crear widgets de fecha y hora para su sitio web

Si bien la cantidad de complementos disponibles en el directorio de WordPress no es abrumadora, hay algunas muestras que hacen un trabajo suficientemente bueno.

Fecha del reloj en vivo

Nuestro primer contendiente es este complemento. Como su nombre indica, le permite agregar un reloj y la fecha a su sitio web de WordPress.

Su widget de fecha y hora ofrece muchas opciones de personalización. Puedes elegir entre un ciclo de 12 o 24 horas, si actualizar el reloj cada minuto o segundo, mostrar u ocultar la fecha y determinar su orden. El widget incluso tiene una sección para CSS personalizado para que pueda usar la misma fuente que su sitio web y más.

Desafortunadamente, las opciones de formato son algo limitadas. Por ejemplo, no es posible eliminar el día de la semana de la fecha. Sin embargo, aparte de eso, el complemento hace lo que se supone que debe hacer.

Widget de fecha y hora

Primero, una pequeña advertencia. Este complemento es un poco antiguo y se actualizó por última vez hace dos años. Como consecuencia, no hay garantía de que funcione con todos los temas modernos y la última versión de WordPress. Sin embargo, dado que funcionó bien en mi prueba con WordPress 4.8 y ofrece un buen conjunto de opciones, pensé que valía la pena incluirlo.

Después de la instalación, el complemento agrega un nuevo widget de fecha y hora al menú de widgets. Cuando lo agrega a un área con widgets, le brinda muchas formas de personalizarlo.

Como puede ver, puede configurar el formato de fecha y hora (o deshabilitarlo por completo), cambiar la familia y el tamaño de la fuente, así como el color del texto y el color de fondo (incluidos los códigos hexadecimales). De esa manera, es fácil hacer que el widget se adapte a su tema. Si eso no es suficiente, el widget tiene suficientes clases HTML para que pueda implementar sus propias reglas CSS personalizadas con facilidad.

Fecha y hora actual

El complemento final de esta lista es bastante simple. Instale, active y obtendrá un nuevo widget llamado Fecha y hora actuales que puede arrastrar a cualquier área de widgets. Hecho.

El resultado se ve decente y se ajusta automáticamente al estilo de su tema. También responde a dispositivos móviles, lo que es imprescindible en estos días. Por otro lado, no ofrece opciones para ajustar nada. Solo está disponible un formato de hora, para obtener más información, debe comprar la versión pro.

Conclusión

Hay muchas razones para mostrar un widget de fecha y hora en su sitio de WordPress. Es una buena manera de que sus clientes sepan cuándo pueden comunicarse con usted, qué tan actualizado es su contenido y más.

Como ha visto en lo anterior, hay varias formas de implementar esto en WordPress. Una es configurar su propio código abreviado para implementar el widget en cualquier lugar que desee. Por supuesto, también hay complementos que pueden hacer lo mismo por usted. Si bien no es abrumador, hay algunos contendientes sólidos por ahí.

Ahora te toca a ti. ¿Ha utilizado antes un widget de fecha y hora en su sitio? Si es así, ¿para qué lo necesitaba y cómo lo implementó? Háganos saber en la sección de comentarios.

Imagen en miniatura del artículo de Jane Kelly / shutterstock.com