Jak naprawiono uszkodzony CSS w kokpicie administracyjnym WordPressa

Radzenie sobie z uszkodzonym CSS w obszarze administracyjnym WordPress może być prawdziwym bólem głowy. To dlatego, że zamiast kokpitu administratora zobaczysz niechlujną, niestylizowaną stronę.

Uszkodzony CSS w obszarze administracyjnym uniemożliwia również pracę nad witryną, co czyni go poważnym problemem. A ponieważ istnieje wiele możliwych przyczyn, wielu początkujących nie wie, jak poprawić ten problem.

Napotkaliśmy ten problem już wcześniej na naszych własnych stronach internetowych, więc przeszliśmy przez wszystkie etapy rozwiązywania problemów, aby znaleźć najłatwiejsze poprawki. W tym poradniku pomożemy ci poprawić uszkodzony CSS w kokpicie administracyjnym WordPress.

Oto krótki przegląd tematów i kroków rozwiązywania problemów, które omówimy w tym artykule:

Co powoduje uszkodzenie CSS w obszarze administracyjnym WordPress?

Istnieje kilka powodów, dla których CSS może ulec uszkodzeniu w obszarze administracyjnym WordPress. Jednak, podobnie jak w przypadku wielu typowych błędów WordPressa, ustalenie, co należy poprawić, może być frustrujące dla początkujących.

Z naszego doświadczenia wynika, że głównymi przyczynami niedziałającego CSS w obszarze administracyjnym WordPressa są następujące czynniki:

• Konflikty wtyczek: Źle zakodowane wtyczki z własnym CSS mogą powodować konflikty z domyślnymi stylami WordPressa, zastępując lub zakłócając style obszaru administracyjnego.
• Niezgodność HTTP/HTTPS: Problemy zmieszaną zawartością, gdzie niektóre pliki ładują się przez HTTP zamiast HTTPS, mogą powodować blokowanie plików CSS przez przeglądarki.
• Zakłócenia motywu: Niektóre motywy ładują CSS w obszarze administracyjnym, co może powodować konflikty. Jeśli używasz niestandardowego motywu administratora, może to również powodować problemy ze stylizacją.
• Problemy z pamięcią podręczną: Pamięć podręczna przeglądarki może przechowywać nieaktualne wersje plików CSS. Wtyczki buforujące mogą obsługiwać stare pliki CSS, powodując problemy ze stylizacją.
• Problemy z sieciami CDN: Błędnie skonfigurowane sieci dostarczania treści (CDN) mogą obsługiwać nieaktualne wersje plików CSS, co prowadzi do brakujących lub uszkodzonych stylów.
• Nieprawidłowe uprawnienia do plików: Pliki CSS z nieprawidłowymi uprawnieniami mogą nie być odczytywane przez serwer.
• Uszkodzone pliki: Pliki CSS mogą zostać uszkodzone lub zaginąć podczas aktualizacji lub przesyłania.
• Rozszerzenia przeglądarki: Rozszerzenia, zwłaszcza blokery treści, mogą zakłócać sposób wyświetlania CSS.

Zrozumienie tych przyczyn pomoże ci zidentyfikować, dlaczego twój obszar administracyjny WordPress ma uszkodzony CSS, dzięki czemu będziesz mógł go faktycznie poprawić.

Krok 1: Sprawdź konflikty wtyczek

Z naszego doświadczenia wynika, że źle zakodowane wtyczki WordPress są często winowajcami niedziałającego CSS w obszarze administracyjnym. Czasami jednak dobrze zakodowane wtyczki mogą również napotkać problemy związane z konfiguracją witryny lub serwera WordPress.

Oto jak zidentyfikować i rozwiązać konflikty wtyczek.

Dezaktywacja wszystkich wtyczek

Najpierw musisz przejść do kokpitu administratora WordPress i przejść do strony Wtyczki ” Zainstalowane wtyczki.

Teraz zaznacz wszystkie wtyczki i wybierz „Dezaktywuj” z menu rozwijanego „Działania zbiorcze”, a następnie kliknij „Zastosuj”.

Następnie wystarczy odświeżyć obszar administracyjny lub przeładować stronę, aby sprawdzić, czy problem z CSS został rozwiązany. Jeśli CSS został naprawiony, problem leży po stronie jednej z wtyczek.

Reaktywacja wtyczek jedna po drugiej

