Divi Article Update

Plugin WordPress qui ajoute deux modules Divi Builder pour les articles :

1. Meta Article (auteur, date, partage) – Affiche l’auteur, la date de publication, la date de mise à jour (si différente) et un bouton de partage (Facebook, X, LinkedIn, copie du lien).
2. Table des matières – Génère automatiquement une table des matières à partir des titres H2, H3 et H4 du contenu.

Prérequis

• WordPress 5.0+
• PHP 7.4+
• Divi (thème) ou Divi Builder (plugin) actif

Les icônes utilisent Font Awesome (fourni par Divi).

Installation

1. Téléversez le dossier divi-article-update dans wp-content/plugins/.
2. Activez le plugin dans Extensions.
3. Dans le Divi Builder, les deux nouveaux modules apparaissent dans la liste des modules.

Utilisation

Module Meta Article

• Placez le module où vous voulez afficher les métadonnées (souvent en haut ou sous le titre).
• Options : afficher/masquer auteur, date de publication, date de mise à jour, bouton Partager ; libellé du bouton Partager.
• Les valeurs (auteur, dates) sont remplies par le plugin à partir du post courant ; le JavaScript complète éventuellement à partir du DOM.

Module Table des matières

• Placez le module à l’emplacement souhaité (souvent en début d’article).
• Options : titre, niveaux de titres (H2 seul, H2+H3, H2+H3+H4), zone à scanner (sélecteur CSS, vide = tout le contenu), défilement fluide oui/non.
• La liste est générée en JavaScript à partir des titres trouvés dans la page ; les titres sans id reçoivent un identifiant automatique pour les ancres.

Build (Visual Builder - support complet)

Pour le support complet du Visual Builder (vb_support = 'on'), le plugin inclut des composants React. Vous devez compiler le JavaScript :

npm install
npm run build

Cela génère le dossier build/. Sans cette étape, les modules fonctionnent en frontend mais l’aperçu dans le Visual Builder peut être limité.

Note : dans ce dépôt, les assets compilés utilisés par Divi sont déjà présents dans assets/. Le dossier build/ est un artefact optionnel à régénérer si vous modifiez le code source.

• npm start : mode développement (watch + recompilation automatique)
• npm run build : build de production

Structure du projet

divi-article-update/
├── divi-article-update.php          # Fichier principal du plugin
├── package.json                     # Dépendances et scripts de build
├── includes/
│   ├── loader.php                   # Charge les modules PHP
│   ├── loader.js                    # Point d'entrée React (builder)
│   ├── fields/index.js
│   └── modules/
│       ├── index.js                 # Export des composants React
│       ├── PostMeta/PostMeta.php    # Module meta auteur/date/partage
│       ├── PostMeta/PostMeta.jsx    # Composant React (Visual Builder)
│       ├── PostMeta/style.css
│       ├── TableDesMatieres/TableDesMatieres.php
│       ├── TableDesMatieres/TableDesMatieres.jsx
│       └── TableDesMatieres/style.css
├── assets/
│   ├── css/front.css                # Styles front
│   └── js/front.js                  # Scripts meta + TOC
├── build/                           # Généré par npm run build
└── README.md

Licence

Utilisation libre. Aucune garantie.