Como corrigir CSS quebrado no painel de administração do WordPress

Lidar com CSS quebrado na área de administração do WordPress pode ser uma verdadeira dor de cabeça. Isso porque, em vez do painel de administração, você verá uma página bagunçada e sem estilo.

O CSS quebrado na área de administração também impede que você trabalhe em seu site, o que o torna um problema sério. E como há muitas causas possíveis, muitos iniciantes não sabem ao certo como corrigir esse problema.

Já nos deparamos com esse problema em nossos próprios sites e, por isso, passamos por todas as etapas de solução de problemas para encontrar as correções mais fáceis. Neste tutorial, ajudaremos você a corrigir CSS quebrado no painel de administração do WordPress.

Aqui está uma rápida visão geral dos tópicos e das etapas de solução de problemas que abordaremos neste artigo:

O que causa a quebra de CSS na área de administração do WordPress?

Há vários motivos pelos quais o CSS pode quebrar na área de administração do WordPress. Entretanto, como muitos erros comuns do WordPress, pode ser frustrante para os iniciantes descobrirem o que precisam consertar.

Em nossa experiência, as principais causas de CSS quebrado na área de administração do WordPress são as seguintes:

• Conflitos de plugins: Plug-ins mal codificados com seu próprio CSS podem entrar em conflito com os estilos padrão do WordPress, substituindo ou interferindo nos estilos da área administrativa.
• Incompatibilidade de HTTP/HTTPS: Problemas de conteúdo misto, em que alguns arquivos são carregados por HTTP em vez de HTTPS, podem fazer com que os navegadores bloqueiem arquivos CSS.
• Interferência de temas: Alguns temas carregam CSS na área de administração, o que pode causar conflitos. Se você estiver usando um tema de administração personalizado, isso também pode causar problemas de estilo.
• Problemas de cache: O cache do navegador pode conter versões desatualizadas de arquivos CSS. Os plug-ins de cache podem servir arquivos CSS antigos, causando problemas de estilo.
• Problemas de CDN: As CDNs (Content Delivery Networks, redes de distribuição de conteúdo) mal configuradas podem fornecer versões desatualizadas de arquivos CSS, resultando em estilos ausentes ou quebrados.
• Permissões de arquivo incorretas: Os arquivos CSS com permissões incorretas podem não ser lidos pelo servidor.
• Arquivos corrompidos: Os arquivos CSS podem ser corrompidos ou perdidos durante atualizações ou uploads.
• Extensões do navegador: As extensões, especialmente os bloqueadores de conteúdo, podem interferir na forma como o CSS é exibido.

A compreensão dessas causas o ajudará a identificar por que a área de administração do WordPress está com CSS quebrado, para que você possa corrigi-lo.

Etapa 1: Verifique se há conflitos de plug-ins

Em nossa experiência, os plug-ins do WordPress mal codificados costumam ser os culpados pelo CSS quebrado na área de administração. No entanto, às vezes, plugins bem codificados também podem ter problemas com a configuração do seu site ou servidor WordPress.

Veja como você pode identificar e resolver conflitos de plug-ins.

Desativar todos os plug-ins

Primeiro, você precisa acessar o painel de administração do WordPress e navegar até a página Plugins ” Plugins instalados.

Agora, selecione todos os plug-ins e escolha “Deactivate” (Desativar) no menu suspenso “Bulk actions” (Ações em massa) e, em seguida, clique em “Apply” (Aplicar).

Depois disso, basta atualizar sua área de administração ou recarregar a página para ver se o problema de CSS foi resolvido. Se o CSS for corrigido, então o problema está em um dos plug-ins.

Reativar plug-ins um a um

Para determinar qual plug-in está causando o problema, é necessário reativar cada um deles individualmente. Para fazer isso, basta clicar no link “Activate” (Ativar) abaixo do plug-in.

Depois de ativar cada plug-in, você precisa atualizar a área de administração para verificar se o CSS está quebrado novamente.

Isso o ajudará a identificar o plug-in específico que está causando o problema.

Encontre uma alternativa ou atualize o plug-in

Depois de identificar o plug-in conflitante, você pode verificar se há uma atualização disponível para ele. Se a atualização não resolver o problema, considere encontrar um plug-in alternativo ou entrar em contato com o desenvolvedor do plug-in para obter suporte.

Para obter instruções detalhadas, consulte nosso tutorial sobre como desativar plug-ins. Este tutorial também mostra como desativar plug-ins usando FTP, caso sua área de administração do WordPress não esteja acessível.

Etapa 2: Carregamento de arquivos inseguros em HTTPS

Outra causa comum de CSS quebrado que nossos usuários encontraram é a configuração incorreta de URLs seguros, o que leva a problemas de conteúdo misto.

Isso acontece quando seu site está configurado para usar o protocolo seguro HTTPS, mas o CSS é servido por HTTP ou pelo protocolo inseguro.

