Hur du fixar trasig CSS i WordPress Admin-instrumentpanelen

Inget får hjärtat att sjunka som att logga in på din WordPress-instrumentpanel och hitta en rörig röra av text och trasiga länkar. Det välbekanta, rena gränssnittet är plötsligt borta, ersatt av något som ser helt oanvändbart ut.

Innan du får panik, ta ett djupt andetag. Här på WPBeginner har vi sett exakt detta problem otaliga gånger, och det är nästan alltid lättare att fixa än det ser ut.

Det är vanligtvis ett enkelt problem orsakat av en plugin-konflikt eller en cache-glitch. Vi har utvecklat en steg-för-steg-checklista för att hjälpa dig att snabbt och säkert hitta källan till problemet.

Snabbfixen för trasig CSS i adminpanelen

Trasig CSS i WordPress adminpanel orsakas nästan alltid av en plugin-konflikt, ett cache-problem eller en felkonfiguration av HTTPS/SSL. Lösningen är en elimineringsprocess: inaktivera plugins, rensa alla cacheminnen och verifiera din webbplats URL-inställningar.

Vi guidar dig genom varje felsökningssteg för att få ditt adminområde tillbaka till det normala så att du kan komma tillbaka till arbetet.

Åtgärda trasig CSS i WordPress adminpanel

Här är en snabb översikt över ämnen och felsökningssteg som vi kommer att täcka i den här artikeln:

Vad orsakar trasig CSS i WordPress adminområde?

Baserat på vår erfarenhet av att hjälpa tusentals användare spårar trasig CSS i WordPress adminområde nästan alltid tillbaka till några vanliga problem. Det kan vara frustrerande, men att förstå grundorsaken är det första steget för att fixa det.

Vanlig orsak	Varför CSS bryts
Plugin-konflikter	Dåligt kodade plugins kan ladda sina egna stilmallar som åsidosätter eller stör standardstilarna i WordPress adminpanel.
HTTP/HTTPS-mismatch	Om din webbplats använder HTTPS men vissa filer försöker laddas över osäker HTTP, kommer webbläsare att blockera dem, vilket orsakar trasiga stilar. Detta är ett fel för "blandat innehåll".
Temainterferens	Vissa teman laddar felaktigt sin CSS i adminområdet. Anpassade admin-teman kan också vara en källa till stilkonflikter.
Cacheproblem	Din webbläsare eller en cache-plugin kan servera en gammal, föråldrad version av en CSS-fil, vilket leder till visningsproblem.
CDN-problem	Ett felkonfigurerat Content Delivery Network (CDN) kan också servera föråldrade CSS-filer, vilket orsakar trasiga eller saknade stilar.
Felaktiga filrättigheter	Om CSS-filer har felaktiga behörigheter kan din server inte läsa dem, vilket förhindrar att de laddas.
Korrupta filer	Kärn-CSS-filer i WordPress kan ibland bli korrupta eller försvinna under en uppdatering eller filöverföring.
Webbbläsarinsticksprogram	Annonsblockerare eller andra säkerhetsfokuserade webbläsarinsticksprogram kan ibland störa hur CSS laddas och visas.

Att förstå dessa orsaker hjälper dig att identifiera varför ditt WordPress adminområde upplever trasig CSS så att du faktiskt kan åtgärda det.

Fixa trasig CSS i WordPress adminområde

Här är steg-för-steg-instruktionerna du kan följa för att felsöka och enkelt åtgärda trasig CSS i WordPress adminområde.

Steg 1: Kontrollera plugin-konflikter

Enligt vår erfarenhet är dåligt kodade WordPress-plugins ofta boven bakom trasig CSS i adminområdet. Ibland kan dock även välkodade plugins stöta på problem med din specifika WordPress-webbplats eller serverkonfiguration.

Här är hur du kan identifiera och lösa plugin-konflikter.

Inaktivera alla plugins

Först måste du gå till din WordPress adminpanel och navigera till sidan Plugins » Installera plugins.

Välj nu alla plugins och välj 'Inaktivera' från rullgardinsmenyn 'Massåtgärder', klicka sedan på 'Verkställ'.

Uppdatera sedan helt enkelt ditt adminområde eller ladda om sidan för att se om CSS-problemet är löst. Om CSS:en är fixad, ligger problemet hos ett av plugins.

