Comment afficher les dates relatives dans WordPress (3 méthodes)

Un petit détail qui sépare les sites WordPress amateurs des sites professionnels est la façon dont ils affichent les dates.

Les grandes plateformes comme Twitter et Medium utilisent des dates relatives (comme « il y a 5 minutes » ou « il y a 2 semaines ») car elles indiquent instantanément aux lecteurs la fraîcheur du contenu.

Vous pouvez maintenant ajouter cette même fonctionnalité à votre site WordPress.

Ayant ajouté des dates relatives à de nombreux sites WordPress, nous pouvons vous dire que ce simple changement entraîne souvent un meilleur engagement, car les visiteurs peuvent identifier rapidement votre contenu le plus récent.

La bonne nouvelle est que l'ajout de cette fonctionnalité est beaucoup plus simple que la plupart des gens ne le pensent.

Dans ce guide, nous partagerons deux méthodes éprouvées pour implémenter des dates relatives dans WordPress.

Pourquoi utiliser des dates relatives dans WordPress ?

Les dates relatives permettent à vos lecteurs de voir en un coup d'œil la fraîcheur de votre contenu, rendant votre site plus attrayant et plus facile à naviguer que l'utilisation de dates exactes.

Voici comment les dates relatives peuvent vous aider :

• Afficher la fraîcheur instantanément : Au lieu de « 25 novembre 2025 », vos articles peuvent afficher « il y a 2 jours », afin que les visiteurs sachent immédiatement que le contenu est récent.
• Améliorer l'expérience utilisateur : Les lecteurs peuvent rapidement repérer les nouveaux articles sans avoir à calculer eux-mêmes les dates.
• Format familier : Les plateformes de médias sociaux comme Facebook et Twitter utilisent déjà des dates relatives, votre public est donc habitué à ce style.

Cependant, il convient de noter que les dates relatives ne conviennent pas à tous les types de sites Web.

Par exemple, si vous gérez un blog historique ou un site où les dates précises sont cruciales, il peut être préférable de s'en tenir aux dates absolues. La clé est de considérer le type de contenu et les préférences de votre public lorsque vous décidez d'ajouter des dates relatives à votre site WordPress.

Cela dit, examinons 3 façons d'ajouter des dates relatives dans WordPress.

• Méthode 1 : Utilisation du bloc Date de WordPress (Rapide et gratuit)
• Méthode 2 : Utilisation du plugin Meks Time Ago (Gratuit et personnalisable)
• Method 3: Using Custom Code (Advanced but More Customizable)
  • Comment ajouter le format de date relative dans les thèmes de blocs
  • Comment ajouter le format de date relative dans les thèmes classiques
• Conseils bonus pour personnaliser votre blog WordPress

Méthode 1 : Utilisation du bloc Date de WordPress (Rapide et gratuit)

Saviez-vous que le bloc Date de WordPress peut être configuré pour utiliser des dates relatives ? C'est le moyen le plus simple d'afficher des dates relatives sans installer de plugin ni ajouter de code personnalisé à votre site WordPress.

Cependant, nous avons trouvé deux inconvénients à l'utilisation de cette méthode. Premièrement, elle ne permet pas beaucoup de personnalisation. Par exemple, vous ne pouvez pas afficher les dates comme 'Aujourd'hui' ou 'Hier' au lieu de 'X minutes ago' ou 'X heures ago'.

Deuxièmement, le bloc Date de WordPress est utilisable sur les modèles d'un thème WordPress basé sur des blocs, mais pas sur ceux d'un thème classique. Si vous utilisez un thème classique, nous vous suggérons de suivre la Méthode 2 ou la Méthode 3.

Dans ce tutoriel, nous allons vous montrer comment personnaliser le bloc Date de WordPress sur la partie ‘Métadonnées de l’article’ de votre thème basé sur des blocs afin qu’il affiche des dates relatives. Nous utiliserons l'éditeur complet de site pour cela.

Cette partie du modèle est responsable de l'affichage des informations sur vos articles de blog, telles que l'auteur, la catégorie et la date de publication.

