Una guida alla formattazione di data e ora in Divi

La visualizzazione della data e dell'ora sul tuo sito Web è una di quelle cose a cui la maggior parte delle persone non pensa davvero. Tendiamo a mantenere la formattazione predefinita per la data di pubblicazione sui metadati dei post. E, se abbiamo tempo, aggiungeremo dinamicamente l'anno in corso alla barra del piè di pagina accanto al testo del copyright.

Tuttavia, è utile capire come formattare la data e l'ora. Ti dà la libertà di rendere una data più leggibile per gli utenti. Ad esempio, "Lunedì 23 maggio 2020" è un po' più caldo (e più umano) di una data minima visualizzata come "5.23.20". Anche se quest'ultimo ha il suo posto. Lo stesso vale per la formattazione dell'ora corrente su un sito web. Alcuni siti possono trarre vantaggio da un display di 12 ore come "20:30", mentre altri (come siti militari o medici) preferiscono un display di 24 ore come "20:30".

Divi e WordPress ti offrono una quantità sorprendente di controllo sulla formattazione di data e ora disponibile in PHP. In questo tutorial, ti aiuteremo a capire come visualizzare, formattare e modellare la data e l'ora in Divi. Sarai in grado di dare ai post del blog un formato personalizzato per la data di pubblicazione o persino aggiungere un elemento dinamico a un invito all'azione per un tocco più personale (ad es. "Buon lunedì ! Dai un'occhiata al nostro nuovo affare.").

Iniziamo!

Scarica GRATUITAMENTE una guida alla formattazione di data e ora Divi Layout

Per avere un'idea della formattazione di data e ora in Divi, scarica questo utile layout della Guida alla formattazione di data e ora. Include esempi di ogni formato di data/ora utilizzato come contenuto dinamico in un modulo di testo Divi in ​​modo da poter vedere in prima persona come funziona ciascuno su una pagina live.

Per mettere le mani sulla guida alla formattazione di data e ora, dovrai prima scaricarla utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Caratteri di formato disponibili per la visualizzazione di data e ora

Come accennato in precedenza, Divi sfrutta la formattazione di data e ora integrata di WordPress. Ma prima di capire come formattare una data e un'ora in Divi, è utile comprendere i caratteri di formattazione a nostra disposizione.

Di seguito è riportato un elenco di caratteri di formato disponibili che possono essere utilizzati insieme (o combinati) per creare formati di data e ora personalizzati. Questo sarà utile quando sperimenterai formati unici per data e ora sul tuo sito Divi.

Formattazione della data

Caratteri in formato GIORNO

• d = giorno del mese, 2 cifre con zeri iniziali (“02”, “22”)
• D = Giorno del mese in tre lettere (“Jun”, “Jul”)
• l (minuscolo "L") = giorno della settimana, la parola completa ("lunedì", "martedì")
• N = giorno numerico della settimana ISO-8601 (“1” per lunedì e “7” per domenica)
• S = suffisso per il giorno del mese; utilizzare con j ("nd", "st", "rd")
• w = giorno numerico della settimana (“0” per domenica e “6” per sabato)
• z = Il giorno dell'anno, a partire da 0 (es. “173” o “questo è il 173° giorno dell'anno”)

Carattere formato SETTIMANA