Aby ustalić, która wtyczka powoduje problem, należy ponownie aktywować każdą z nich z osobna. Możesz to zrobić, klikając link „Aktywuj” pod wtyczką.

Po aktywacji każdej wtyczki należy odświeżyć obszar administracyjny, aby sprawdzić, czy CSS ponownie się psuje.

Pomoże to zidentyfikować konkretną wtyczkę powodującą problem.

Znajdź alternatywę lub zaktualizuj wtyczkę

Po zidentyfikowaniu wtyczki powodującej konflikt możesz sprawdzić, czy dostępna jest dla niej aktualizacja. Jeśli aktualizacja nie rozwiąże problemu, należy rozważyć znalezienie alternatywnej wtyczki lub skontaktowanie się z twórcą wtyczki w celu uzyskania obsługi.

Szczegółowe instrukcje można znaleźć w naszym poradniku na temat dezaktywacji wtyczek. Ten poradnik pokazuje również, jak dezaktywować wtyczki za pomocą FTP w przypadku, gdy obszar administracyjny WordPress nie jest dostępny.

Krok 2: Ładowanie niezabezpieczonych plików przez HTTPS

Inną częstą przyczyną niedziałającego CSS, z którą zetknęli się nasi użytkownicy, są nieprawidłowo skonfigurowane bezpieczne adresy URL, co prowadzi do problemów z mieszaną zawartością.

Dzieje się tak, gdy witryna jest ustawiona na korzystanie z bezpiecznego protokołu HTTPS, ale CSS jest obsługiwany przez HTTP lub niezabezpieczony protokół.

Kiedy tak się dzieje, popularne przeglądarki, takie jak Google Chrome, automatycznie blokują niezabezpieczone zasoby, co powoduje uszkodzenie CSS w obszarze administracyjnym WordPress.

Problem ten można potwierdzić za pomocą narzędzia Inspect w przeglądarce. Wystarczy przełączyć się na kartę Konsola, aby zobaczyć błąd Mixed Content.

Aby poprawić ten problem, należy najpierw upewnić się, że ustawienia WordPress mają prawidłowe adresy URL.

Przejdź do strony Ustawienia ” Ogólne i upewnij się, że zarówno adres WordPress, jak i adres witryny mają HTTPS w adresach URL.

Jeśli masz już HTTPS w obu adresach URL, możesz ręcznie zmusić WordPress do korzystania z protokołu HTTPS.

Wystarczy edytować plik wp-config.php i dodać następujący kod:

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

Alternatywnie można użyć wtyczek takich jak Really Simple SSL, aby wymusić HTTPS dla wszystkich adresów URL.

Więcej szczegółów można znaleźć w naszym poradniku na temat poprawki błędu mieszanej treści w WordPress.

Krok 3: Sprawdzenie zakłóceń tematycznych

Odkryliśmy, że niepotrzebna ingerencja w motyw jest również częstą przyczyną uszkodzonego CSS w obszarze administracyjnym WordPress.

Oto jak można zidentyfikować i rozwiązać problemy związane z tematyką.

Przełącz na domyślny motyw

Aby sprawdzić, czy motyw WordPress powoduje uszkodzenie CSS, należy najpierw przełączyć się na domyślny motyw WordPress.

Przejdź do kokpitu WordPress i przejdź do strony Wygląd ” Motywy.

Tutaj musisz aktywować domyślny motyw WordPress, taki jak Twenty Twenty-Four.

Uwaga: Jeśli nie masz zainstalowanego żadnego domyślnego motywu, możesz go zainstalować, klikając przycisk „Dodaj nowy motyw” u góry. Domyślne motywy WordPress noszą nazwy lat.

Odśwież obszar administracyjny po przełączeniu na domyślny motyw, aby sprawdzić, czy problem CSS został poprawiony.

Jeśli CSS ładuje się teraz poprawnie, problem leży po stronie poprzedniego motywu.

Poprawka konfliktu motywów

Aby to poprawić, należy najpierw sprawdzić, czy dla danego motywu dostępna jest aktualizacja.

Przejdź do sekcji Wygląd ” Motywy, wybierz motyw i kliknij przycisk „Aktualizuj teraz”.

Jeśli to nie rozwiąże problemu, konieczne będzie sprawdzenie wszelkich zmian wprowadzonych w motywie. Sprawdź wszystkie dostosowania motywu, które mogą powodować uszkodzony problem CSS.