Återaktivera plugins ett i taget

För att avgöra vilket plugin som orsakar problemet måste du återaktivera vart och ett individuellt. Du kan göra detta genom att helt enkelt klicka på länken 'Aktivera' under pluginet.

Efter att ha aktiverat varje plugin måste du uppdatera adminområdet för att kontrollera om CSS:en går sönder igen.

Detta hjälper dig att identifiera det specifika plugin som orsakar problemet.

Hitta ett alternativ eller uppdatera pluginet

När du har identifierat den konflikterande plugin-modulen kan du kontrollera om en uppdatering är tillgänglig för den. Om en uppdatering inte löser problemet, överväg att hitta ett alternativt plugin eller kontakta plugin-utvecklaren för support.

För detaljerade instruktioner, se vår handledning om hur man inaktiverar plugins. Denna handledning visar också hur man inaktiverar plugins med FTP om ditt WordPress adminområde inte är tillgängligt.

Steg 2: Ladda osäkra filer via HTTPS

En annan vanlig orsak till trasig CSS som våra användare har stött på är att de har felkonfigurerat säkra URL:er, vilket leder till problem med blandat innehåll.

Detta händer när din webbplats är inställd på att använda HTTPS säkra protokollet, men CSS serveras från HTTP eller det osäkra protokollet.

När detta händer blockerar populära webbläsare som Google Chrome automatiskt osäkra resurser, vilket resulterar i trasig CSS i ditt WordPress-adminområde.

Detta problem kan bekräftas genom att använda verktyget Inspektera i din webbläsare. Byt helt enkelt till fliken Konsol, så ser du felet Blandat innehåll.

För att åtgärda detta problem måste du först se till att dina WordPress-inställningar har korrekta URL:er.

Gå till sidan Inställningar » Allmänt och se till att både WordPress-adress och Webbplatsadress har HTTPS i URL:erna.

Om du redan har HTTPS i båda URL:erna kan du manuellt tvinga WordPress att använda HTTPS-protokollet.

Redigera helt enkelt din wp-config.php-fil och lägg till följande kod. Detta kodavsnitt talar om för WordPress att alltid använda en säker anslutning för adminområdet och hjälper servrar att korrekt identifiera den säkra anslutningen, vilket ofta löser problemet.

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

Alternativt kan du använda plugins som Really Simple SSL för att tvinga fram HTTPS för alla URL:er.

För mer information, se vår handledning om hur man åtgärdar mixed content-felet i WordPress.

Steg 3: Kontrollera för tema-konflikter

Vi har funnit att onödiga tema-interferenser också är en vanlig orsak till trasig CSS i WordPress adminområde.

Här är hur du kan identifiera och lösa tema-relaterade problem.

Byt till ett standardtema

För att se om ditt WordPress-tema orsakar trasig CSS måste du först byta till ett standard WordPress-tema.

Gå till din WordPress-instrumentpanel och navigera till sidan Utseende » Teman.

Här måste du aktivera ett standard WordPress-tema, som Twenty Twenty-Four.

Notera: Om du inte har några standardteman installerade kan du installera ett genom att klicka på knappen 'Lägg till nytt tema' högst upp. Standard WordPress-teman är namngivna efter årtal.

Uppdatera ditt adminområde efter att ha bytt till ett standardtema för att se om CSS-problemet har åtgärdats.

Om CSS nu laddas korrekt, ligger problemet hos ditt tidigare tema.

Åtgärda tema-konflikt

För att åtgärda detta måste du först kontrollera om en uppdatering finns tillgänglig för ditt tema.

Gå till Utseende » Teman, välj ditt tema och klicka på ‘Uppdatera nu’.

Om detta inte löser problemet måste du granska alla ändringar du har gjort i ditt tema. Kontrollera alla temaanpassningar som kan orsaka problemet med trasig CSS.

Du vill särskilt kontrollera ytterligare CSS eller anpassad kod i filen functions.php för misstag.

Som en sista utväg, kontakta temautvecklaren för support eller överväg att byta till ett annat tema.

