Comment réparer un CSS cassé dans le panneau d'administration de WordPress

rencontrer WordPress Le problème des styles CSS corrompus dans le backend est un véritable casse-tête. En effet, l'interface d'administration du backend peut se révéler être une page désordonnée et sans style.

Ce problème rend non seulement le backend du site difficile à utiliser, mais il entrave aussi directement la gestion et la maintenance du site, c'est donc un problème qui doit être résolu dès que possible. Il s'agit donc d'un problème qui doit être résolu le plus rapidement possible. Et de nombreux débutants ne savent souvent pas comment le résoudre.

Nous avons rencontré un problème similaire sur notre propre site web, nous avons donc essayé toutes les étapes de dépannage pour trouver la solution la plus simple et la plus efficace. Dans ce tutoriel, nous allons vous expliquer commentCorrection rapide de WordPress Problème de corruption de style CSS dans le backend.

Pourquoi le CSS du backend de WordPress est-il cassé ?

Il y a de nombreuses raisons pour lesquelles les CSS du backend de WordPress sont corrompus, ce qui rend difficile la résolution du problème pour les débutants. Vous trouverez ci-dessous un résumé des principales causes de corruption des styles CSS dans le backend de WordPress :

1. conflit entre les plug-ins
   Certains plugins dont le code est de mauvaise qualité peuvent être livrés avec leurs propres fichiers CSS, qui peuvent entrer en conflit avec les styles par défaut de WordPress et provoquer des anomalies de style dans le backend.
2. Mauvaise correspondance HTTP/HTTPS
   Lorsqu'un site présente des problèmes de contenu mixte (certains fichiers sont chargés via HTTP au lieu de HTTPS), le navigateur peut empêcher le chargement des fichiers CSS, ce qui entraîne une perte de style.
3. Thème interférence
   Certains thèmes chargent leurs propres fichiers CSS dans le backend, ce qui peut entraîner des conflits. Cela peut également entraîner des problèmes de style si vous utilisez un thème personnalisé dans le backend.
4. Problèmes de mise en cache
   Il se peut que le cache du navigateur stocke des fichiers CSS obsolètes. Il se peut également que le plugin de mise en cache serve de vieux fichiers CSS, ce qui entraîne un affichage incorrect des styles.
5. Questions relatives au CDN
   Un réseau de diffusion de contenu (CDN) mal configuré peut diffuser d'anciennes versions de fichiers CSS, ce qui entraîne l'absence ou l'altération de styles.
6. Erreur de permission de fichier
   Si les autorisations sur les fichiers CSS ne sont pas définies correctement, le serveur peut ne pas être en mesure de les lire.
7. corruption de fichiers
   Les fichiers CSS peuvent être endommagés ou perdus au cours du processus de mise à jour ou de téléchargement.
8. Extensions de navigateur
   Certaines extensions de navigateur, en particulier les bloqueurs de contenu, peuvent interférer avec l'affichage des feuilles de style CSS.

Comprendre ces causes peut vous aider à identifier rapidement la cause première des styles CSS cassés dans le backend de WordPress, afin que vous puissiez résoudre le problème plus efficacement.

Étape 1 : Vérifier s'il y a des conflits entre les plugins

D'après notre expérience.Plugin WordPress(en particulier les plugins de mauvaise qualité) sont généralement la cause principale de la corruption du backend CSS. Cependant, il arrive que des plugins bien écrits provoquent des conflits dus à des problèmes de configuration du site ou du serveur WordPress.

Vous trouverez ci-dessous des moyens d'identifier et de résoudre les conflits de plugins :

1) Désactiver tous les plug-ins

Tout d'abord, allez dans le backend de WordPress et naviguez vers Plugins " Plugins installés Page.
Vérifiez tous les plug-ins dans le fonctionnement par lots Sélectionnez dans le menu déroulant désactiverpuis cliquez sur appareil.

