Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment afficher des dates similaires dans WordPress (2 méthodes)

Après avoir géré des sites WordPress pendant de nombreuses années, nous avons appris que de petites modifications peuvent faire une grande différence. L’un de ces petits mais importants détails est la façon dont vous affichez la date sur vos publications.

La plupart des blogs affichent généralement la date exacte de publication d’un article. Mais l’utilisation de dates similaires, comme « il y a deux jours » ou « hier », peut s’avérer plus utile pour les Lecteurs. Ces dates indiquent rapidement aux gens à quel point votre contenu est nouveau et pertinent, ce qui peut les inciter à le lire.

Le problème est que la plupart des thèmes WordPress n’affichent pas les dates de cette manière par défaut. Mais ne vous inquiétez pas ! Nous avons trouvé deux façons simples d’afficher les dates similaires sur votre site WordPress : l’une à l’aide d’une extension et l’autre à l’aide d’un simple code.

How to Display Relative Dates in WordPress

Pourquoi afficher des dates relatives plutôt que des dates absolues/exactes ?

Avez-vous déjà remarqué que les plateformes de réseaux sociaux comme Facebook ou Twitter affichent les dates de publication sous la forme « il y a 2 heures » ou « il y a 3 jours » au lieu des dates exactes ? C’est ce qu’on appelle un format de date relatif.

Contrairement aux dates absolues (comme « 21 août 2024 »), les dates relatives dans WordPress donnent à vos lecteurs une idée rapide de la fraîcheur de votre contenu.

Prenons un exemple. Lorsque les internautes voient une publication datée de « 2 jours » plutôt que d’une date précise, ils savent instantanément qu’il s’agit d’un contenu récent. De cette façon, les Lecteurs peuvent rapidement savoir quelles publications sont nouvelles et valent la peine d’être consultées sans avoir à penser à la date du jour ou à faire un quelconque calcul mental.

Il convient toutefois de noter que les dates liées ne conviennent pas à tous les types de sites.

Par exemple, si vous gérez un blog historique ou un site où les dates précises sont cruciales, s’en tenir aux dates absolues pourrait être préférable. L’essentiel est de tenir compte de votre type de contenu et des préférences de votre public lorsque vous décidez d’ajouter ou non des dates relatives à votre site WordPress.

Avec tout cela dit, jetons un coup d’œil à 2 façons d’ajouter des dates relatives dans WordPress. Nous avons trouvé une extension qui facilite le processus pour vous, mais nous avons également trouvé une méthode de code qui offre plus de contrôle. Vous pouvez utiliser les liens rapides ci-dessous pour aller à votre méthode préférée :

Méthode 1 : Utilisation de l’extension Meks Time Ago (gratuite mais limitée)

Si vous êtes à la recherche d’une extension simple pour afficher des heures et des dates similaires dans WordPress, alors nous avons un excellent choix pour vous. De toutes les extensions de dates relatives que nous avons essayées, Meks Time Ago est l’une des plus faciles pour les débutants. De plus, il est gratuit et fonctionne avec les thèmes classiques et les blocs.

Pour utiliser Meks Time Ago, vous pouvez installer et activer l’extension WordPress dans votre zone d’administration.

Après cela, allez dans Réglages  » Général dans votre tableau de bord. Défilez vers le bas, et vous trouverez les réglages de l’extension de Meks Time Ago.

The Meks Time Ago plugin settings

Le premier réglage que vous devez activer est celui de l’application du format « il y a un certain temps ». Ici, vous devez choisir « Date » et « Heure ».

Vous pouvez également choisir d’appliquer ce format de publication aux publications qui ne sont pas plus anciennes qu’un certain nombre de minutes, d’heures, de jours et de mois.

Nous avons décidé d’opter pour une durée de 12 mois.

Configuring the Meks Time Ago plugin settings

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

Nous avons choisi de le conserver après la date similaire parce que la plupart des gens sont familiers avec ce libellé.

Choosing where to place the word ago in Meks Time Ago plugin page

Enfin, vous pouvez remplacer le mot « il y a » par un autre terme si nécessaire. Vous pouvez également le laisser vide.

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

Saving the Meks Time Ago plugin settings

Voilà, c’est fait ! Désormais, toutes vos dates de publication auront des dates liées. Vous pouvez voir vos modifications sur mobile, ordinateur de bureau et tablette pour voir si tout semble correct.

Voici un exemple :

