Vous n’allez pas appliquer une astuce isolée. Vous allez observer, formuler une hypothèse, tester sans masquer le symptôme, puis conserver une preuve et un retour arrière.
Le problème concret
Un titre paraît trop étroit, une image refuse de s’aligner ou une section déborde. La première réaction consiste souvent à modifier directement l’élément visible. Pourtant, sa largeur ou son espacement peut être décidé par un groupe parent, le modèle de page, les styles globaux, le thème ou une règle CSS externe.
Corriger au mauvais niveau ajoute une exception. Cette exception fonctionne sur une page mais se propage mal, disparaît lors d’une mise à jour ou oblige à empiler du CSS. Le diagnostic doit identifier la couche propriétaire de la décision avant de toucher à la valeur.
Ce qu’il faut comprendre
Le rendu suit une cascade. Dans Gutenberg, distinguez bloc, groupe, composition, partie de modèle, modèle et styles globaux. Dans Elementor, distinguez widget, conteneur, modèle Theme Builder, réglages du site et CSS personnalisé. La bonne correction est généralement placée au niveau le plus haut qui correspond exactement au périmètre souhaité, sans affecter les autres usages.
Avant d’intervenir
Ne commencez pas par appliquer une astuce. Reproduisez la situation, notez la date, l’URL, le compte utilisé et les versions des composants concernés. Travaillez sur une copie lorsque la manipulation peut toucher l’affichage, les données, les commandes ou les accès. Vérifiez qu’une sauvegarde récente existe et que vous savez quelle partie restaurer. Prenez une capture de l’état initial et copiez les valeurs que vous allez modifier. Une intervention reste ainsi comparable et annulable.
Diagnostic guidé
Avant de modifier le site, rassemblez des faits comparables. Procédez dans cet ordre :
- Reproduisez le défaut dans une fenêtre privée et notez l’URL, la largeur, l’état connecté ou déconnecté et le résultat attendu.
- Ouvrez la vue en liste ou le navigateur Elementor, sélectionnez l’élément puis remontez chaque parent en notant largeur, alignement, marge et espacement interne.
- Contrôlez le modèle de page et les réglages globaux. Une zone de contenu étroite peut venir du modèle même si le bloc est réglé en pleine largeur.
- Utilisez l’inspecteur du navigateur pour identifier la propriété calculée, la règle gagnante, le fichier et l’éventuelle règle surchargée.
Procédure détaillée
- Créer une copie du cas. Dupliquez la page sur une préproduction ou utilisez une sauvegarde. Conservez une capture et les valeurs initiales des niveaux concernés.
- Neutraliser sans supprimer. Désactivez temporairement une propriété dans l’inspecteur ou remettez un réglage à sa valeur par défaut sur la copie. Ne modifiez qu’une couche à la fois.
- Observer le périmètre. Si le défaut disparaît, vérifiez les autres éléments partageant le même parent ou style. Une correction globale n’est pertinente que si tous doivent évoluer.
- Corriger à la source. Modifiez le conteneur, modèle ou style global responsable. Utilisez une classe dédiée seulement si le besoin est réellement local et réutilisable.
- Purger et comparer. Purge navigateur, cache de page, optimisation et CDN dans un ordre noté. Comparez la copie, la production et une fenêtre privée avant de conclure.
Cas pratique
Une page Gutenberg affiche un groupe annoncé en pleine largeur, mais le contenu reste limité. Le groupe est bien aligné « pleine largeur » ; l’inspecteur montre pourtant un max-width hérité du modèle. Le changement du bloc ne peut pas dépasser ce cadre. La correction est appliquée à un modèle spécifique utilisé par les pages concernées, au lieu d’ajouter une largeur forcée sur chaque groupe.
Un titre paraît trop étroit, une image refuse de s’aligner ou une section déborde.
La fiche remplie, la preuve de la couche fautive, la correction choisie et son périmètre. avec des critères vérifiables et un retour arrière documenté.
Interpréter les résultats
- Si la règle gagnante appartient à un fichier généré, modifiez son réglage source et régénérez le fichier.
- Si le problème touche tous les usages d’un composant, corrigez le style global ou le modèle.
- Si un seul contexte diffère légitimement, utilisez une variante ou une classe fonctionnelle documentée.
Identifier la couche qui impose un style
Remplacez les doubles accolades avec vos informations, puis copiez le prompt.
Tu es un assistant de diagnostic WordPress. Tu ne dois inventer aucun fait, réglage, résultat ou version.
OBJECTIF
Aide-moi à déterminer quelle couche décide réellement d’une propriété d’affichage avant de proposer du CSS.
CONTEXTE À UTILISER
– URL et élément concerné : {{à compléter}}
– rendu attendu et obtenu : {{à compléter}}
– propriété calculée : {{à compléter}}
– sélecteur gagnant : {{à compléter}}
– thème, éditeur et extensions : {{à compléter}}
– test effectué dans l’inspecteur : {{à compléter}}
CONSIGNES
1. Commence par lister les informations manquantes qui empêchent une conclusion fiable.
2. Classe les hypothèses du test le moins risqué au plus risqué.
3. Pour chaque hypothèse, indique le contrôle, la preuve attendue et ce qui l’invaliderait.
4. Sépare clairement observation, hypothèse et recommandation.
5. Ajoute une sauvegarde préalable, une procédure de retour arrière et une vérification après intervention.
6. Si une action peut toucher la production, les commandes, les comptes ou les données, demande un test sur une copie.
FORMAT DE RÉPONSE ATTENDU
– hypothèses classées par couche
– contrôle précis pour chaque hypothèse
– correctif au bon niveau
– pages à recetter
Termine par : « Ce qui doit être validé par un humain avant toute action ».Contrôle humain obligatoire : ne transmettez aucun mot de passe, clé, donnée client ou information de paiement ; vérifiez chaque proposition avant de l’appliquer.
Exercice à réaliser
Choisissez un défaut visible. Complétez la fiche de diagnostic avec six niveaux possibles, puis prouvez la couche responsable par une neutralisation temporaire. Faites une capture avant/après de l’inspecteur avec la propriété gagnante entourée.
Livrable : la fiche remplie, la preuve de la couche fautive, la correction choisie et son périmètre.
Documenter la décision
Dans votre compte rendu, séparez l’observation, l’hypothèse, le test, le résultat et la décision. Indiquez aussi les hypothèses écartées : elles évitent de recommencer le même diagnostic. Joignez les mesures ou captures avant/après, mais retirez les données personnelles, clés, jetons et informations de paiement. Une autre personne doit pouvoir comprendre ce qui a été testé, reproduire le contrôle et exécuter le retour arrière sans dépendre de votre mémoire.
Critères de réussite
- Le défaut est reproductible.
- Une seule propriété explique le changement observé.
- Le périmètre de la correction correspond au besoin.
- La correction reste valide après purge et en navigation privée.
Retour arrière
Restaurez la valeur initiale du niveau modifié et purgez les mêmes caches dans le même ordre. Si un modèle a été modifié, utilisez sa révision ou son export. Ne compensez pas une correction ratée par une nouvelle exception.
Erreurs fréquentes
Modifier l’enfant alors que le parent impose la contrainte.
Ajouter !important sans identifier la règle gagnante.
Tester uniquement dans l’éditeur connecté.
Modifier un fichier CSS généré qui sera réécrit.
Approfondissement : raisonner comme lors d’une intervention
Le rendu final résulte d’une cascade. Le contrôle visible dans l’éditeur n’est pas nécessairement celui qui gagne : une règle de thème, un modèle, une classe utilitaire, un style en ligne ou une feuille chargée plus tard peut prendre le dessus. Le diagnostic consiste à identifier la propriété calculée, la règle gagnante et l’endroit où cette règle devrait être corrigée pour rester cohérente.
Matrice de tests et de preuves
Ne cherchez pas à confirmer immédiatement votre première intuition. Traitez chaque point de diagnostic comme une hypothèse concurrente. Pour chaque ligne, conservez une preuve datée et indiquez si elle confirme, affaiblit ou ne permet pas de départager l’hypothèse.
| Hypothèse | Contrôle | Preuve attendue |
|---|---|---|
| H1 | Reproduisez le défaut dans une fenêtre privée et notez l’URL, la largeur, l’état connecté ou déconnecté et le résultat attendu. | Capture du défaut avec URL, viewport et compte utilisés. |
| H2 | Ouvrez la vue en liste ou le navigateur Elementor, sélectionnez l’élément puis remontez chaque parent en notant largeur, alignement, marge et espacement interne. | Propriété calculée et sélecteur gagnant dans l’inspecteur. |
| H3 | Contrôlez le modèle de page et les réglages globaux. Une zone de contenu étroite peut venir du modèle même si le bloc est réglé en pleine largeur. | Test temporaire isolant une seule propriété. |
| H4 | Utilisez l’inspecteur du navigateur pour identifier la propriété calculée, la règle gagnante, le fichier et l’éventuelle règle surchargée. | Contrôle des autres pages ou composants touchés par la règle. |
Scénario avancé
Un titre reste noir malgré une couleur choisie dans Gutenberg. L’inspecteur révèle une règle du thème ciblant les titres du modèle avec une spécificité supérieure. Modifier chaque bloc masquerait la cause. Le réglage global du modèle est corrigé sur une copie, puis la recette couvre les autres types de titres, le mode sombre du navigateur et les états de lien. Une capture de la cascade avant/après reste au rapport.
Rejouez ensuite le scénario dans les mêmes conditions, puis dans une condition volontairement différente. Cette seconde passe vérifie que le résultat vient bien de la modification et non d’un cache, d’une session, d’un délai externe ou d’une coïncidence.
Contrôle de compréhension
Quelle information doit être obtenue avant toute modification ?
La propriété exacte, la règle gagnante, son fichier ou origine et son périmètre.
Quel résultat invaliderait votre hypothèse principale ?
Le défaut persistant lorsque la règle supposée est neutralisée dans l’inspecteur.
Quelle preuve doit rester dans le compte rendu ?
La cascade avant/après, la portée du correctif et les pages recettées.
Revue finale à froid
Revenez sur l’intervention après une nouvelle connexion et, si le sujet le permet, depuis un autre navigateur ou un autre compte. Relisez votre rapport sans vous fier à votre mémoire : le contexte, les valeurs initiales, l’action, la preuve, la décision et le retour arrière doivent être compréhensibles. Si un de ces éléments manque, la leçon n’est pas encore terminée, même si le symptôme semble avoir disparu.
↓Télécharger la fiche de travail (PDF)PDF↓Version éditable (Markdown)MD