Quando isso acontece, navegadores populares, como o Google Chrome, bloqueiam automaticamente recursos inseguros, resultando em CSS quebrado em sua área de administração do WordPress.

Esse problema pode ser confirmado usando a ferramenta Inspecionar em seu navegador. Basta alternar para a guia Console e você verá o erro Mixed Content.

Para corrigir esse problema, primeiro você precisa se certificar de que as configurações do WordPress tenham os URLs corretos.

Vá para a página Settings ” General (Configurações ” Geral ) e verifique se o endereço do WordPress e o endereço do site têm HTTPS nos URLs.

Se você já tiver HTTPS em ambos os URLs, poderá forçar manualmente o WordPress a usar o protocolo HTTPS.

Basta editar o arquivo wp-config.php e adicionar o seguinte código:

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

Como alternativa, você pode usar plug-ins como o Really Simple SSL para impor HTTPS a todos os URLs.

Para obter mais detalhes, consulte nosso tutorial sobre como corrigir o erro de conteúdo misto no WordPress.

Etapa 3: Verifique se há interferência de tema

Descobrimos que a interferência desnecessária no tema também é uma causa comum de CSS quebrado na área de administração do WordPress.

Veja como você pode identificar e resolver problemas relacionados ao tema.

Mudar para um tema padrão

Para verificar se o seu tema do WordPress está causando o CSS quebrado, primeiro você precisa mudar para um tema padrão do WordPress.

Vá para o painel do WordPress e navegue até a página Appearance ” Themes (Aparência ” Temas ).

Aqui, você precisa ativar um tema padrão do WordPress, como o Twenty Twenty-Four.

Observação: Se você não tiver nenhum tema padrão instalado, poderá instalar um clicando no botão “Add New Theme” (Adicionar novo tema) na parte superior. Os temas padrão do WordPress têm nomes de anos.

Atualize sua área administrativa depois de mudar para um tema padrão para ver se o problema de CSS foi corrigido.

Se o CSS estiver sendo carregado corretamente, então o problema está no tema anterior.

Correção de conflitos de tema

Para corrigir isso, primeiro você precisa verificar se há uma atualização disponível para o seu tema.

Vá para Appearance ” Temas, selecione seu tema e clique em “Atualizar agora”.

Se isso não resolver o problema, você precisará revisar as alterações feitas no tema. Verifique todas as personalizações de tema que podem causar o problema de CSS quebrado.

Em particular, você deverá verificar se há erros em qualquer CSS adicional ou código personalizado no arquivo functions.php.

Como último recurso, entre em contato com o desenvolvedor do tema para obter suporte ou considere a possibilidade de mudar para um tema diferente.

Recomendamos o uso do WPCode para evitar esse tipo de erro no futuro. Ele é o melhor plug-in de snippets de código do WordPress que permite gerenciar todo o seu CSS personalizado em um só lugar e não exige a edição do arquivo functions.php.

Aqui estão alguns dos benefícios do WPCode:

• Você pode salvar e gerenciar seu código CSS personalizado com mais facilidade.
• O WPCode inclui verificações internas para procurar erros.
• Você não perde seu CSS personalizado ao trocar de tema.

Uma versão gratuita do WPCode também está disponível com recursos limitados.

Usamos o WPCode em nossos sites para gerenciar trechos de código personalizados, inclusive CSS personalizado. Para obter mais detalhes, consulte nossa análise do WPCode.

Etapa 4: Corrigir problemas de cache

Normalmente, os plug-ins de cache do WordPress não armazenam em cache a área de administração do WordPress.

No entanto, temos visto configurações incorretas de cache causando conflitos com o cache do navegador, o que pode causar problemas de CSS quebrado.

Para corrigir isso, primeiro você precisa limpar o cache do navegador.

Depois disso, você pode recarregar a área de administração do WordPress para ver se o problema foi resolvido. Se não for, você precisará limpar o cache do WordPress.

Esse é o cache gerado por seu plugin de cache do WordPress. Temos um tutorial detalhado sobre como limpar o cache em diferentes plug-ins de cache do WordPress.

Etapa 5: Corrigir problemas de CDN

Se você estiver usando um serviço de CDN (Content Delivery Network), uma configuração incorreta pode, às vezes, causar problemas de CSS quebrado na área de administração do WordPress.

Veja a seguir como identificar e resolver esses problemas.

Primeiro, você precisa usar a ferramenta Inspect no seu navegador e mudar para a guia “Console”. Aqui, você verá erros se os arquivos CSS estiverem bloqueados ou não forem encontrados.

Em seguida, você precisa acessar o site do serviço de CDN e fazer login no painel da sua conta.

A partir daí, navegue até a seção Caching ” Configuration (Cache ” Configuração ) e clique no botão “Purge Everything” (Limpar tudo) na opção Purge Cache (Limpar cache).

