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, surtout avec nos méthodes rapides et sans code.

Dans ce guide, nous partagerons trois 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éliorez 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 tenez 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. L'essentiel 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)

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 n'offre pas beaucoup de personnalisation. Par exemple, vous ne pouvez pas afficher les dates comme 'Aujourd'hui' ou 'Hier' au lieu de 'Il y a X minutes' ou 'Il y a X heures'.

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 vous montrerons comment personnaliser le bloc Date de WordPress dans la partie de modèle 'Méta de l'article' de votre thème basé sur des blocs, afin qu'il affiche des dates relatives. Nous utiliserons pour cela l'éditeur de site complet.

Cette partie de 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.

Étape 1 : Accéder à l'éditeur de site complet

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 ».

Étape 2 : Naviguer vers la partie modèle des métadonnées de l'article

Sur la page suivante, vous verrez tous les modèles 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.

Étape 3 : Sélectionner le bloc de date 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 conserver 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 l'« Afficher la date de dernière modification » si vous souhaitez afficher la dernière mise à jour de l'article plutôt que sa date de publication initiale.

Étape 4 : Enregistrer vos modifications

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 dates relatives dans WordPress, nous avons une excellente option pour vous : Meks Time Ago. Il est approuvé par plus de 10 000 utilisateurs WordPress et conserve une note de 4,3 étoiles sur WordPress.org.

Parmi tous les plugins de dates relatives que nous avons essayés, Meks Time Ago se distingue comme l'un des plus faciles pour les débutants, grâce à ses paramètres intuitifs et à sa configuration technique minimale. De plus, il est gratuit et fonctionne avec les thèmes classiques et les thèmes 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 ».

Étape 1 : Installer Meks Time Ago et choisir le format « Time Ago »

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.

Étape 2 : Modifier le mot « Ago »

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.

Étape 3 : Enregistrer vos modifications

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

Et voilà ! Désormais, toutes les dates de vos articles afficheront des dates relatives. Vous pouvez voir vos modifications sur mobile, ordinateur et tablette pour vérifier si tout est correct.

Voici un exemple :

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

Cette méthode implique l'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 'Il y a X minutes' ou 'Il y a X heures'.

Mais ne vous laissez pas intimider ! Nous allons vous guider pas à pas.

De plus, nous utiliserons un plugin d'extraits de code appelé WPCode, qui est approuvé par plus de 3 millions de sites Web et a une note de 4,9 étoiles sur WordPress.org. Il rend l'ajout de code personnalisé sûr et facile sans casser votre site Web.

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

Étape 1 : Installer et activer le plugin 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é’.

Étape 2 : Ajouter un extrait de code PHP 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() - $timestamp; // 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( 'g:i A', $timestamp );  // Handle same-day dates
    } elseif ( $time_difference < 2 * $seconds_in_a_day ) {
        return 'Yesterday at ' . date( 'g:i A', $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( 'g:i A', $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( 'g:i A', $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( 'g:i A', $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( 'g:i A', $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.

Étape 3 : Configurer et activer l'extrait de code

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 vous pouvez activer les dates relatives sur votre blog WordPress. Le processus différera selon le type de thème que vous utilisez.

Étape 4 : Ajouter le format de date relative dans les thèmes blocs (facultatif)

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 ».

Maintenant, votre modèle d'article unique utilisera des dates relatives.

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

Étape 5 : 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.

Avant d'apporter des modifications, créez toujours une sauvegarde complète de votre site web et des fichiers de thème spécifiques que vous prévoyez de modifier. De cette façon, toute erreur inattendue causée par la modification du code n'affectera pas votre site web en ligne, et vous pourrez facilement revenir en arrière si quelque chose se passe mal.

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 le développeur de votre thème WordPress ou consulter sa documentation pour obtenir plus d'aide.

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 :

Questions fréquemment posées sur l'affichage des dates relatives dans WordPress

Voici quelques questions que nos lecteurs ont fréquemment posées concernant l'affichage des dates relatives dans WordPress :

Que faire si un site web n'a pas de date de publication ?

Si un site web n'affiche pas de date de publication, vous pouvez rechercher des indices tels que la date de dernière mise à jour, les commentaires ou la structure de l'URL pour estimer quand le contenu a été publié. Cela vous aide à juger si l'information est actuelle.

Comment trouver des articles WordPress d'une certaine date ?

Vous pouvez trouver des articles WordPress d'une certaine date en utilisant la fonction d'archive de votre tableau de bord ou en ajoutant des filtres de date dans l'écran des articles. Cela facilite la gestion du contenu plus ancien.

Quel est l'impact de l'ajout d'une date relative dans WordPress sur le SEO ?

L'ajout d'une date relative dans WordPress n'améliore pas directement le classement SEO. Cependant, il peut améliorer l'expérience utilisateur en montrant aux lecteurs que votre contenu est récent ou régulièrement mis à jour.

Cela peut aider à accroître la confiance et encourager plus de clics et d'engagement, en particulier pour le contenu sensible au temps comme les tutoriels, les actualités ou les critiques de produits.

Que se passe-t-il si vous arrêtez d'afficher les dates de publication dans les articles WordPress ?

Si vous arrêtez d'afficher les dates de publication dans WordPress, les visiteurs pourraient ne pas savoir à quel point votre contenu est actuel. Cela peut réduire la confiance pour les sujets sensibles au temps comme les tutoriels, les actualités ou les critiques.

Pouvez-vous modifier le format de la date et de l'heure dans WordPress ?

Oui, vous pouvez modifier le format de la date et de l'heure dans WordPress depuis la page Réglages » Général de votre tableau de bord. WordPress vous permet de choisir parmi des formats prédéfinis ou d'en créer un personnalisé.

Pour plus d'informations, consultez notre guide sur la modification du format de la date et de l'heure dans WordPress.

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 les dates relatives dans WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de pages par glisser-déposer pour WordPress et notre guide ultime sur comment modifier un site WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.