Après cela, rafraîchissez votre page backend ou rechargez-la pour voir si le problème CSS est résolu. Si le problème est résolu, cela signifie qu'un plugin est à l'origine du conflit.

2. l'activation des plug-ins au cas par cas

Afin d'identifier les plugins spécifiques qui causent le problème, vous devez réactiver les plugins un par un. Sous chaque plugin, cliquez sur commencer à utiliser.

Rafraîchissez ensuite la page du backend et vérifiez si le CSS est à nouveau cassé.
De cette manière, il est possible de localiser le plug-in spécifique qui déclenche le problème.

3. la mise à jour ou le remplacement des plug-ins

Une fois qu'un plugin conflictuel a été identifié, vous pouvez vérifier s'il existe des mises à jour. Si une mise à jour ne résout pas le problème, envisagez de trouver un plugin de remplacement ou de contacter le développeur du plugin pour résoudre le problème.

Étape 2 : Vérifier que les chargements HTTPS ne contiennent pas de fichiers non sécurisés

Un autre problème courant qui entraîne une corruption du CSS est une mauvaise configuration de HTTPS, qui peut entraîner des problèmes de contenu mixte.

Cela se produit lorsqu'un site web utilise le protocole HTTPS, mais que certains fichiers CSS sont toujours chargés via HTTP (un protocole non sécurisé).
Lorsque cela se produit, les navigateurs comme Google Chrome bloquent automatiquement ces ressources dangereuses, ce qui a pour conséquence de corrompre le backend CSS de WordPress.

Comment identifier le problème ?

Pour ce faire, vous pouvez utiliser la fonction Outils d'inspection (Inspect) Confirmation du problème :

1) Ouvrez votre navigateur, faites un clic droit sur la page et sélectionnez sonde.

2. passez à console pour voir si le Erreur de contenu mixte.

Si quelque chose comme "Contenu non sécurisé bloqué message d'erreur, indiquant que le problème existe.

Comment résoudre les problèmes de contenu mixte ?

1. Vérification des URL dans les paramètres de WordPress

• entrer dans Paramètres " Général afin de s'assurer que le Adresse WordPress répondre en chantant adresse du site Les URLs dans le HTTPS Début.

2. Forcer WordPress à utiliser HTTPS Si l'URL est déjà correcte, vous pouvez forcer manuellement WordPress à utiliser le protocole HTTPS.
Modifiez votre wp-config.php et ajoutez le code suivant :

define('FORCE_SSL_ADMIN', true) ;
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') ! == false) {
    $_SERVER['HTTPS'] = 'on' ;
}

Utiliser des plug-ins pour résoudre les problèmes Si vous n'êtes pas familier avec le code, vous pouvez utiliser des plugins tels que SSL vraiment simpleLa première étape consiste à forcer toutes les URL à utiliser HTTPS en un seul clic.

Étape 3 : Vérifier les interférences thématiques

Les interférences de thème sont l'une des causes les plus courantes de corruption des CSS dans le backend de WordPress. Voici comment identifier et résoudre les problèmes liés aux thèmes :

1) Passer au thème par défaut

Pour vérifier si un thème WordPress est à l'origine de la corruption des CSS, vous devez d'abord passer au thème WordPress par défaut.

1. Allez dans le backend de WordPress et naviguez vers Apparence " Thèmes Page.
2. Activez un thème WordPress par défaut, par exemple Vingt vingt quatre.

prenez noteSi vous n'avez pas installé le thème par défaut, vous pouvez cliquer sur la partie supérieure de la page d'accueil de l'application. Ajouter un nouveau sujet pour rechercher le thème par défaut et l'installer. Le thème par défaut est généralement nommé d'après l'année.

3. Après avoir changé de thème, actualisez la page du backend pour voir si le problème de CSS a été résolu.

Si le problème est résolu, cela signifie que votre thème d'origine est à l'origine d'un conflit CSS.

2. résoudre les conflits de thèmes

Si vous confirmez que le problème vient du thème, essayez ce qui suit :