• W = 26 (numero della settimana dell'anno, settimane che iniziano il lunedì; es. "questa è la 26a settimana dell'anno")

Caratteri in formato MESE

• F = Una rappresentazione testuale completa di un mese ("gennaio" o "marzo")
• m = mese numerico, con zeri iniziali (giugno viene visualizzato come "06")
• M = Mese in tre lettere (Marzo viene visualizzato come “Mar”)
• n = mese numerico, senza zeri iniziali (giugno viene visualizzato come "6")
• t = Numero di giorni nel mese dato (se giugno mostrerebbe "30")

caratteri in formato ANNO

• Y = 2020 (anno numerico a 4 cifre; es. “2020”)
• y = 20 (anno numerico a 2 cifre; es. “20”)

Stringhe di formato data di esempio

• M j, Y = 22 giugno 2020
• F d, Y = 22 giugno 2020
• m/g/a = 22/06/2020
• mdY = 22.06.2020
• j M, Y = 22 giu, 2020
• l, M d = lunedì 22 giugno
• l, F jS, Y = lunedì 22 giugno 2020
• m · d · y = 06 · 22 · 20

Formattazione dell'ora

Caratteri in formato ORA

• a = (minuscolo “am” o “pm”)
• A = PM (maiuscolo “AM” o “PM”)
• g = ora, 12 ore, senza zeri iniziali ("1-12")
• h = ora, 12 ore, con zeri iniziali ("01-12")
• G = Ora, 24 ore, senza zeri iniziali ("0-23")
• H = Ora, 24 ore, con zeri iniziali ("00-23")
• i = 10 (Minuti, con zeri iniziali ("00-59")
• s = 52 (secondi, con zeri iniziali ("00-59")
• T = Fuso orario ("CDT", "EST")

Stringhe di formato dell'ora di esempio

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

Stringhe di formato data + ora

• A/M/gg:i:s A = 22/06/2020 16:10:52
• M j, Y @ G: i = 22 giugno 2020 @ 16:10

Escape di stringhe di formato con "\" per incorporare testo/caratteri aggiuntivi

Questo è un trucco davvero utile per personalizzare la visualizzazione della data e dell'ora. Aggiungi semplicemente "\" prima di ogni carattere/lettera che desideri includere nella stringa di formato e quel carattere verrà visualizzato come farebbe normalmente (al di fuori della stringa). Quindi, "/T/h/e" renderebbe la parola "The" nella stringa di formato invece di un elemento data/ora effettivo come Timezone ("T") o hour ("h").

• D \a\t ga = Lun alle 16:00
• \T\h\e dS \d\a\y \o\f F = Il 22 giugno

Formattazione della data e dell'ora con Divi

Modifica del formato della data predefinito in tutto il sito

Se desideri modificare il formato di data e ora predefinito in tutto il sito, WordPress ha un'opzione integrata per questo. Dalla dashboard di WordPress, vai su Impostazioni > Generali. Lì vedrai l'opzione per cambiare il fuso orario predefinito, il formato della data e il formato dell'ora.

Divi utilizza effettivamente questi stessi formati predefiniti quando aggiungi una data o un'ora utilizzando il contenuto dinamico con Divi Builder (come la data di pubblicazione successiva e la data corrente).

Se stai utilizzando il layout del post del blog predefinito di Divi (non un layout personalizzato creato con Divi Builder), puoi inserire una stringa di formato della data personalizzata da utilizzare per tutti i post del blog in tutto il sito. Puoi trovare l'opzione del formato della data navigando su Divi > Opzioni del tema e scorrere verso il basso la pagina nella scheda Generale.

È interessante notare che puoi persino inserire caratteri nel formato dell'ora per visualizzare l'ora in cui il post è stato pubblicato.

Utilizzo del contenuto dinamico di Divi per formattare e visualizzare data e ora

Quando si utilizza Divi Builder, è possibile aggiungere la data corrente o la data di pubblicazione successiva come contenuto dinamico a qualsiasi modulo. Questo è un ottimo modo per sovrascrivere il formato di data e ora predefinito caso per caso, nonché per aggiungere uno stile personalizzato al testo di data/ora.

Per aggiungere una data di pubblicazione del post o una data corrente come contenuto dinamico alla tua pagina in Divi, aggiungi semplicemente un modulo di testo alla pagina.

Quindi seleziona l'icona del contenuto dinamico passando il mouse sopra la casella del contenuto.

Una volta che la data dinamica è stata aggiunta al contenuto del modulo, puoi fare clic per modificare la data dinamica per una maggiore personalizzazione. Queste impostazioni aggiuntive includono l'opzione per aggiungere contenuto prima e dopo alla visualizzazione della data, nonché l'opzione per personalizzare il formato della data.

Formati di data incorporati di Divi

Sotto il menu a discesa del formato della data, troverai i seguenti formati di data predefiniti che puoi selezionare.

• M j, Y = 22 giugno 2020
• F d, Y = 22 giugno 2020
• m/g/a = 22/06/2020
• mdY = 22.06.2020
• j M, Y = 22 giu, 2020
• l, M d = lunedì 22 giugno

Aggiunta di un formato data/ora personalizzato

Per creare un formato data/ora personalizzato, seleziona l'opzione personalizzata dal menu a discesa. Una volta scelta l'opzione personalizzata, avrai a disposizione una casella di input in cui potrai utilizzare la tua magia aggiungendo qualsiasi combinazione di caratteri di formato disponibili per creare la stringa di formato perfetta per la data, l'ora o entrambi.

Questo stesso processo può essere utilizzato per aggiungere l'ora corrente o dopo la pubblicazione. Aggiungi semplicemente i caratteri di formattazione dell'ora nella casella Formato data personalizzato.

Dopo aver posizionato il contenuto, puoi utilizzare le impostazioni di progettazione integrate di Divi, nella scheda Progettazione del modulo di testo, per personalizzare il corpo del testo come preferisci. Il formato data/ora dinamico adotterà lo stile del corpo del testo.

Esempi più utili

Anno del diritto d'autore

La formattazione di data e ora è utile per creare un anno di copyright dinamico per il piè di pagina globale del tuo sito Divi. Ecco un formato personalizzato che puoi utilizzare per visualizzare le informazioni sul copyright con l'anno dinamico in un singolo modulo di testo.

Aggiungi la data corrente come contenuto dinamico a un modulo di testo. Quindi modifica il contenuto dinamico con quanto segue:

• Prima: ©
• Dopo: Azienda | Tutti i diritti riservati.
• Formato data personalizzato: Sì

Invito all'azione dinamico

Puoi anche aggiungere un formato di data o ora dinamico (in linea) a un invito all'azione o a un titolo sul tuo sito Web Divi. Per fare ciò, aggiungi una data corrente come contenuto dinamico a un modulo di testo. Quindi aggiorna quanto segue:

• Prima:

  <h1>It's

• Dopo:

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

• Formato data personalizzato: l … \a\f\t\e\rga

Si noti che l'intestazione h1 viene aggiunta all'elemento utilizzando i tag html negli input prima e dopo. La parola "Martedì" viene visualizzata dalla "l" nella casella del formato data personalizzato, seguita dalla parola "dopo" utilizzando la "\" per sfuggire alla stringa di formato. Quindi la "g" e la "a" vengono utilizzate per visualizzare le "18:00"

È quindi possibile personalizzare gli stili di intestazione h1 nella scheda Design.

Pensieri finali

Si spera che questo post abbia (e continui ad essere) una guida utile su come formattare la data e l'ora in Divi. Se sei come me, i tuoi occhi sono stati aperti ad alcune sorprendenti opzioni di formattazione che puoi ottenere senza un plugin e con codice personalizzato!

Non vedo l'ora di sentirti nei commenti.

Saluti!