Example of relative dates added with the Meks Time Ago plugin

Une chose que nous n’aimons pas dans Meks Time Ago est que, même si la publication a eu lieu aujourd’hui ou hier, l’extension affichera la date de publication comme  » il y a X minutes  » ou  » il y a X heures « .

Ce format ne dérange pas certaines personnes, mais d’autres souhaitent que la date soit affichée sous la forme « Aujourd’hui » ou « Hier ». Si c’est ce que vous préférez, vous pouvez suivre la méthode suivante.

Méthode 2 : Utilisation d’un client/cliente personnalisé (personnalisable mais légèrement avancé)

Cette méthode implique un code personnalisé et, comme nous l’avons expliqué précédemment, il s’agit d’un meilleur choix si vous souhaitez afficher les dates sous la forme « 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 accompagner tout au long du processus, étape par étape. De plus, nous utiliserons une extension d’extrait de code appelée WPCode, qui permet d’ajouter facilement et en toute sécurité du code personnalisé sans casser votre site.

Vous pouvez en savoir plus sur cette extension dans notre Avis WPCode.

Tout d’abord, installez et activez l’extension WordPress dans votre zone d’administration.

Après cela, vous devez vous rendre 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é « .

Adding a new custom code snippet in WPCode

Donnez maintenant un nom à votre nouveau code personnalisé. Il peut s’agir de quelque chose de simple, comme « Date relative formatée avec l’heure ».

Modifiez également le type de code en « extrait de PHP ».

Creating custom code to display relative dates with WPCode

Une fois que c’est fait, il suffit de copier et de coller l’extrait de code ci-dessous dans la boîte de Prévisualisation 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 modifie dans un format simple/simple d'utilisation.

Par exemple, il peut afficher « Aujourd’hui à 14h30 » ou « Il y a 3 jours à 10h15 », ce qui permet à vos lecteurs de comprendre plus facilement l’ancienneté d’une publication.

La deuxième fonction, relative_date_shortcode, crée un code court que vous pouvez utiliser dans WordPress. Ce code court 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 vos dates de publication plus simples/simples d’utilisation. Les Lecteurs verront rapidement à quel point votre contenu est récent, ce qui peut rendre votre site plus actuel et plus attrayant.

Défilez ensuite vers le bas jusqu’à la section « Insertion ». Choisissez ensuite « Insertion automatique » pour la méthode d’insertion et « Interface publique uniquement » pour l’Emplacement.

Choosing Frontend Only as the code insertion location in WPCode

Dans le coin supérieur droit, modifiez le commutateur « Inactif » en « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».

Votre code étant activé, voyons comment vous pouvez activer les dates similaires sur votre blog WordPress. Le processus différera en fonction du type de thème que vous utilisez.

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

Si vous utilisez un thème sur blocs, vous pouvez simplement ajouter le code court à l’élément de modèle « Post Meta ».

Cet élément du modèle est responsable de l’affichage des informations relatives aux publications de votre blog, telles que l’auteur/autrice, la catégorie et la date de publication.

Astuce : Si vous ne voyez pas le menu du personnalisateur de thème dans l’interface d’administration de WordPress, cela signifie que vous utilisez probablement un thème basé sur des blocs. Sinon, passez à la méthode suivante.

Tout d’abord, allez dans Apparence  » Éditeurs/éditrices pour ouvrir l’éditeur de site complet.

Selecting the Full-Site Editor from the WordPress admin panel

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

Cliquez sur « Compositions ».

Clicking the Patterns menu in the Full Site Editor

Sur la page suivante, vous verrez toutes les compositions et tous les éléments de modèle que votre thème possède.

Il suffit de sélectionner l’option « Post Meta ».

Editing the Post Meta template part with the full site editor

Vous devriez maintenant voir l’élément du modèle de publication Meta.

Tout d’abord, vous devez supprimer le bloc Date existant afin que nous puissions le remplacer par notre code court.

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 en liste » en haut de la page et sélectionner le bloc « Date ». Cliquez ensuite sur le menu à trois points et choisissez « Supprimer ».

Selecting the Date block in the Post Meta template part

Une fois le bloc Date supprimé, ajoutez le bloc « Shortcode » à votre Meta de publication.

Pour ce faire, cliquez sur le bouton « + » n’importe où sur la page et faites-y glisser le bloc du code court.

Adding a shortcode block in the full site editor

Ensuite, tapez le code court suivant dans le bloc :

