Afficher la date de mise à jour

Divi ne propose pas nativement de module pour afficher la date de dernière modification. Sur des acticles techniques c’est pourtant une information essentielle pour les lecteurs.

Dans ce tuto, nous allons voir comment booster notre extension maison clea-divi-add-functions pour créer un shortcode intelligent et comment l’intégrer proprement dans le Theme Builder. Cet article suppose qu’on a un site avec WordPress, le thème DIVI

Cette extension a été créé il y a longtemps (2017). Voir Une extension pour ajouter des fonctionnalités au thème Divi (WordPress). Le code complet, mis à jour aujourd’hui, est disponible sur github ici.

Etape 1 créer un shortcode pour afficher la date de mise à jour

Je l’ajoute dans le fichier includes/cdaf-editor.php de mon extension.

/**
 * Enregistrement du shortcode sur le hook 'init'
 * C'est l'étape cruciale pour que Divi l'interprète correctement.
 */
add_action('init', 'clea_register_shortcodes');

function clea_register_shortcodes() {
    add_shortcode('date_maj', 'clea_date_maj_shortcode');
}

/**
 * Logique du shortcode [date_maj]
 */
function clea_date_maj_shortcode($atts) {
    $date_modif = get_the_modified_date('d/m/Y');
    $date_publi = get_the_date('d/m/Y');

    // On n'affiche le texte que si une modification réelle a eu lieu
    if ($date_modif && $date_modif !== $date_publi) {
        return ' | Mis à jour le ' . esc_html($date_modif);
    }

    return ''; // Renvoie vide si l'article est "neuf"
}

Maintenant si je met le short code [date_maj] n’importe où dans mon site, il sera remplacé par | Mis à jour le 25 février 2026 pour le lecteur.

Etape 2 afficher automatiquement la date de mise à jour

Passer au Theme Builder DIVI (Générateur de thèmes) va permettre de rendre systématique l’affichage des articles.

1. Créer le modèle de base

1. Allez dans Divi > Theme Builder.
2. Cliquez sur Ajouter un nouveau modèle > Tous les articles.
3. Cliquez sur Ajouter un corps personnalisé > Créer un corps personnalisé.

2. La structure des colonnes

mon site utilise actuellement une mise en page avec une barre latérale à droite.

• Dans l’éditeur, insérer une Section standard.
• Choisir une structure de ligne avec deux colonnes : une large à gauche (2/3) et une plus étroite à droite (1/3).

3. colonne de GAUCHE (Le contenu)

Vous devez empiler les modules suivants :

1. Module Fil d’Ariane (Breadcrumbs) : avec l’extension Yoast SEO, insérer un module Code ou Texte avec le shortcode [ Accueil » Tous les articles » Afficher la date de mise à jour].
2. Module Titre du poste (Post Title) :
   • C’est ici que s’affiche le titre H1 automatiquement.
   • Réglages : Allez dans Éléments et activez « Afficher le Titre », « Afficher les Métadonnées » (Auteur, Catégories, Commentaires).
3. Module Texte (Pour la Date de Mise à jour) :
   • insérer un module Code ou Texte. Y placer [date_maj].
   • Stylez ce texte en gris clair et italique pour qu’il soit discret.
4. Module Contenu du poste (Post Content) :
   • CRUCIAL : Sans ce module, le texte de vos articles ne s’affichera pas. C’est lui qui « appelle » le contenu que vous rédigez dans chaque article.

4. colonne de DROITE (La Sidebar)

Pour retrouver vos widgets actuels :

1. Ajoutez un module Barre latérale (Sidebar).
2. Sélectionnez la zone de widgets nommée « Sidebar » (ou « Barre latérale principale »).
3. Cela affichera automatiquement vos sections « Articles de cette série », « Rechercher », etc.

et voilà

Maintenant lorsqu’un article a été mis à jour (et uniquement dans ce cas, la date de mise à jour s’affiche). Comme dans cette capture d’écran :