W szczególności będziesz chciał sprawdzić wszelkie dodatkowe CSS lub niestandardowy kod w pliku functions. php pod kątem błędów.

W ostateczności należy skontaktować się z twórcą motywu w celu uzyskania obsługi lub rozważyć przejście na inny motyw.

Zalecamy korzystanie z WPCode, aby uniknąć tego rodzaju błędów w przyszłości. Jest to najlepsza wtyczka do fragmentów kodu WordPress, która pozwala zarządzać wszystkimi niestandardowymi CSS w jednym miejscu i nie wymaga edycji pliku functions. php.

Oto niektóre z zalet WPCode:

• Możesz łatwiej zapisywać i zarządzać niestandardowym kodem CSS.
• WPCode zawiera wbudowane mechanizmy sprawdzające w poszukiwaniu błędów.
• Nie tracisz niestandardowego CSS podczas przełączania motywów.

Dostępna jest również darmowa wersja WPCode z ograniczonymi funkcjami.

Używamy WPCode na naszych stronach internetowych do zarządzania niestandardowymi fragmentami kodu, w tym niestandardowymi CSS. Aby uzyskać więcej informacji, zobacz naszą recenzję WPCode.

Krok 4: Poprawka problemów z buforowaniem

Zwykle wtyczki buforujące WordPress nie buforują obszaru administracyjnego WordPress.

Widzieliśmy jednak nieprawidłowe ustawienia buforowania powodujące konflikt z pamięcią podręczną przeglądarki, co może powodować problemy z uszkodzonym CSS.

Aby to naprawić, należy najpierw wyczyścić pamięć podręczną przeglądarki.

Następnie można ponownie załadować obszar administracyjny WordPress, aby sprawdzić, czy problem został rozwiązany. Jeśli nie, musisz wyczyścić pamięć podręczną WordPress.

Jest to pamięć podręczna generowana przez wtyczkę buforującą WordPress. Mamy szczegółowy poradnik, jak wyczyścić pamięć podręczną w różnych wtyczkach buforujących WordPress.

Krok 5: Poprawka problemów z CDN

Jeśli korzystasz z usługi Content Delivery Network (CDN), to błędna konfiguracja może czasami powodować niedziałające problemy CSS w obszarze administracyjnym WordPress.

Oto jak zidentyfikować i rozwiązać te problemy.

Najpierw należy użyć narzędzia Inspect w przeglądarce i przełączyć się na kartę „Console”. Tutaj zobaczysz błędy, jeśli twoje pliki CSS są zablokowane lub nie zostały znalezione.

Następnie należy przejść do witryny usługi CDN i zalogować się do kokpitu konta.

Następnie przejdź do sekcji Buforowanie ” Konfiguracja i kliknij przycisk „Wyczyść wszystko” pod opcją Wyczyść pamięć podręczną.

Uwaga: Pokazujemy zrzut ekranu z Cloudflare CDN. Można jednak łatwo znaleźć opcję czyszczenia pamięci podręcznej u wszystkich dostawców CDN.

Następnie należy wrócić do witryny i ponownie załadować obszar administracyjny, aby sprawdzić, czy problem został naprawiony.

Jeśli poprawka nie zostanie naprawiona, przejdź do następnego kroku.

Krok 6: Poprawka nieprawidłowych uprawnień do plików

Zauważyliśmy również, że nieprawidłowe uprawnienia do plików uniemożliwiają serwerowi odczytywanie plików CSS, co prowadzi do uszkodzenia CSS w obszarze administracyjnym WordPress.

Oto jak sprawdzić i poprawić uprawnienia plików.

Najpierw należy połączyć się z witryną WordPress za pomocą protokołu FTP.

Po nawiązaniu połączenia należy przejść do katalogu głównego WordPress. Jest to katalog zawierający foldery wp-admin, wp-includes i wp-content.

Teraz kliknij prawym przyciskiem myszy folder wp-admin i wybierz „Uprawnienia plików” lub „Właściwości”.

Po pierwsze, należy upewnić się, że wszystkie katalogi są ustawione na 755.

Jeśli tak nie jest, zmień uprawnienia i zastosuj je rekurencyjnie do wszystkich podkatalogów.