[relative_date]

Une fois que c’est fait, il suffit de cliquer sur « Enregistrer ».

Adding the relative date shortcode in the full site editor

Désormais, votre modèle de publication unique utilisera des dates liées.

Voici ce que cela donne sur notre site de démonstration :

Example of a relative date made with the WPCode custom code on a block theme

Comment ajouter le format de date lié à dans les thèmes classiques

Le processus d’ajout de dates similaires dans les thèmes classiques de WordPress est un peu différent et plus technique. En effet, chaque thème classique a des configurations différentes.

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

Si c’est la première fois que vous personnalisez les fichiers de votre thème classique, nous vous recommandons de le faire sur un site 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 direct.

La première étape que vous devez faire est de trouver le fichier du thème qui est responsable de l’affichage des métadonnées de votre publication. Il peut s’agir de

  • Votre fichier de publication unique (généralement nommé single.php)
  • L’élément du modèle qui affiche le contenu de votre publication (quelque chose comme content.php)
  • Le fichier des marqueurs de votre Modèle, qui contient des fonctions permettant d’afficher les informations relatives à la publication (communément affiché template-tags.php).

En règle générale, vous devez rechercher les lignes de code qui affichent la date de publication. 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 la façon de trouver les fichiers de thème WordPress à modifier à l’aide d’une simple extension. Vous pouvez également contacter votre développeur/développeuse de thème WordPress ou consulter leur 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 l’ouvrir via FTP ou le gestionnaire de fichiers de votre fournisseur d’hébergement WordPress.

Si vous êtes un utilisateur/utilisatrice de Bluehost, alors 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  » Réglages  » pour le site que vous essayez de personnaliser.

Bluehost site settings

La page des Réglages de votre site s’ouvre alors.

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

Click Manage button next to the File Manager option

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

Comme notre fichier s’appelle template-tags.php, nous devons aller dans public_html  » wp-content  » theme-name  » inc.

Opening the inc folder inside a WordPress theme using a file manager

Vous avez maintenant le choix entre plusieurs fichiers.

Allez-y et choisissez le fichier template-tags.php. Cliquez sur le fichier avec le bouton droit de la souris et sélectionnez « Modifier ».

Editing the template tags classic theme file with the file manager

Localisez maintenant le code responsable de l’affichage de la date de publication.

Pour ce faire, vous pouvez utiliser les touches CTRL / Commande et F.

Finding the code responsible for displaying post dates in a WordPress theme file using the file manager

Vous devez maintenant modifier ce code particulier afin qu’il appelle la fonction human_readable_relative_date que nous avons ajoutée plus tôt à l’aide de 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 le code modifié, cliquez sur le bouton « Enregistrer les modifications ».

Saving changes made to the template tag file in the file manager

Si votre code ne fonctionne pas, et que vous êtes un débutant complet en la matière, nous vous suggérons d’utiliser un outil d’IA comme le ChatGPT d’OpenAI pour comprendre ce qui ne va pas dans votre code.

Vous pouvez poser une question simple comme : « Bonjour, j’essaie de faire X à l’aide du code ci-dessous [collez votre code ici], mais cela ne fonctionne pas. Pouvez-vous m’aider à comprendre ce qui ne fonctionne pas ?

Ceci étant dit, si votre code fonctionne, voici ce que vous devriez voir sur votre Modèle de publication unique :

Example of a relative date on a classic theme, made with the WPCode custom code

Astuces pour personnaliser votre blog WordPress

Outre l’ajout de dates relatives à vos publications WordPress, il existe de nombreuses autres façons de personnaliser votre blog. En voici quelques exemples :

Nous espérons que cet article vous a aidé à apprendre comment afficher des dates liées à WordPress. Vous pouvez également consulter nos choix d’experts des meilleurs constructeurs de pages par glisser-déposer pour WordPress et notre guide ultime sur la façon de modifier un site WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

4 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ziaul Hai

    I want to know how to remove relative dates. My wordpress theme shows the relative date by default. But I am not able to change that.

    • WPBeginner Support

      You could replace the relative_post_the_date with the PHP in this article depending on how you want it to display but if you reach out to your theme’s support they may have a built-in method to disable this style of date.

      Administrateur

  3. Sreeharsh

    Hi, I’m getting wrong time stamp using Meks Time Ago plugin in my homescreen. For a 9 hour ago post, its showing 2 weeks ago. Please help me solve it.
    Thank you.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.