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 era algo que siempre había 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 la 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 se vea 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 esperarlos (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 vincular a su audiencia, hace que su sitio sea más atractivo y lo posiciona como un proveedor de noticias e información actualizada. Razón suficiente para aprender a implementar uno en su sitio de WordPress.
En el siguiente artículo, le mostraremos varias formas de 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 nos entretengamos, sino que vayamos directamente al grano.
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 parte de su sitio, mostrará la hora y la fecha a sus visitantes.
Crear el código corto
Nuestro primer paso es configurar el shortcode real. Para eso, primero abriremos functions.php de nuestro tema actual. Le 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, pegamos este trozo de código al final del mismo:
|
01
02
03
04
05
|
function current_time_date(){return date('F jS, Y, H:i:s');}add_shortcode( 'time_date', 'current_time_date' ); |
Alguna información sobre eso: el código anterior es una función que escupe la fecha y la hora actuales y luego las asigna a un código abreviado llamado [time_date] . Si ingresa el código abreviado en su sitio, llamará a la función a la acción.
En el formato que hemos usado anteriormente, la hora y la fecha se muestran en este formato: 6 de julio de 2017, 12:35:41. Sin embargo, puede usar diferentes formatos que puede conocer aquí .
Ahora, para probar el código, simplemente copie el código abreviado en algún lugar de su sitio. Sin embargo, tenga en cuenta que, de forma predeterminada, los códigos abreviados no funcionan dentro de los widgets. Para usarlos, debe instalar el complemento Shortcode Widget o agregar esta línea a functions.php .
|
01
|
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 solo. En cambio, solo escupe la hora actual una vez, cuando se carga la página. Después de eso, permanece estático, lo que anula un poco el propósito, ¿no le parece?
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 que trabajemos 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 con el nombre clockbox . Por esa razón, cambié mi función anterior a la siguiente:
|
01
02
03
04
05
06
07
|
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:
|
01
|
wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js')); |
Y voilá:
Añadir estilo
Finalmente, probablemente desee poder diseñar su widget de hora y fecha para que se ajuste a su marca general. Afortunadamente, dado que la función que usamos creó la identificación de CSS, podemos agregar nuestro propio estilo al widget de fecha y hora de la siguiente manera:
|
01
02
03
04
05
|
#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 habilidades de codificación adicionales, puede hacer que sucedan muchas más cosas.
Sin embargo, si no le gusta la ruta manual, también puede lograr resultados similares con la ayuda de los complementos de WordPress.
Complementos para crear widgets de hora y fecha para su sitio web
Si bien la cantidad de complementos disponibles en el directorio de WordPress no es abrumadora, hay algunos ejemplos que hacen un trabajo bastante bueno.
Fecha de reloj en vivo
Nuestro primer competidor es este complemento. Como sugiere el nombre, le permite agregar un reloj y la fecha a su sitio web de WordPress.
Su widget de hora y fecha ofrece muchas opciones de personalización. Puedes elegir entre un ciclo de 12 o 24 horas, 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
En primer lugar, 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 de widgets, le brinda muchas formas de personalizar.
Como puede ver, puede configurar el formato de hora y fecha (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 ajuste 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 en esta lista es bastante simple. Instale, active y obtendrá un nuevo widget llamado Fecha y hora actual que puede arrastrar a cualquier área de widgets. Hecho.
El resultado se ve decente y se ajusta automáticamente al estilo de tu tema. También responde a dispositivos móviles, lo cual es imprescindible en estos días. Por otro lado, no ofrece ninguna opción para ajustar nada. Solo está disponible un formato de tiempo, para obtener más, 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 informar a sus clientes 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 paso a ti. ¿Ha utilizado un widget de hora y fecha en su sitio antes? 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