Vérifier les mises à jour du thème

• entrer dans Apparence " Thèmes sélectionnez votre thème et cliquez sur Mises à jour immédiates afin de s'assurer que la dernière version est utilisée.

Vérifiez le code personnalisé du thème

• Si la mise à jour ne fonctionne pas, vous devez vérifier s'il y a des modifications personnalisées dans le thème, en particulier :
  • CSS supplémentaire(Styles ajoutés dans les paramètres de personnalisation du thème).
  • fichier functions.php dans le code personnalisé pour voir s'il y a des erreurs.

Contactez le développeur du thème

• Si le problème n'est toujours pas résolu, vous pouvez contacter le développeur du thème pour obtenir une assistance technique.
• Si le problème ne peut être résolu, envisagez de passer à un autre fil.

3. gérer le code personnalisé avec WPCode

Pour éviter des problèmes similaires à l'avenir, il est recommandé d'utiliser WPCode Plugin de gestion de code personnalisé. Il s'agit d'un puissant plugin de gestion d'extraits de code WordPress qui permet de gérer les feuilles de style CSS personnalisées sans avoir à modifier directement la page d'accueil du site. functions.php Documentation.

Avantages de WPCode :

• Enregistrez et gérez plus facilement le code CSS personnalisé.
• Vérification intégrée des erreurs pour aider à identifier les problèmes.
• Aucune CSS personnalisée n'est perdue lorsque vous changez de thème.
• Une version gratuite est disponible, adaptée aux besoins de base.

Notre site utilise également WPCode pour gérer les extraits de code personnalisés, y compris les feuilles de style CSS personnalisées.

Étape 4 : Résoudre les problèmes de mise en cache

Normalement, les plugins de mise en cache de WordPress ne mettent pas en cache la zone d'administration du backend. Cependant, des paramètres de cache incorrects peuvent entrer en conflit avec le cache du navigateur, ce qui peut entraîner des problèmes de corruption des feuilles de style CSS.

1. videz la mémoire cache de votre navigateur

Tout d'abord, vous devez vider le cache de votre navigateur :

• Ouvrez les paramètres de votre navigateur et trouvez Effacer les données de navigation Options.
• Sélectionnez Effacer les données en cache et assurez-vous que l'option de mise en cache des fichiers est cochée.
• Une fois la suppression terminée, rechargez le backend de WordPress pour voir si le problème a été résolu.

2. vider le cache de WordPress

Si le problème persiste, l'étape suivante consiste à vider le cache de WordPress.

• Il s'agit d'un fichier de cache généré par le plugin WordPress Cache.
• Allez à la page des paramètres du plugin de cache et trouvez l'option effacer le cache ou d'autres options similaires.

Pour plus de détails sur la manière de procéder, consultez notre articleComment vider le cache de WordPress ?

Étape 5 : Résoudre les problèmes de CDN

Si le site utilise un service CDN (Content Delivery Network), une mauvaise configuration peut entraîner une corruption du CSS dans le backend de WordPress. Voici comment identifier et résoudre ces problèmes :

1. vérifier les erreurs de CDN

Utilisez la fonction Outils d'inspection (Inspect)Passez à console Onglet. Si le fichier CSS est bloqué ou introuvable, vous verrez le message d'erreur correspondant ici.

2. effacer le cache du CDN

1. Connectez-vous au site web de votre service CDN, tel que Cloudflare, et allez dans le panneau de contrôle.
2. partir pour Configuration de la "mise en cache Partie.
3. frappe (sur le clavier) Purgez tout pour effacer tous les caches du CDN.

prenez noteL'interface peut varier légèrement d'un fournisseur de services CDN à l'autre, mais l'option permettant de vider le cache est généralement facile à trouver.

Après avoir vidé le cache, retournez sur votre site et rechargez la page d'accueil pour voir si le problème de CSS a été résolu.

Étape 6 : Corriger les erreurs de permission de fichier