Observação: estamos mostrando a captura de tela da CDN da Cloudflare. No entanto, você poderá localizar facilmente a opção de limpar o cache em todos os provedores de CDN.

Depois disso, você precisa retornar ao seu site e recarregar a área de administração para ver se o problema foi corrigido agora.

Se não for corrigido, passe para a próxima etapa.

Etapa 6: Corrigir permissões incorretas de arquivos

Também notamos que permissões incorretas de arquivo impedem que um servidor leia arquivos CSS, o que leva a um CSS quebrado na área de administração do WordPress.

Veja como verificar e corrigir as permissões de arquivos.

Primeiro, você precisa se conectar ao seu site WordPress usando o FTP.

Depois de conectado, você deve navegar até o diretório raiz do WordPress. Esse é o diretório que contém as pastas wp-admin, wp-includes e wp-content.

Agora, clique com o botão direito do mouse na pasta wp-admin e selecione “File permissions” (Permissões de arquivo) ou “Properties” (Propriedades).

Primeiro, você precisa garantir que todos os diretórios estejam definidos como 755.

Se não estiverem, altere as permissões e aplique-as recursivamente a todos os subdiretórios.

Agora você pode repetir o processo, definir as permissões como 644 e aplicá-las recursivamente somente a todos os arquivos.

Para obter mais detalhes, consulte nosso tutorial sobre como definir permissões de arquivo no WordPress.

Depois disso, visite a área de administração para ver se o problema de CSS quebrado foi resolvido. Se ele ainda estiver lá, você precisará prosseguir para a próxima etapa.

Etapa 7: Reparar arquivos corrompidos

Os arquivos corrompidos podem causar quebra de CSS na área de administração do WordPress.

Seus arquivos do WordPress podem ser corrompidos mesmo sem nenhuma ação de sua parte. Isso pode acontecer devido a uma atualização incompleta do WordPress, à exclusão acidental de arquivos ou a uma configuração incorreta do seu provedor de hospedagem WordPress.

Veja como reparar ou substituir arquivos corrompidos.

Primeiro, você precisa baixar uma nova cópia do WordPress do site WordPress.org.

Em seguida, extraia o arquivo ZIP baixado para o seu computador.

Em seguida, você precisa se conectar ao WordPress usando o FTP e carregar os arquivos novos do WordPress do seu computador.

Escolha “Overwrite” quando solicitado para garantir que novos arquivos sejam carregados em seu site.

Quando terminar, você poderá visitar a área de administração do WordPress para ver se isso resolveu o problema de CSS quebrado.

Se isso não resolver o problema, é hora de passar para a próxima etapa.

Etapa 8: Verifique as extensões do navegador

As extensões de navegador, especialmente as relacionadas ao bloqueio de conteúdo e de anúncios, podem interferir na forma como o CSS é exibido na área de administração do WordPress.

Veja como identificar e resolver problemas causados por extensões de navegador.

Primeiro, você precisa abrir o navegador e navegar até o menu de extensões/add-ons.

Desative temporariamente todas as extensões, especialmente os bloqueadores de anúncios e os complementos de segurança.

Você pode simplesmente desativar as extensões ou removê-las completamente.

Quando isso for concluído, você poderá ir para a área de administração do WordPress para ver se o problema de CSS foi resolvido.

Se o problema for resolvido, você precisará descobrir qual extensão causou o problema.

Reative cada extensão individualmente e atualize a área de administração depois de ativar cada extensão para identificar a que está causando o problema.

Depois de identificar as extensões problemáticas, você pode verificar as configurações de extensão para evitar o bloqueio do CSS de administração do WordPress.

Se isso não funcionar, tente encontrar uma extensão alternativa.

Dicas de solução de problemas

Esperamos que as etapas acima resolvam os problemas de CSS na área de administração do WordPress. No entanto, se nenhuma das etapas acima funcionar, você pode tentar estas dicas adicionais:

Atualizar Permalinks:

Atualize seus permalinks do WordPress para atualizar o arquivo .htaccess sem correr o risco de cometer erros. Ocasionalmente, as regras de reescrita do WordPress podem impedir que os arquivos CSS sejam carregados corretamente. Essa ação ajuda a limpar e redefinir as regras de reescrita de URL.

Verificação de malware:

Às vezes, uma tentativa de invasão ou malware também pode fazer com que sua área administrativa pareça estar quebrada. Faça uma varredura em seu site WordPress em busca de possíveis malwares e tente limpar o site invadido.

Esperamos que este artigo tenha ajudado você a corrigir o problema de CSS quebrado na área de administração do WordPress. Você também pode consultar nosso guia de solução de problemas do WordPress para obter outras maneiras de corrigir problemas do WordPress ou consultar nosso guia sobre como solicitar suporte ao WordPress de forma adequada.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.