Cela dit, le bloc Date fonctionnera également si vous l'ajoutez à n'importe quel article ou page dans l'éditeur de blocs.

Tout d'abord, allez dans Apparence » Éditeur pour ouvrir l'éditeur de site complet.

Vous verrez maintenant plusieurs options pour personnaliser votre thème WordPress.

Ici, cliquez sur « Motifs ».

Sur la page suivante, vous verrez tous les motifs et parties de modèles que votre thème possède.

Sélectionnez simplement l'option « Métadonnées de l'article ».

Vous devriez maintenant voir la partie de modèle Métadonnées de l'article.

Ici, cliquez sur le bloc qui dit « Date de l'article », qui est le bloc Date de WordPress. Cliquer dessus ouvrira le panneau latéral des paramètres du bloc sur le côté droit.

Ce que vous voulez faire, c'est désactiver le paramètre « Format par défaut » et choisir le format « Il y a 3 mois ».

Vous pouvez laisser le paramètre « Lien vers l'article » activé afin que le bloc Date renvoie à l'article de blog sur lequel il figure, ou le désactiver. Vous pouvez également activer « Afficher la date de dernière modification » si vous souhaitez afficher la dernière fois que l'article a été mis à jour plutôt que lorsqu'il a été publié pour la première fois.

Une fois terminé, cliquez simplement sur « Enregistrer ».

Vous devriez maintenant voir toutes les occurrences de votre modèle « Meta de publication » sur votre site Web en utilisant des dates relatives.

Méthode 2 : Utilisation du plugin Meks Time Ago (Gratuit et personnalisable)

Si vous recherchez un plugin simple pour afficher les heures et les dates relatives dans WordPress, nous avons un excellent choix pour vous.

Parmi tous les plugins de dates relatives que nous avons essayés, Meks Time Ago est l'un des plus faciles pour les débutants. De plus, il est gratuit et fonctionne avec les thèmes classiques et les blocs.

Cela dit, cette méthode ne fonctionne pas non plus si vous souhaitez afficher les dates comme « Aujourd'hui » ou « Hier » au lieu de « Il y a X secondes » ou « Il y a X jours ». Cependant, vous pouvez personnaliser des éléments tels que les articles auxquels ajouter les dates relatives et même remplacer le mot « il y a ».

Pour utiliser Meks Time Ago, vous pouvez installer et activer le plugin WordPress dans votre zone d'administration.

Après cela, allez dans Paramètres » Général dans votre tableau de bord. Faites défiler vers le bas, et vous trouverez les paramètres du plugin Meks Time Ago.

Le premier paramètre que vous devez activer est l'endroit où appliquer le format « il y a » . Ici, vous devez choisir « Date » et « Heure » pour afficher la date relative de la première publication de l'article.

Alternativement, vous pouvez choisir « Date (modifiée) » ou « Heure (modifiée) » si vous souhaitez afficher la dernière fois que l'article a été mis à jour, et non quand il a été publié pour la première fois.

Vous pouvez également choisir d'appliquer ce format de date aux articles qui ne sont pas plus anciens qu'un certain nombre de minutes, d'heures, de jours et de mois.

Nous avons décidé de choisir 12 mois.

Ensuite, vous pouvez modifier l'emplacement du mot « il y a » dans le format de date.

Nous avons choisi de le laisser après la date relative car la plupart des gens sont familiers avec cette formulation.

Enfin, vous pouvez remplacer le mot « ago » par un terme différent si nécessaire. Vous pouvez également le laisser vide.

Une fois que vous avez fait cela, cliquez simplement sur « Enregistrer les modifications ».

C'est tout ! Désormais, toutes les dates de vos publications auront des dates relatives. Vous pouvez voir vos modifications sur mobile, ordinateur et tablette pour vérifier si tout semble correct.

Voici un exemple :

Méthode 3 : Utilisation de code personnalisé (Avancé mais plus personnalisable)

Cette méthode implique du code personnalisé, et comme nous l'avons expliqué précédemment, c'est un meilleur choix si vous souhaitez afficher les dates comme « Aujourd'hui » ou « Hier » au lieu de « X minutes ago » ou « X hours ago ».