Vi rekommenderar att använda WPCode för att undvika den här typen av misstag i framtiden. Det är det bästa pluginet för kodavsnitt för WordPress som låter dig hantera all din anpassade CSS på ett ställe och kräver inte att du redigerar functions.php filen.

Skapa CSS-kod för att anpassa etiketten för nya inlägg i WPCode

Här är några av fördelarna med WPCode:

Du kan spara och hantera din anpassade CSS-kod enklare.
WPCode inkluderar inbyggda kontroller för att leta efter fel.
Du förlorar inte din anpassade CSS när du byter tema.

En gratis version av WPCode finns också tillgänglig med begränsade funktioner.

Vi använder WPCode på våra webbplatser för att hantera anpassade kodavsnitt, inklusive anpassad CSS. För att lära dig mer, se vår fullständiga WPCode-recension.

Steg 4: Åtgärda cacheproblem

Cacheproblem är en vanlig orsak till trasig CSS. För att åtgärda detta måste du först rensa din webbläsares cache. Om problemet kvarstår måste du sedan rensa cachen som genereras av ditt WordPress-cache-plugin.

Välj cachade data att ta bort i Google Chrome

De flesta WordPress-cache-plugins cachar inte WordPress adminområde som standard, men felaktiga inställningar kan ibland orsaka konflikter. Att rensa cachen säkerställer att din webbläsare laddar den senaste versionen av alla dina webbplatsfiler.

Vi har en detaljerad handledning om hur man rensar cachen i olika WordPress-cache-plugins.

Steg 5: Åtgärda CDN-problem

Om du använder en Content Delivery Network (CDN)-tjänst kan en felkonfiguration ibland orsaka problem med trasig CSS i WordPress adminområde.

Här är hur du identifierar och löser dessa problem.

Först måste du använda webbläsarens Inspektera-verktyg och växla till fliken 'Konsol'. Här ser du fel om dina CSS-filer blockeras eller inte hittas.

Därefter måste du byta till din CDN-tjänsts webbplats och logga in på ditt konto-dashboard.

Navigera härifrån till sektionen Caching » Konfiguration och klicka på knappen ‘Rensa allt’ under alternativet Rensa cache.

Notera: Vi visar dig skärmdumpen av Cloudflare CDN. Du kommer dock enkelt att kunna hitta alternativet att rensa cachen hos alla CDN-leverantörer.

Därefter måste du återgå till din webbplats och ladda om adminområdet för att se om problemet är löst nu.

Om det inte hjälpte, låt oss titta på en annan vanlig orsak.

Steg 6: Åtgärda felaktiga filrättigheter

Vi har också hittat felaktiga filrättigheter som hindrar servern från att läsa CSS-filer, vilket leder till trasig CSS i WordPress adminområde.

Tänk på filrättigheter som säkerhetsinställningar som talar om för servern vem som kan läsa, skriva och köra filer. Om dessa är felaktigt inställda kan servern inte komma åt CSS-filerna den behöver för att visa adminområdet korrekt.

Här är hur du kontrollerar och åtgärdar dem.

Först måste du ansluta till din WordPress-webbplats med FTP.

När du är ansluten måste du navigera till din WordPress-rotkatalog. Detta är katalogen som innehåller mapparna wp-admin, wp-includes och wp-content.

Högerklicka nu på mappen wp-admin och välj 'Filrättigheter' eller 'Egenskaper'.

Standardinställningen, säker inställning för alla WordPress-mappar är 755. Du måste se till att alla kataloger är inställda på detta värde.

Om de inte är det, ändra behörigheterna och tillämpa dem rekursivt på alla underkataloger.

Därefter upprepar du processen för filer. Korrekt behörighet för alla filer är 644. Tillämpa detta rekursivt endast på alla filer.

För mer information, se vår handledning om hur du ställer in filrättigheter i WordPress.

Besök sedan adminområdet för att se om problemet med trasig CSS har lösts. Ser du fortfarande problemet? Oroa dig inte, vi har några fler steg att prova.

Steg 7: Reparera skadade filer

Korrupta filer kan orsaka trasig CSS i WordPress adminområde.

Dina WordPress-filer kan bli korrupta även utan någon åtgärd från din sida. Detta kan hända på grund av en ofullständig WordPress-uppdatering, oavsiktlig radering av filer eller felkonfiguration av din WordPress-värd.

