Un guide de mise en forme de la date et de l'heure dans Divi

L'affichage de la date et de l'heure sur votre site Web est l'une de ces choses auxquelles la plupart des gens ne pensent pas vraiment. Nous avons tendance à nous en tenir au formatage par défaut pour la date de publication sur les métadonnées de publication. Et, si nous avons le temps, nous ajouterons dynamiquement l'année en cours dans la barre de pied de page à côté du texte de copyright.

Cependant, comprendre comment formater la date et l'heure est utile. Cela vous donne la liberté de rendre une date plus lisible pour les utilisateurs. Par exemple, "Le lundi 23 mai 2020" est un peu plus chaud (et plus humain) que les affichages de date minimaux comme "5.23.20". Même si ce dernier a sa place. Il en va de même pour le formatage de l'heure actuelle sur un site Web. Certains sites peuvent bénéficier d'un affichage 12h comme « 20h30 » tandis que d'autres (comme les sites militaires ou médicaux) préféreraient un affichage 24h comme « 20h30 ».

Divi et WordPress vous offrent un contrôle surprenant sur le formatage de la date et de l'heure disponible en PHP. Dans ce tutoriel, nous allons vous aider à comprendre comment afficher, formater et styliser la date et l'heure dans Divi. Vous serez en mesure de donner aux articles de blog un format personnalisé pour la date de publication ou même d'ajouter un élément dynamique à un appel à l'action pour une touche plus personnelle (par exemple, « Happy Monday ! Découvrez notre nouvelle offre. »).

Commençons!

Téléchargez GRATUITEMENT un guide de formatage de la date et de l'heure Divi Layout

Pour vous aider à avoir un aperçu de la mise en forme de la date et de l'heure dans Divi, téléchargez cette mise en page utile du guide de mise en forme de la date et de l'heure. Il comprend des exemples de chaque format de date/heure utilisé comme contenu dynamique dans un module de texte Divi afin que vous puissiez voir de première main comment chacun fonctionne sur une page en direct.

Pour mettre la main sur le guide de formatage de la date et de l'heure, vous devrez d'abord le télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Caractères de format disponibles pour l'affichage de la date et de l'heure

Comme mentionné précédemment, Divi tire parti du formatage de date et d'heure intégré à WordPress. Mais avant d'entrer dans la mise en forme d'une date et d'une heure dans Divi, cela aide à comprendre les caractères de mise en forme dont nous disposons.

Vous trouverez ci-dessous une liste des caractères de format disponibles qui peuvent être utilisés ensemble (ou combinés) pour créer des formats de date et d'heure personnalisés. Cela vous sera utile lorsque vous expérimenterez des formats uniques pour la date et l'heure sur votre site Divi.

Formatage des dates

Caractères au format JOUR

• d = Jour du mois, 2 chiffres précédés de zéros ("02", "22")
• J = Jour du mois en trois lettres ("Jun", "Jul")
• l (minuscule "L") = Jour de la semaine, le mot complet ("Lundi", "Mardi")
• N = jour numérique ISO-8601 de la semaine (« 1 » pour lundi et « 7 » pour dimanche)
• S = suffixe du jour du mois ; utiliser avec j (« nd », « st », « rd »)
• w = jour numérique de la semaine (« 0 » pour dimanche et « 6 » pour samedi)
• z = Le jour de l'année, à partir de 0 (c'est-à-dire « 173 » ou « c'est le 173e jour de l'année »)

Caractère au format SEMAINE

• W = 26 (numéro de semaine de l'année, semaines commençant le lundi ; c'est-à-dire « c'est la 26e semaine de l'année »)

Caractères au format MOIS

