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.
Lire le conseilUn bouton qui change de couleur, une colonne qui passe sous l’autre ou une page presque sans mise en forme : ces problèmes ne se corrigent pas tous de la même façon. Le plus utile est de repérer ce qui manque avant d’ajouter du CSS ou de vider les caches.
Partir d’un exemple précis
Choisissez une page et un élément qui montrent clairement le défaut. Notez l’adresse, le navigateur, la taille de l’écran et le dernier changement connu. Une capture aide à comparer, surtout si le problème n’apparaît que sur téléphone ou pour les visiteurs déconnectés.
- Presque toute la mise en forme a disparu : commencez par le chargement des feuilles de style.
- Un seul bloc est décalé : examinez les règles appliquées à ce bloc et à son conteneur.
- Seule la version mobile pose problème : cherchez une dimension fixe ou une règle qui change selon la largeur.
Vous pouvez faire ces premiers constats sans enregistrer de modification dans WordPress. Avant de toucher au thème, aux extensions ou aux réglages de génération des fichiers, vérifiez en revanche qu’une sauvegarde récente des fichiers et de la base est restaurable.
Quand une feuille de style ne se charge pas
Dans les outils de développement du navigateur, ouvrez l’onglet Réseau, choisissez le filtre CSS puis rechargez la page. Regardez si une requête échoue et quelle adresse elle demande. Une erreur 404 indique un fichier introuvable ; un refus 403 ou un message de blocage mérite un diagnostic différent.
Ouvrez aussi la réponse du fichier suspect : un statut 200 ne suffit pas si le serveur renvoie en réalité une page HTML à la place du CSS. Gardez le message exact du navigateur. Il permet au prestataire de rechercher un mauvais chemin, une règle serveur ou un fichier généré absent, plutôt que de modifier la mise en page au hasard.
Si les adresses ont changé après une migration, faites corriger leur génération à la source. Ajouter une nouvelle règle CSS ne réparera pas une feuille entière qui ne parvient pas au navigateur. Une erreur de certificat ou un blocage HTTPS ne doit pas non plus être résolu en désactivant les protections du navigateur.
Quand le fichier charge, mais que le bloc reste mal placé
Faites un clic droit sur l’élément puis choisissez Inspecter. Les panneaux de styles indiquent les déclarations appliquées, celles qui sont remplacées par d’autres règles et les valeurs calculées. Vérifiez notamment les dimensions, marges, espacements et propriétés du conteneur : le problème peut venir du parent du bloc.
Vous pouvez désactiver temporairement une déclaration ou essayer une autre valeur dans ces outils. Cela aide à comprendre le résultat sans enregistrer de code sur le site. Ces essais ne constituent pas une correction publiée ; ils disparaissent normalement au rechargement.
Une fois la cause identifiée, placez le correctif dans l’outil qui gère réellement le composant : réglage du constructeur, styles du site ou feuille du thème enfant selon l’installation. Évitez de modifier directement le thème parent, car une mise à jour peut écraser ce changement. N’ajoutez pas systématiquement !important : repérez d’abord la règle concurrente et limitez la correction au bloc concerné.
Quand le problème apparaît sur mobile
Comparez l’élément sur un écran large puis à plusieurs largeurs intermédiaires. Une mise en page peut tenir à 390 pixels et déborder sur un téléphone plus étroit. Contrôlez aussi l’affichage après rotation de l’écran et au zoom, sans cacher le texte ou un bouton pour faire disparaître le débordement.
Examinez les largeurs fixes, les tailles minimales, les longs contenus et les règles conditionnelles de largeur, appelées media queries. Vérifiez également les réglages mobiles du constructeur : une valeur spécifique au téléphone peut remplacer celle de l’ordinateur.
Par exemple, si un encart dépasse parce qu’une largeur de 600 pixels est imposée dans un conteneur plus étroit, commencez par retrouver ce réglage. Agrandir toute la page ou masquer le débordement ne traite pas la dimension qui pose problème. Si seules les photos sont concernées, le guide sur les images WordPress permet de vérifier aussi leurs fichiers et leurs variantes.
Fichiers générés et cache : intervenir au bon endroit
Un résultat différent entre l’éditeur et la page publique peut venir de fichiers générés ou de plusieurs couches de cache. Notez d’abord quelle version est affichée, puis vérifiez le navigateur, le cache WordPress et l’éventuel service de diffusion. Modifier plusieurs réglages en même temps rend la cause plus difficile à retrouver.
Si le site utilise Elementor et que ses fichiers générés sont en cause, consultez sa procédure actuelle Clear Files & Data. L’éditeur demande une sauvegarde préalable ; le chemin et l’intitulé peuvent varier selon la version. Cette opération peut toucher plusieurs pages : elle ne doit pas devenir le premier réflexe pour un bouton mal aligné. Après régénération, vérifiez les pages concernées et purgez les caches nécessaires.
Vérifier la correction dans les conditions réelles
Reprenez la page de départ, puis une autre page utilisant le même composant. Testez l’affichage déconnecté, sur ordinateur et sur téléphone, avec les textes et images réels. Vérifiez les boutons, la navigation au clavier et le zoom : une correction visuelle ne doit pas rendre une action inaccessible.
Conservez le réglage ou le fichier précédent et notez ce qui a changé. Si le défaut revient après une mise à jour, une publication ou une purge, faites examiner la génération des styles et l’ordre de chargement avant d’ajouter un nouveau correctif. Un diagnostic WordPress peut alors partir des captures et des messages déjà relevés, sans recommencer les essais à l’aveugle.