Una guía para el formato de fecha y hora en Divi

Mostrar la fecha y la hora en su sitio web es una de esas cosas en las que la mayoría de la gente realmente no piensa. Tendemos a ceñirnos al formato predeterminado para la fecha de publicación en los metadatos de la publicación. Y, si tenemos tiempo, agregaremos el año actual dinámicamente a la barra de pie de página junto al texto de los derechos de autor.

Sin embargo, es útil comprender cómo formatear la fecha y la hora. Le brinda la libertad de hacer que una fecha sea más legible para los usuarios. Por ejemplo, "El lunes 23 de mayo de 2020" es un poco más cálido (y más humano) que las pantallas de fecha mínima como "5.23.20". Aunque este último sí tiene su lugar. Lo mismo ocurre con el formato de la hora actual en un sitio web. Algunos sitios pueden beneficiarse de una pantalla de 12 horas como "8:30 pm" mientras que otros (como sitios militares o médicos) prefieren una pantalla de 24 horas como "20:30".

Divi y WordPress le brindan una sorprendente cantidad de control sobre el formato de fecha y hora disponible en PHP. En este tutorial, lo ayudaremos a comprender cómo mostrar, formatear y aplicar estilo a la fecha y la hora en Divi. Podrá darle a las publicaciones de blog un formato personalizado para la fecha de publicación o incluso agregar un elemento dinámico a una llamada a la acción para darle un toque más personal (es decir, "¡Feliz lunes ! Vea nuestra nueva oferta").

¡Empecemos!

Descargue una guía de formato de fecha y hora Divi Layout GRATIS

Para ayudar a obtener un salto en el formato de fecha y hora en Divi, descargue este útil diseño de la Guía de formato de fecha y hora. Incluye ejemplos de cada formato de fecha / hora que se utiliza como contenido dinámico en un módulo de texto Divi para que pueda ver de primera mano cómo funciona cada uno en una página en vivo.

Para tener en sus manos la guía de formato de fecha y hora, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Caracteres de formato disponibles para mostrar la fecha y la hora

Como se mencionó anteriormente, Divi aprovecha el formato de fecha y hora incorporado de WordPress. Pero antes de entrar en cómo formatear una fecha y hora en Divi, es útil comprender los caracteres de formato disponibles para nosotros.

A continuación se muestra una lista de caracteres de formato disponibles que se pueden usar juntos (o combinados) para crear formatos personalizados de fecha y hora. Esto será útil cuando experimente con formatos únicos para la fecha y la hora en su sitio Divi.

Formato de fecha

Caracteres de formato DÍA

• d = Día del mes, 2 dígitos con ceros a la izquierda ("02", "22")
• D = Día del mes en tres letras ("Jun", "Jul")
• l ("L" minúscula) = Día de la semana, la palabra completa ("Lunes", "Martes")
• N = día numérico de la semana según ISO-8601 ("1" para el lunes y "7" para el domingo)
• S = sufijo para el día del mes; usar con j ("nd", "st", "rd")
• w = día numérico de la semana ("0" para el domingo y "6" para el sábado)
• z = El día del año, comenzando desde 0 (es decir, "173" o "este es el día 173 del año")

Carácter de formato SEMANA

• W = 26 (número de semana del año, semanas que comienzan el lunes; es decir, "esta es la semana 26 del año")

Caracteres de formato MES

• F = una representación textual completa de un mes ("enero" o "marzo")
• m = mes numérico, con ceros a la izquierda (junio se muestra como "06")
• M = Mes en tres letras (marzo se muestra como "Mar")
• n = mes numérico, sin ceros a la izquierda (junio se muestra como "6")
• t = Número de días en el mes dado (si junio mostraría "30")

Caracteres en formato YEAR

• Y = 2020 (año numérico de 4 dígitos; es decir, "2020")
• y = 20 (año numérico de 2 dígitos; es decir, "20")

Ejemplo de cadenas de formato de fecha

• M j, Y = 22 de junio de 2020
• F d, Y = 22 de junio de 2020
• m / d / Y = 22/06/2020
• mdY = 22.06.2020
• j M, Y = 22 de junio de 2020
• l, M d = Lunes 22 de junio
• l, F jS, Y = Lunes 22 de junio de 2020
• m · d · y = 06 · 22 · 20

Formato de hora

Caracteres en formato TIME

