# Versionner ses templates Elementor : export JSON, Git et WP-CLI > Exporter les templates Elementor en JSON, les suivre dans Git et les synchroniser entre environnements avec les commandes wp elementor. - Auteur : Clément Hadrot - Publié le : 2022-12-09 - Mis à jour le : 2022-12-09 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/versionner-templates-elementor-json-git-wp-cli/ ## L’essentiel - Export JSON lisible et diffable dans Git - wp elementor library pour rejouer les imports en CLI - Synchroniser dev, recette et prod sans clic Sur un projet client pour une agence immobilière, l'équipe travaillait à trois sur le même site Elementor : un intégrateur pour les pages produit, un développeur pour les widgets personnalisés, un chef de projet pour les contenus. Résultat, des templates de header écrasés d'une semaine sur l'autre, sans historique, sans moyen de revenir en arrière. La bibliothèque Elementor n'a pas de gestion de conflits ; c'est à l'équipe de s'en donner une. La bonne nouvelle, c'est qu'Elementor exporte ses templates au format JSON depuis plusieurs versions déjà, et que ce format se prête très bien à un suivi Git classique. Associé aux commandes WP-CLI dédiées, il devient possible de traiter les templates comme du code : relecture de diff, retour arrière, déploiement scripté. ## Le format d'export JSON Depuis l'écran **Templates > Tous les templates**, un clic sur « Exporter le template » télécharge un fichier `.json`. Sa structure est stable d'une version à l'autre : un tableau `content` qui contient l'arborescence des sections et widgets, un objet `page_settings` pour les réglages de page, un champ `title`, un champ `type` (`page`, `section`, `header`, `footer`…) et un champ `version` qui correspond au schéma de données, pas à la version du plugin. Ce fichier se prête bien à un `git diff` à condition de le reformater proprement, car Elementor l'exporte sans indentation. Un simple passage par `python -m json.tool` ou `jq` avant commit rend les diffs lisibles : ``` jq . header-principal.json > header-principal.formatted.json mv header-principal.formatted.json header-principal.json git add header-principal.json git commit -m "Header : ajout du bouton devis en desktop" ``` ## Organiser le dossier de templates dans le dépôt Sur ce projet, la convention retenue a été un dossier `elementor-templates/` à la racine du thème enfant, avec un sous-dossier par type : `headers/`, `footers/`, `sections/`, `pages/`. Chaque fichier porte le nom du template tel qu'affiché dans l'interface, en minuscules et sans accents, pour éviter les surprises entre systèmes de fichiers. > L'essentiel à retenir : Export JSON lisible et diffable dans Git ; wp elementor library pour rejouer les imports en CLI ; Synchroniser dev, recette et prod sans clic Cette organisation a un effet secondaire appréciable : elle documente la bibliothèque. N'importe quel développeur qui rejoint le projet peut lister les templates disponibles sans ouvrir WordPress, simplement en parcourant le dépôt. ## Importer et synchroniser avec WP-CLI Côté outillage, Elementor Pro expose des commandes WP-CLI pour la bibliothèque de templates. La commande `wp elementor library import` prend un chemin de fichier JSON (ou un dossier) et l'importe directement dans la bibliothèque du site cible, sans passer par l'interface : ``` wp elementor library import elementor-templates/headers/header-principal.json wp elementor library connect wp elementor system-info ``` `wp elementor library connect` relie le site à la bibliothèque cloud Elementor lorsque des templates partagés y sont stockés, et `wp elementor system-info` sort un rapport utile pour diagnostiquer un environnement avant un import massif. Sur un site avec une trentaine de templates, l'import scripté de l'ensemble d'un dossier prend moins de deux minutes en ligne de commande, contre une bonne demi-heure de clics répétés dans l'interface. ### Intégrer l'import dans un script de déploiement Dans le pipeline de déploiement du projet, une étape shell parcourt le dossier et importe chaque fichier modifié depuis le dernier déploiement : ``` for f in $(git diff --name-only HEAD~1 HEAD -- elementor-templates/); do wp elementor library import "$f" --path=/var/www/recette done wp elementor update-db --force --path=/var/www/recette ``` La commande `wp elementor update-db` mérite d'être ajoutée systématiquement après un import : elle force la mise à jour des structures de données internes d'Elementor si une migration était en attente, évitant les templates affichés à moitié après un déploiement. ## Les limites à connaître Ce workflow a ses angles morts. Un template JSON référence des identifiants internes (images de la médiathèque, éventuellement des IDs de posts liés par un dynamic tag) qui ne sont pas garantis identiques entre deux installations WordPress. Un import sur un environnement vierge peut donc afficher une image cassée si le média n'existe pas encore avec le même identifiant. La parade la plus fiable reste de synchroniser la médiathèque avant d'importer les templates, ou d'accepter de recréer les liens d'image après coup sur un nouvel environnement. Autre point de vigilance : les styles globaux (couleurs et polices définies dans Site Settings) ne voyagent pas avec le template lui-même. Un header qui utilise une couleur globale nommée « Accent » s'affichera correctement seulement si cette couleur existe déjà sur le site cible, sous le même nom. > Conseil maison : avant tout import en environnement de recette, exportez d'abord l'état existant en JSON. Cela donne un point de retour arrière immédiat si l'import écrase quelque chose d'important, sans dépendre d'une sauvegarde complète de la base. ## En résumé Le format JSON d'Elementor n'a pas été conçu pour Git, mais il s'y prête suffisamment bien pour sortir la gestion des templates de la seule interface graphique. Combiné aux commandes `wp elementor`, il permet de traiter la bibliothèque comme n'importe quel autre artefact versionné du projet : diff avant merge, historique complet, déploiement reproductible d'un environnement à l'autre. Ce n'est pas un remplacement d'un vrai système de gestion de contenu structuré, mais pour une équipe qui construit ses pages avec Elementor au quotidien, c'est la différence entre un historique exploitable et des templates qui se marchent dessus silencieusement.