Des permissions de fichiers mal définies peuvent empêcher le serveur de lire les fichiers CSS, ce qui peut causer des problèmes de corruption de CSS dans le backend de WordPress. Voici comment vérifier et corriger les autorisations de fichiers :

1. se connecter au site web

Connectez-vous au site WordPress en utilisant l'utilitaire FTP. Une fois connecté, naviguez jusqu'au répertoire racine de WordPress, qui contient le fichier wp-adminetwp-includes répondre en chantant wp-content Dossier.

2. vérifier et modifier les permissions des dossiers

1. cliquez avec le bouton droit de la souris wp-admin sélectionnez l'autorité compétente en matière de dossiers peut-être causalité.

2) Assurez-vous que les permissions de tous les répertoires sont réglées sur 755.

• Si les autorisations sont incorrectes, modifiez-les en 755 et choisissez de les appliquer de manière récursive à tous les sous-répertoires.

3. vérifier et modifier les droits d'accès aux fichiers

1. Répétez les étapes ci-dessus pour définir les permissions du fichier à 644.
2. Veillez à ce que les autorisations soient appliquées de manière récursive à tous les fichiers (fichiers uniquement).

Après avoir effectué les étapes ci-dessus, revenez sur la page du backend de WordPress pour voir si le problème de CSS a été résolu.

Étape 7 : Réparation des fichiers endommagés

Les fichiers corrompus peuvent également entraîner un affichage anormal des CSS du backend de WordPress.

Les fichiers WordPress peuvent être corrompus pour les raisons suivantes :

• Les mises à jour de WordPress sont incomplètes
• Suppression accidentelle de documents
• Mauvaise configuration du fournisseur de services d'hébergement

Méthodes de réparation ou de remplacement des fichiers corrompus

1.Téléchargez la dernière version de WordPress

• (après un verbe de mouvement, indique un mouvement qui s'éloigne du locuteur) WordPress.org et téléchargez la dernière version des fichiers WordPress.
• Extrayez le fichier ZIP téléchargé sur votre ordinateur.

2. Lien vers le site web

• Connectez-vous au site WordPress à l'aide de l'utilitaire FTP ou du panneau de contrôle.

3. Téléchargez le dernier fichier WordPress

• Téléchargez les fichiers WordPress depuis votre ordinateur vers le répertoire racine de votre site web.
• Sélectionnez lors du téléchargement Écraserpour vous assurer que le nouveau fichier remplace l'ancien. Une fois le téléchargement terminé, visitez la page de backend de WordPress pour vérifier si le problème CSS a été résolu.

Étape 8 : Vérifier les extensions du navigateur

Les extensions de navigateur (en particulier celles liées au blocage de contenu et de publicité) peuvent interférer avec l'affichage du backend CSS de WordPress.

Comment reconnaître et résoudre les problèmes causés par les extensions ?

1. Ouvrez le menu Gestion des extensions

• Naviguez dans votre navigateur jusqu'à Gestion des extensions/plugins Le menu.

2. Désactiver temporairement toutes les extensions

• En particulier les bloqueurs de publicité et les plugins de sécurité.
• Vous pouvez choisir Désactiver les extensions Ou simplement le tourner supprimer.

3. Vérifiez si le problème est résolu

• Après avoir désactivé l'extension, visitez le backend de WordPress pour voir si le problème de CSS a été résolu.

4. Autoriser les extensions au cas par cas

• Si le problème est résolu, cela signifie qu'une extension est à l'origine du conflit.
• Réactivez les extensions une à une, en actualisant la page du backend après chacune d'entre elles pour vérifier si le problème se reproduit.

5. Ajuster les paramètres de l'extension ou trouver une alternative

• Une fois que vous avez trouvé l'extension problématique, vérifiez ses paramètres pour vous assurer qu'elle ne bloque pas le CSS dans le backend de WordPress.
• Si les paramètres ne fonctionnent pas, envisagez de rechercher d'autres extensions alternatives.

J'espère que cela vous aidera !