Mais ne vous laissez pas intimider ! Nous allons vous guider pas à pas dans le processus. De plus, nous utiliserons un plugin d'extraits de code appelé WPCode, qui permet d'ajouter du code personnalisé en toute sécurité et facilement sans casser votre site web.

Nous avons testé le plugin en profondeur et l'avons trouvé super fiable. Vous pouvez en savoir plus sur le plugin dans notre avis sur WPCode.

Tout d'abord, installez et activez le plugin WordPress dans votre zone d'administration.

Après cela, vous devez aller dans Extraits de code » + Ajouter un extrait. Ensuite, sélectionnez ‘Ajouter votre code personnalisé (Nouvel extrait)’ et cliquez sur le bouton ‘+ Ajouter un extrait personnalisé’.

Maintenant, donnez un nom à votre nouveau code personnalisé. Il peut s'agir de quelque chose de simple, comme ‘Date relative formatée avec l'heure’.

Changez également le Type de code en ‘Extrait PHP’.

Une fois que c'est fait, copiez et collez simplement l'extrait de code ci-dessous dans la boîte d'aperçu du code :

/**
 * Converts a timestamp into a human-readable relative date string.
 *
 * @param int $timestamp The timestamp to convert
 * @return string The human-readable relative date string
 */
function human_readable_relative_date( $timestamp ) {
    $time_difference = time() - $timest  // Calculate the time difference between now and the timestamp
    $seconds_in_a_day = 86400;  // Number of seconds in a day


    if ( $time_difference < 0 ) {
        return 'Date is in the future';  // Handle future dates
    } elseif ( $time_difference < $seconds_in_a_day ) {
        return 'Today at ' . date( 'H:i', $timestamp );  // Handle same-day dates
    } elseif ( $time_difference < 2 * $seconds_in_a_day ) {
        return 'Yesterday at ' . date( 'H:i', $timestamp );  // Handle one-day-old dates
    } elseif ( $time_difference < 7 * $seconds_in_a_day ) {
        $days = floor( $time_difference / $seconds_in_a_day );  // Calculate full days ago
        return $days . ($days == 1 ? ' day' : ' days') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last week
    } elseif ( $time_difference < 30 * $seconds_in_a_day ) {
        $weeks = floor( $time_difference / ( 7 * $seconds_in_a_day ) );  // Calculate full weeks ago
        return $weeks . ($weeks == 1 ? ' week' : ' weeks') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last month
    } elseif ( $time_difference < 365 * $seconds_in_a_day ) {
        $months = floor( $time_difference / ( 30 * $seconds_in_a_day ) );  // Calculate full months ago
        return $months . ($months == 1 ? ' month' : ' months') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last year
    } else {
        $years = floor( $time_difference / ( 365 * $seconds_in_a_day ) );  // Calculate full years ago
        return $years . ($years == 1 ? ' year' : ' years') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates older than a year
    }
}


/**
 * Shortcode function to convert a given timestamp or date to a human-readable relative date string.
 *
 * @param array $atts Shortcode attributes
 * @return string The human-readable relative date string
 */
function relative_date_shortcode( $atts ) {
    $attributes = shortcode_atts(
        array(
            'timestamp' => '',  // Default value for 'timestamp' attribute
            'date' => '',       // Default value for 'date' attribute
        ),
        $atts
    );


    // If no timestamp or date attribute provided, use the post's published date
    if ( empty($attributes['timestamp']) && empty($attributes['date']) ) {
        global $post;
        if ( !is_null($post) ) {
            $attributes['timestamp'] = get_the_time('U', $post->ID);  // Get the post's timestamp
        }
    } elseif ( !empty($attributes['date']) ) {
        $attributes['timestamp'] = strtotime($attributes['date']);  // Convert 'date' attribute to timestamp
    }
    
    // Validate the timestamp
    if ( !empty($attributes['timestamp']) && is_numeric($attributes['timestamp']) ) {
        return human_readable_relative_date( $attributes['timestamp'] );  // Return the human-readable relative date
    } else {
        return 'Invalid timestamp or date';  // Return an error message if the timestamp is invalid
    }
}
add_shortcode( 'relative_date', 'relative_date_shortcode' );  // Register the shortcode