• F = Une représentation textuelle complète d'un mois (« janvier » ou « mars »)
• m = mois numérique, avec des zéros non significatifs (juin est affiché sous la forme « 06 »)
• M = Mois en trois lettres (Mars s'affiche sous la forme « Mars »)
• n = Mois numérique, sans zéros non significatifs (Juin est affiché comme « 6 »)
• t = nombre de jours dans le mois donné (si juin, il afficherait « 30 »)

caractères au format ANNÉE

• Y = 2020 (année numérique à 4 chiffres ; c'est-à-dire « 2020 »)
• y = 20 (année numérique à 2 chiffres ; c'est-à-dire « 20 »)

Exemples de chaînes de format de date

• M j, A = 22 juin 2020
• F d, A = 22 juin 2020
• m/d/Y = 22/06/2020
• mdY = 22.06.2020
• j M, A = 22 juin 2020
• l, M d = lundi 22 juin
• l, F jS, Y = lundi 22 juin 2020
• m · d · y = 06 · 22 · 20

Formatage de l'heure

Caractères au format TIME

• a = (minuscule "am" ou "pm")
• A = PM (majuscule « AM » ou « PM »)
• g = Heure, 12 heures, sans zéros non significatifs (« 1-12 »)
• h = Heure, 12 heures, avec des zéros non significatifs (« 01-12 »)
• G = Heure, 24 heures, sans zéros non significatifs (« 0-23 »)
• H = Heure, 24 heures, avec des zéros non significatifs ("00-23")
• i = 10 (minutes, avec des zéros non significatifs ("00-59")
• s = 52 (secondes, avec des zéros non significatifs ("00-59")
• T = Fuseau horaire (« CDT », « EST »)

Exemples de chaînes de format d'heure

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

Chaînes de format date + heure

• A/m/dg:i:s A = 22/06/2020 16:10:52
• M j, Y @ G:i = 22 juin 2020 @ 16:10

Echapper les chaînes de format avec "\" pour incorporer du texte/des caractères supplémentaires

C'est une astuce très utile pour personnaliser l'affichage de la date et de l'heure. Ajoutez simplement "\" avant chaque caractère/lettre que vous souhaitez inclure dans la chaîne de format et ce caractère sera rendu comme il le ferait normalement (en dehors de la chaîne). Ainsi, "/T/h/e" rendrait le mot "The" dans la chaîne de format au lieu d'un élément de date/heure réel comme Timezone ("T") ou heure ("h").

• D \a\t ga = lun à 16h
• \T\h\e dS \d\a\y \o\f F = Le 22 juin

Formater la date et l'heure avec Divi

Modification du format de date par défaut sur l'ensemble du site

Si vous souhaitez modifier le format de date et d'heure par défaut sur l'ensemble du site, WordPress dispose d'une option intégrée pour cela. Depuis votre tableau de bord WordPress, accédez à Paramètres > Général. Vous y verrez la possibilité de modifier le fuseau horaire, le format de date et le format d'heure par défaut.

Divi utilise en fait ces mêmes formats par défaut lorsque vous ajoutez une date ou une heure à l'aide de contenu dynamique avec Divi Builder (comme la date de publication et la date actuelle).

Si vous utilisez la mise en page de publication de blog par défaut de Divi (pas une mise en page personnalisée construite avec Divi Builder), vous pouvez entrer une chaîne de format de date personnalisée à utiliser pour tous les articles de blog sur l'ensemble du site. Vous pouvez trouver l'option de format de date en accédant à Divi > Options du thème et faites défiler la page sous l'onglet Général.

Fait intéressant, vous pouvez même entrer des caractères de format d'heure pour afficher l'heure à laquelle le message a été publié.

Utiliser le contenu dynamique de Divi pour formater et afficher la date et l'heure

Lorsque vous utilisez Divi Builder, vous avez la possibilité d'ajouter la date du jour ou la date de publication en tant que contenu dynamique à n'importe quel module. C'est un excellent moyen de remplacer le format de date et d'heure par défaut au cas par cas, ainsi que d'ajouter un style personnalisé au texte de date/heure.

Pour ajouter une date de publication ou une date actuelle en tant que contenu dynamique à votre page dans Divi, ajoutez simplement un module de texte à la page.

Sélectionnez ensuite l'icône de contenu dynamique en survolant la zone de contenu.

Une fois la date dynamique ajoutée au contenu du module, vous pouvez cliquer pour modifier la date dynamique pour plus de personnalisation. Ces paramètres supplémentaires incluent la possibilité d'ajouter du contenu avant et après à l'affichage de la date ainsi que la possibilité de personnaliser le format de la date.

Formats de date intégrés à Divi

Sous la liste déroulante des formats de date, vous trouverez les formats de date prédéfinis suivants que vous pouvez sélectionner.

• M j, A = 22 juin 2020
• F d, A = 22 juin 2020
• m/d/Y = 22/06/2020
• mdY = 22.06.2020
• j M, A = 22 juin 2020
• l, M d = lundi 22 juin

Ajout d'un format date/heure personnalisé

Pour créer un format date/heure personnalisé, sélectionnez l'option personnalisée dans la liste déroulante. Une fois que vous avez choisi l'option personnalisée, vous aurez une zone de saisie disponible où vous pourrez travailler votre magie en ajoutant n'importe quelle combinaison de caractères de format disponibles pour créer la chaîne de format parfaite pour la date, l'heure ou les deux.

Ce même processus peut être utilisé pour ajouter l'heure actuelle ou l'heure de publication. Ajoutez simplement les caractères de formatage de l'heure dans la zone Format de date personnalisé.

Une fois le contenu en place, vous pouvez utiliser les paramètres de conception intégrés de Divi, sous l'onglet Conception du module de texte, pour personnaliser le corps du texte à votre guise. Le format date/heure dynamique adoptera le style du corps du texte.

Exemples plus utiles

Année du droit d'auteur

Le formatage de la date et de l'heure est pratique pour créer une année de copyright dynamique pour le pied de page global de votre site Divi. Voici un format personnalisé que vous pouvez utiliser pour afficher les informations de copyright avec l'année dynamique dans un seul module de texte.

Ajoutez la date actuelle en tant que contenu dynamique à un module de texte. Modifiez ensuite le contenu dynamique avec les éléments suivants :

• Avant : ©
• Après : Entreprise | Tous les droits sont réservés.
• Format de date personnalisé : O

Appel à l'action dynamique

Vous pouvez également ajouter un format de date ou d'heure dynamique (en ligne) à un appel à l'action ou à un en-tête sur votre site Web Divi. Pour ce faire, ajoutez une date actuelle en tant que contenu dynamique à un module de texte. Ensuite, mettez à jour les éléments suivants :

• Avant:

  <h1>It's

• Après:

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

• Format de date personnalisé : l … \a\f\t\e\rga

Notez que l'en-tête h1 est ajouté à l'élément à l'aide de balises html dans les entrées avant et après. Le mot « mardi » est affiché par le « l » dans la zone de format de date personnalisé, suivi du mot « après » en utilisant le « \ » pour échapper à la chaîne de format. Ensuite, les « g » et « a » sont utilisés pour afficher le « 18h00 »

Vous pouvez ensuite personnaliser les styles de titre h1 sous l'onglet Conception.

Dernières pensées

Espérons que cet article a (et continue d'être) un guide utile sur la façon de formater la date et l'heure dans Divi. Si vous êtes comme moi, vos yeux ont été ouverts sur des options de formatage surprenantes que vous pouvez réaliser sans plugin et avec du code personnalisé !

J'ai hâte de vous entendre dans les commentaires.

À votre santé!