Här är hur du reparerar eller ersätter korrupta filer.

Först måste du ladda ner en ny kopia av WordPress från WordPress.org.

Extrahera sedan den nedladdade ZIP-filen till din dator.

Därefter måste du ansluta till din WordPress med FTP och ladda upp de nya WordPress-filerna från din dator.

Välj 'Skriv över' när du uppmanas att säkerställa att de nya, rena filerna ersätter eventuella korrupta filer på din webbplats.

När du är klar kan du besöka ditt WordPress-adminområde för att se om detta har löst problemet med trasig CSS.

Om problemet kvarstår, låt oss undersöka din webbläsare.

Steg 8: Kontrollera webbläsartillägg

Webbplatstillägg, särskilt de som rör innehålls- och annonsblockering, kan störa hur CSS visas i WordPress administrationsområde.

Här är hur du identifierar och löser problem orsakade av webbläsartillägg.

Först måste du öppna din webbläsare och navigera till menyn för tillägg/utökningar.

Inaktivera alla tillägg tillfälligt, särskilt annonsblockerare och säkerhetsinsticksprogram.

Du kan helt enkelt inaktivera tillägg eller ta bort dem helt.

När det är klart kan du gå till WordPress adminområde för att se om CSS-problemet är löst.

Om problemet är löst måste du sedan ta reda på vilket tillägg som orsakade problemet.

Återaktivera varje tillägg individuellt och uppdatera adminområdet efter att ha aktiverat varje tillägg för att identifiera det som orsakar problemet.

När du har identifierat problematiska tillägg kan du kontrollera tilläggsinställningarna för att undvika att blockera WordPress admin CSS.

Om det inte fungerar, försök att hitta ett alternativt tillägg.

Felsökningstips

Förhoppningsvis har stegen ovan löst CSS-problemen i ditt WordPress adminområde. Men om du fortfarande har problem, här är några fler tips att prova:

Uppdatera permalänkar: Uppdatera dina WordPress-permalänkar för att återställa .htaccess-filen. Detta kan åtgärda URL-omskrivningsregler som kan hindra CSS från att laddas.
Skanna efter skadlig kod: Skadlig kod kan förstöra ditt adminområde. Vi rekommenderar starkt att du skannar din WordPress-webbplats och rensar eventuella infektioner.

Vanliga frågor (FAQ)

Vad händer om jag inte kan komma åt mitt admin-dashboard alls för att inaktivera plugins?

Om den trasiga CSS:en är så allvarlig att du inte ens kan logga in, kan du fortfarande inaktivera dina plugins. Du måste ansluta till din webbplats med en FTP-klient, navigera till mappen /wp-content/ och byta namn på mappen /plugins/ till något som plugins_old. Detta kommer att inaktivera alla plugins, vilket ger dig tillgång till ditt adminområde.

Kan en nyligen genomförd WordPress-uppdatering ha orsakat detta problem?

Det är möjligt, men inte vanligt. Även om WordPress-uppdateringar i sig är mycket pålitliga, kan problemet uppstå om uppdateringsprocessen avbryts. Detta kan leda till korrupta kärnfiler, vilket är vad steg 7 i vår guide hjälper dig att åtgärda.

Hur kan jag förhindra att detta händer igen i framtiden?

Bästa förebyggande åtgärden är att följa god praxis för webbplatsadministration. Säkerhetskopiera alltid din webbplats innan du gör ändringar, testa plugin- och temauppdateringar på en staging-webbplats först, och använd endast plugins och teman från välrenommerade källor med bra recensioner och nyliga uppdateringar.

Påverkar rensning av cachen mina webbplatsbesökare?

Nej, det är ett säkert och vanligt felsökningssteg. Att rensa webbläsarens cache påverkar bara din egen dator. Att rensa din WordPress-cache-plugin kan göra att nästa besökares sidladdning blir något långsammare (eftersom cachen byggs om), men det kommer inte att förstöra något eller negativt påverka deras upplevelse.

Ytterligare resurser

Vi hoppas att den här artikeln hjälpte dig att åtgärda problemet med trasig CSS i WordPress-administrationsområdet. Du kanske också vill se våra andra guider för mer hjälp med felsökning:

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.