• a = ("am" o "pm" en minúsculas)
• A = PM ("AM" o "PM" en mayúsculas)
• g = Hora, 12 horas, sin ceros a la izquierda ("1-12")
• h = Hora, 12 horas, con ceros a la izquierda ("01-12")
• G = Hora, 24 horas, sin ceros a la izquierda ("0-23")
• H = Hora, 24 horas, con ceros a la izquierda ("00-23")
• i = 10 (minutos, con ceros a la izquierda ("00-59")
• s = 52 (segundos, con ceros a la izquierda ("00-59")
• T = Zona horaria ("CDT", "EST")

Ejemplo de cadenas de formato de tiempo

• g: ia = 4:10 pm
• g: i: sa = 4:10:52 pm

Cadenas de formato de fecha y hora

• Y / m / dg: i: s A = 2020/06/22 4:10:52 p.m.
• M j, Y @ G: i = 22 de junio de 2020 a las 16:10

Cadenas de formato de escape con "\" para incorporar texto / caracteres adicionales

Este es un truco realmente útil para personalizar la visualización de la fecha y la hora. Simplemente agregue "\" antes de cada carácter / letra que desee incluir en la cadena de formato y ese carácter se representará como lo haría normalmente (fuera de la cadena). Entonces, "/ T / h / e" representaría la palabra "The" en la cadena de formato en lugar de un elemento de fecha / hora real como Timezone ("T") u hora ("h").

• D \ a \ t ga = Lunes a las 4 p.m.
• \ T \ h \ e dS \ d \ a \ y \ o \ f F = El día 22 de junio

Formatear la fecha y la hora con Divi

Cambiar el formato de fecha predeterminado en todo el sitio

Si desea cambiar el formato predeterminado de fecha y hora en todo el sitio, WordPress tiene una opción incorporada para esto. Desde su panel de WordPress, vaya a Configuración> General. Allí verá la opción para cambiar la zona horaria predeterminada, el formato de fecha y el formato de hora.

Divi en realidad usa estos mismos formatos predeterminados cuando agrega una fecha u hora usando contenido dinámico con Divi Builder (como la fecha de publicación y la fecha actual).

Si está utilizando el diseño de publicación de blog predeterminado de Divi (no un diseño personalizado creado con Divi Builder), puede ingresar una cadena de formato de fecha personalizada que se usará para todas las publicaciones de blog en todo el sitio. Puede encontrar la opción de formato de fecha navegando a Divi> Opciones de tema y desplácese hacia abajo en la página en la pestaña General.

Curiosamente, incluso puede ingresar caracteres de formato de hora para mostrar la hora en que se publicó la publicación.

Uso del contenido dinámico de Divi para formatear y mostrar la fecha y la hora

Al usar Divi Builder, tiene la opción de agregar la fecha actual o la fecha de publicación de la publicación como contenido dinámico a cualquier módulo. Esta es una excelente manera de anular el formato de fecha y hora predeterminado caso por caso, así como de agregar un estilo personalizado al texto de fecha / hora.

Para agregar una fecha de publicación o fecha actual como contenido dinámico a su página en Divi, simplemente agregue un módulo de texto a la página.

Luego, seleccione el ícono de contenido dinámico mientras se desplaza sobre el cuadro de contenido.

Una vez que se ha agregado la fecha dinámica al contenido del módulo, puede hacer clic para editar la fecha dinámica para una mayor personalización. Estas configuraciones adicionales incluyen la opción de agregar contenido antes y después a la visualización de la fecha, así como la opción de personalizar el formato de la fecha.

Formatos de fecha incorporados de Divi

En el menú desplegable de formato de fecha, encontrará los siguientes formatos de fecha prefabricados que puede seleccionar.

• M j, Y = 22 de junio de 2020
• F d, Y = 22 de junio de 2020
• m / d / Y = 22/06/2020
• mdY = 22.06.2020
• j M, Y = 22 de junio de 2020
• l, M d = Lunes 22 de junio

Adición de un formato de fecha / hora personalizado

Para crear un formato de fecha / hora personalizado, seleccione la opción personalizada en el menú desplegable. Una vez que elija la opción personalizada, tendrá un cuadro de entrada disponible donde podrá hacer su magia agregando cualquier combinación de caracteres de formato disponibles para crear la cadena de formato perfecta para la fecha, la hora o ambos.

Este mismo proceso se puede utilizar para agregar la hora actual o la hora de publicación. Simplemente agregue los caracteres de formato de hora dentro del cuadro Formato de fecha personalizado.

Una vez que tenga el contenido en su lugar, puede usar la configuración de diseño incorporada de Divi, en la pestaña de diseño del módulo de texto, para personalizar el texto del cuerpo como desee. El formato dinámico de fecha / hora adoptará el estilo del texto del cuerpo.

Ejemplos más útiles

Año de Copyright

El formato de fecha y hora resulta útil para crear un año de copyright dinámico para el pie de página global de su sitio Divi. Aquí hay un formato personalizado que puede usar para mostrar la información de derechos de autor con el año dinámico en un solo módulo de texto.

Agregue la fecha actual como contenido dinámico a un módulo de texto. Luego edite el contenido dinámico con lo siguiente:

• Antes: ©
• Después: Empresa | Reservados todos los derechos.
• Formato de fecha personalizado: Y

Llamada a la acción dinámica

También puede agregar un formato dinámico de fecha u hora (en línea) a una llamada a la acción o encabezado en su sitio web Divi. Para hacer esto, agregue una fecha actual como contenido dinámico a un módulo de texto. Luego actualice lo siguiente:

• Antes:

  <h1>It's

• Después:

  ... <br>Time to Design!</h1>

• Formato de fecha personalizado: l… \ a \ f \ t \ e \ rga

Observe que el encabezado h1 se agrega al elemento usando etiquetas html en las entradas antes y después. La palabra "martes" se muestra con la "l" en el cuadro de formato de fecha personalizado, seguida de la palabra "después de" usando "\" para escapar de la cadena de formato. Luego, la "g" y la "a" se utilizan para mostrar las "6 pm"

Luego puede personalizar los estilos de encabezado h1 en la pestaña de diseño.

Pensamientos finales

Con suerte, esta publicación tiene (y sigue siendo) una guía útil sobre cómo formatear la fecha y la hora en Divi. Si eres como yo, tus ojos se han abierto a algunas opciones de formato sorprendentes que puedes lograr sin un complemento y con un código personalizado.

Espero tener noticias tuyas en los comentarios.

¡Salud!