Dépannage WordPress
Mise en page WordPress cassée : CSS, cache ou responsive ?
Une page « sans style » indique souvent une feuille CSS non chargée. Un bloc décalé ou différent sur mobile relève plutôt d’une règle, d’un breakpoint, d’un cache ou d’un HTML inattendu. Le diagnostic commence donc dans le réseau et les styles calculés.
Ce que ce symptôme signifie réellement
HTTP 404/403, contenu mixte, CORS ou cache cassé peuvent empêcher une feuille entière. Si elle charge, la cascade, la spécificité et l’ordre déterminent la règle gagnante.
Un correctif CSS qui fonctionne à 1 440 px peut créer un débordement à 320 px ou casser le zoom. Il faut vérifier la matrice réellement touchée.
Avant toute modification : préserver les preuves et le retour arrière
Notez l’heure, l’URL, le message exact, le code HTTP et le dernier changement connu. Vérifiez ensuite qu’une sauvegarde récente couvre bien les fichiers et la base de données, qu’elle est lisible et qu’un retour arrière limité est possible. Une sauvegarde non testée ne suffit pas pour une intervention risquée.
- Ne transmettez jamais de mot de passe, clé privée, jeton, fichier
wp-config.phpou export de base dans un formulaire ou une capture. - Travaillez d’abord sur un staging ou une copie isolée lorsque le diagnostic exige une mise à jour, une modification de code ou une opération de base de données.
- Conservez les journaux et les fichiers suspects avant nettoyage : ils peuvent être nécessaires pour comprendre la cause ou vérifier l’étendue d’un incident.
Diagnostic : avancer du signal le plus fiable au test le moins intrusif
Capturez la page, la largeur, le navigateur et l’élément. Inspectez les ressources et styles calculés avant de vider tous les caches.
- Contrôler que chaque feuille locale répond 200 avec le bon type MIME.
- Identifier la règle appliquée, celle barrée, sa source et l’éventuel style inline du constructeur.
- Comparer connecté/déconnecté, cache froid/chaud et mode sans JavaScript.
- Mesurer overflow, dimensions, polices, images et breakpoints à 320, 390, 768, 1 024 et 1 440 px.
Correction : appliquer une action ciblée et réversible
Placez la correction dans la couche qui possède le composant : thème enfant, plugin ou réglage du constructeur, avec un sélecteur limité.
- Réparer l’URL ou le chargement de la feuille avant d’ajouter de nouvelles règles.
- Supprimer la cause d’une spécificité excessive au lieu d’empiler
!important. - Réserver une hauteur/dimension aux médias et polices pour éviter les déplacements.
- Purger uniquement les caches concernés et reconstruire les CSS générés si leur empreinte est incohérente.
Contrôles après correction
Une page qui se recharge ne suffit pas à prouver que le problème est résolu. Contrôlez le parcours concerné, une page non connectée, l’administration, les erreurs console et réseau, les journaux serveur, le cache et les redirections. Vérifiez aussi les écrans mobile et desktop si le symptôme touchait le rendu.
- Rendu fidèle aux cinq largeurs, zoom 200 % et clavier.
- Zéro débordement horizontal et aucun contenu essentiel caché.
- Mode sans JavaScript lisible et mouvement réduit respecté.
Quand arrêter et demander une intervention
Si le constructeur régénère les fichiers ou si plusieurs plugins minifient la même feuille, archivez leurs réglages et testez une seule chaîne d’optimisation sur staging.