La première fonction, human_readable_relative_date, prend une date et la transforme en un format convivial.

Par exemple, elle peut afficher ‘Aujourd'hui à 14h30’ ou ‘Il y a 3 jours à 10h15’. Cela permet à vos lecteurs de comprendre plus facilement l'ancienneté d'un article.

La deuxième fonction, relative_date_shortcode, crée un shortcode que vous pouvez utiliser dans WordPress. Ce shortcode vous permet d'ajouter facilement des dates relatives à votre contenu sans modifier les fichiers de votre thème.

En utilisant ce code, vous pouvez rendre les dates de vos articles plus conviviales. Les lecteurs verront rapidement à quel point votre contenu est récent, ce qui peut donner à votre site une impression de modernité et d'engagement.

Ensuite, faites défiler jusqu'à la section « Insertion ». Choisissez ensuite « Insertion automatique » pour la méthode d'insertion et « Frontend uniquement » pour l'emplacement.

Dans le coin supérieur droit, changez le bouton « Inactif » en « Actif » et cliquez sur le bouton « Enregistrer le snippet ».

Avec votre code actif, voyons comment activer les dates relatives sur votre blog WordPress. Le processus différera selon le type de thème que vous utilisez.

Comment ajouter le format de date relative dans les thèmes de blocs

Si vous utilisez un thème de blocs, vous pouvez simplement remplacer le bloc Date de WordPress par le shortcode que vous avez créé dans votre partie de modèle « Métadonnées de l'article ».

Tout d'abord, rendez-vous sur Apparence » Éditeur.

Vous verrez maintenant le menu principal de l'éditeur complet du site.

Cliquez sur « Motifs ».

Vous devriez maintenant voir tous les motifs et parties de modèles proposés par votre thème de blocs.

Ici, choisissez l'option « Métadonnées de l'article ».

Tout d'abord, vous devez supprimer le bloc Date existant afin de pouvoir le remplacer par notre shortcode.

Pour ce faire, vous pouvez cliquer sur le bloc Date.

S'il est difficile de cliquer dessus, vous pouvez simplement cliquer sur le bouton « Vue Liste » en haut et sélectionner le bloc « Date ». Cliquez ensuite sur le menu à trois points et choisissez « Supprimer ».

Une fois le bloc Date supprimé, ajoutez le bloc « Shortcode » à vos Métadonnées d'article.

Vous pouvez le faire en cliquant sur le bouton « + » n'importe où sur la page et en faisant glisser et déposer le bloc Shortcode.

Après cela, tapez le shortcode suivant dans le bloc :

[relative_date]

Une fois que c'est fait, cliquez simplement sur « Enregistrer ».

Désormais, votre modèle d'article unique utilisera des dates relatives.

Voici à quoi cela ressemble sur notre site de démonstration :

Comment ajouter le format de date relative dans les thèmes classiques

Le processus d'ajout de dates relatives dans les thèmes classiques de WordPress est un peu différent et plus technique. Cela est dû au fait que chaque thème classique a des configurations différentes.

Mais soyez patients. Nous allons vous donner un exemple afin que vous puissiez facilement comprendre comment le faire vous-même, que vous utilisiez un thème WordPress gratuit ou premium.

Si c'est la toute première fois que vous personnalisez les fichiers de votre thème classique, nous vous recommandons de le faire sur un site de staging ou une version locale de votre site WordPress. De cette façon, toute erreur inattendue causée par la modification du code n'affectera pas votre site web en direct.

La première étape que vous devez franchir est de trouver le fichier du thème responsable de l'affichage des métadonnées de vos articles. Il peut s'agir de :

• Votre fichier d'article unique (généralement nommé single.php)
• La partie du modèle qui affiche le contenu de votre article (quelque chose comme content.php)
• Votre fichier de balises de modèle, qui contient des fonctions pour afficher les informations de l'article (souvent nommé template-tags.php)