Możesz teraz powtórzyć proces, ustawić uprawnienia na 644 i zastosować je rekurencyjnie tylko do wszystkich plików.

Więcej szczegółów można znaleźć w naszym poradniku na temat ustawiania uprawnień do plików w WordPress.

Następnie odwiedź obszar administracyjny, aby sprawdzić, czy problem z uszkodzonym CSS został rozwiązany. Jeśli nadal występuje, musisz przejść do następnego kroku.

Krok 7: Napraw uszkodzone pliki

Uszkodzone pliki mogą spowodować uszkodzenie CSS w obszarze administracyjnym WordPress.

Pliki WordPress mogą zostać uszkodzone nawet bez żadnego działania z Twojej strony. Może się to zdarzyć z powodu niekompletnej aktualizacji WordPress, przypadkowego usunięcia plików lub błędnej konfiguracji przez dostawcę hostingu WordPress.

Oto jak naprawić lub zastąpić uszkodzone pliki.

Najpierw należy pobrać nową kopię WordPressa ze strony WordPress.org.

Następnie rozpakuj pobrany plik ZIP na swój komputer.

Następnie należy połączyć się z WordPressem za pomocą FTP i przesłać świeże pliki WordPressa z komputera.

Po wyświetleniu monitu wybierz opcję „Zastąp”, aby upewnić się, że do witryny zostaną przesłane nowe pliki.

Po zakończeniu możesz odwiedzić obszar administracyjny WordPress, aby sprawdzić, czy rozwiązało to problem z uszkodzonym CSS.

Jeśli to nie rozwiąże problemu, czas przejść do następnego kroku.

Krok 8: Sprawdź rozszerzenia przeglądarki

Rozszerzenia przeglądarki, zwłaszcza te związane z blokowaniem treści i reklam, mogą zakłócać sposób wyświetlania CSS w obszarze administracyjnym WordPress.

Oto jak zidentyfikować i rozwiązać problemy powodowane przez rozszerzenia przeglądarki.

Najpierw należy otworzyć przeglądarkę i przejść do menu rozszerzeń/dodatków.

Tymczasowo wyłącz wszystkie rozszerzenia, zwłaszcza blokery reklam i dodatki bezpieczeństwa.

Możesz po prostu wyłączyć rozszerzenia lub całkowicie je usunąć.

Po zakończeniu możesz przejść do obszaru administracyjnego WordPress, aby sprawdzić, czy problem CSS został rozwiązany.

Jeśli problem został rozwiązany, należy dowiedzieć się, które rozszerzenie spowodowało problem.

Ponownie aktywuj każde rozszerzenie indywidualnie i odśwież obszar administracyjny po włączeniu każdego rozszerzenia, aby zidentyfikować to, które powoduje problem.

Po zidentyfikowaniu problematycznych rozszerzeń można sprawdzić ustawienia rozszerzeń, aby uniknąć blokowania CSS administratora WordPress.

Jeśli to nie zadziała, spróbuj znaleźć alternatywne rozszerzenie.

Wskazówki dotyczące rozwiązywania problemów

Miejmy nadzieję, że powyższe kroki rozwiążą problemy z CSS w obszarze administracyjnym WordPress. Jeśli jednak żaden z powyższych kroków nie zadziała, możesz wypróbować te dodatkowe wskazówki:

Aktualizacja permalinków:

Odśwież permalinki WordPress, aby zaktualizować plik .htaccess bez ryzyka wystąpienia błędów. Czasami reguły przepisywania WordPress mogą uniemożliwiać prawidłowe ładowanie plików CSS. To działanie pomaga wyczyścić i zresetować reguły przepisywania adresów URL.

Skanowanie w poszukiwaniu złośliwego oprogramowania:

Czasami próba włamania lub złośliwe oprogramowanie może również spowodować uszkodzenie obszaru administracyjnego. Przeskanuj swoją witrynę WordPress pod kątem potencjalnego złośliwego oprogramowania i spróbuj wyczyścić zhakowaną witrynę.

Mamy nadzieję, że ten artykuł pomógł ci poprawić błąd CSS w obszarze administracyjnym WordPress. Możesz również zapoznać się z naszym przewodnikiem po rozwiązywaniu problemów WordPress, aby poznać dodatkowe sposoby poprawiania problemów WordPress lub zapoznać się z naszym przewodnikiem na temat tego, jak prawidłowo poprosić o obsługę WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.