En règle générale, vous devriez rechercher les lignes de code qui affichent la date de l'article. Ces lignes appellent généralement des fonctions WordPress comme the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date(), ou get_the_modified_time().

Si vous avez besoin d'aide, nous avons un guide étape par étape sur comment trouver les fichiers de thème WordPress à modifier à l'aide d'un simple plugin. Alternativement, vous pouvez contacter votre développeur de thème WordPress ou consulter sa documentation pour obtenir de l'aide supplémentaire.

Dans notre cas, le fichier responsable de l'affichage de la date de publication est template-tags.php. Voici le code original complet que le thème utilisait pour afficher la date de publication exacte :

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}

		$time_string = sprintf(
			$time_string,
			esc_attr( get_the_date( 'c' ) ),
			get_the_date(),
			esc_attr( get_the_modified_date( 'c' ) ),
			get_the_modified_date()
		);

		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$time_string
		);
	}
endif;

Pour modifier le fichier lui-même, vous pouvez ouvrir le fichier via FTP ou le gestionnaire de fichiers de votre fournisseur d'hébergement WordPress.

Si vous êtes un utilisateur de Bluehost, vous pouvez utiliser le gestionnaire de fichiers en vous connectant à votre compte d'hébergement web. Ensuite, sur le tableau de bord, cliquez sur l'onglet « Sites web » et sélectionnez « Paramètres » pour le site que vous essayez de personnaliser.

Cela ouvrira la page des paramètres de votre site.

Passez à l'onglet « Avancé » et cliquez sur le bouton « Gérer » dans la section Gestionnaire de fichiers.

Vous devriez maintenant être dans le gestionnaire de fichiers de Bluehost.

Comme notre fichier s'appelle template-tags.php, nous avons dû aller dans public_html » wp-content » nom-du-theme » inc.

Vous verrez maintenant plusieurs fichiers parmi lesquels choisir.

Ici, allez-y et sélectionnez template-tags.php. Faites un clic droit sur le fichier et sélectionnez « Modifier ».

Maintenant, localisez le code responsable de l'affichage de la date de publication.

Vous pouvez utiliser les touches CTRL / Commande et F pour ce faire.

Maintenant, vous devrez modifier ce code particulier afin qu'il appelle la fonction human_readable_relative_date que nous avons ajoutée précédemment avec WPCode.

Voici comment nous avons remplacé le code original de if ( ! function_exists( 'twentysixteen_entry_date' ) ) : à endif; :

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		// Get the post's published timestamp
		$published_timestamp = get_the_time('U');


		// Generate the human-readable relative date
		$relative_date = human_readable_relative_date( $published_timestamp );


		// Output the relative date
		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$relative_date
		);
	}
endif;

Une fois que vous avez modifié le code, cliquez sur le bouton « Enregistrer les modifications ».

Si votre code ne fonctionne pas et que vous êtes un débutant complet, nous vous suggérons d'utiliser un outil d'IA comme ChatGPT d'OpenAI pour comprendre ce qui ne va pas avec votre code.

Vous pourriez poser une question simple comme : « Salut, j'essaie de faire X en utilisant le code ci-dessous [collez votre code ici], mais ça ne marche pas. Pouvez-vous m'aider à comprendre ce qui ne va pas ? »

Cela dit, si votre code fonctionne, voici ce que vous devriez voir sur votre modèle d'article unique :

Conseils bonus pour personnaliser votre blog WordPress

Outre l'ajout de dates relatives à vos articles WordPress, il existe de nombreuses autres façons de personnaliser votre blog. Voici quelques idées :

• Comment styliser différemment les catégories individuelles dans WordPress
• Comment ajouter une barre de progression dans vos articles WordPress
• Comment définir une image de secours par défaut pour les miniatures d'articles WordPress
• Comment styliser différemment chaque article WordPress
• Comment ajouter une barre de progression de lecture dans les articles WordPress
• Comment mettre en évidence les nouveaux articles pour les visiteurs récurrents dans WordPress
• Comment afficher les liens de navigation fil d'Ariane dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment afficher des dates relatives dans WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de pages glisser-déposer pour WordPress et notre guide ultime sur comment modifier un site Web WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.