CSS quebrado no painel de administração do WordPress parece assustador à primeira vista. Mas aprendemos que geralmente é uma simples reação em cadeia causada por um plugin ou uma regra de cache, e podemos rastreá-la rapidamente.
Após ajudar milhares de leitores e clientes, refinamos uma lista de verificação que identifica o culpado sem tocar no seu conteúdo ou arriscar tempo de inatividade.
Fique conosco e nós o guiaremos por cada etapa, para que sua área de administração volte ao normal e você possa continuar construindo com confiança.
Aqui está uma visão geral rápida dos tópicos e etapas de solução de problemas que abordaremos neste artigo:
- O que Causa CSS Quebrado na Área de Administração do WordPress?
- Etapa 1: Verifique Conflitos de Plugins
- Etapa 2: Carregando Arquivos Inseguros em HTTPS
- Etapa 3: Verifique Interferência de Temas
- Etapa 4: Corrija Problemas de Cache
- Etapa 5: Corrija Problemas de CDN
- Etapa 6: Corrija Permissões Incorretas de Arquivos
- Etapa 7: Repare Arquivos Corrompidos
- Etapa 8: Verifique Extensões do Navegador
- Dicas de Solução de Problemas
O que Causa CSS Quebrado na Área de Administração do WordPress?
Existem várias razões pelas quais o CSS pode quebrar na área de administração do WordPress. No entanto, como muitos erros comuns do WordPress, pode ser frustrante para iniciantes descobrir o que precisam corrigir.
Em nossa experiência, as seguintes são as principais causas de CSS quebrado na área de administração do WordPress:
- Conflitos de Plugins: Plugins 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 de administração.
- Incompatibilidade HTTP/HTTPS: Problemas de conteúdo misto, onde alguns arquivos são carregados via HTTP em vez de HTTPS, podem fazer com que os navegadores bloqueiem arquivos CSS.
- Interferência do Tema: 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. Plugins de cache podem servir arquivos CSS antigos, causando problemas de estilo.
- Problemas de CDN: Redes de Distribuição de Conteúdo (CDNs) mal configuradas podem servir versões desatualizadas de arquivos CSS, levando a estilos ausentes ou quebrados.
- Permissões de Arquivo Incorretas: Arquivos CSS com permissões incorretas podem não ser legíveis pelo servidor.
- Arquivos Corrompidos: Arquivos CSS podem ficar corrompidos ou ausentes durante atualizações ou uploads.
- Extensões do Navegador: Extensões, especialmente bloqueadores de conteúdo, podem interferir na forma como o CSS é exibido.
Compreender essas causas ajudará você a identificar por que a área de administração do seu WordPress está com CSS quebrado para que você possa realmente corrigi-lo.
Etapa 1: Verifique Conflitos de Plugins
Em nossa experiência, plugins do WordPress mal codificados são frequentemente os culpados por CSS quebrado na área de administração. No entanto, às vezes, plugins bem codificados também podem ter problemas com a forma como seu site WordPress ou servidor está configurado.
Veja como identificar e resolver conflitos de plugins.
Desative Todos os Plugins
Primeiro, você precisa ir ao painel de administração do WordPress e navegar até a página Plugins » Plugins Instalados.
Agora, selecione todos os plugins e escolha 'Desativar' no menu suspenso 'Ações em massa', depois clique em 'Aplicar'.
Depois disso, simplesmente atualize sua área de administração ou recarregue a página para ver se o problema de CSS foi resolvido. Se o CSS estiver corrigido, o problema está em um dos plugins.
Reative os Plugins Um por Um
Para determinar qual plugin está causando o problema, você precisa reativar cada um individualmente. Você pode fazer isso simplesmente clicando no link 'Ativar' abaixo do plugin.
Após ativar cada plugin, você precisa atualizar a área de administração para verificar se o CSS quebra novamente.
Isso ajudará você a identificar o plugin específico que está causando o problema.
Encontre uma Alternativa ou Atualize o Plugin
Uma vez que você identificou o plugin 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 plugin alternativo ou entrar em contato com o desenvolvedor do plugin para obter suporte.
Para instruções detalhadas, veja nosso tutorial sobre como desativar plugins. Este tutorial também mostra como desativar plugins usando FTP caso sua área de administração do WordPress não esteja acessível.
Etapa 2: Carregando Arquivos Inseguros em HTTPS
Outra causa comum de CSS quebrado que nossos usuários encontraram é que eles configuraram incorretamente URLs seguras, levando a problemas de conteúdo misto.
Isso acontece quando seu site está configurado para usar o protocolo seguro HTTPS, mas o CSS é servido via HTTP ou protocolo inseguro.
Quando isso acontece, navegadores populares como o Google Chrome bloqueiam automaticamente recursos inseguros, resultando em CSS quebrado na sua área de administração do WordPress.
Esse problema pode ser confirmado usando a ferramenta Inspecionar no seu navegador. Simplesmente mude para a aba Console e você verá o erro de Conteúdo Misto.
Para corrigir esse problema, você precisa primeiro garantir que as configurações do seu WordPress tenham os URLs corretos.
Vá para a página Configurações » Geral e certifique-se de que tanto o Endereço do WordPress quanto o Endereço do Site tenham HTTPS nos URLs.
Se você já tem HTTPS em ambos os URLs, então você pode forçar manualmente o WordPress a usar o protocolo HTTPS.
Simplesmente edite seu arquivo wp-config.php e adicione o seguinte código:
define('FORCE_SSL_ADMIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
$_SERVER['HTTPS'] = 'on';
}
Alternativamente, você pode usar plugins como o Really Simple SSL para impor o HTTPS para todos os URLs.
Para mais detalhes, veja nosso tutorial sobre como corrigir o erro de conteúdo misto no WordPress.
Etapa 3: Verifique Interferência de Temas
Descobrimos que interferência desnecessária do 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.
Mude para um Tema Padrão
Para ver se o seu tema WordPress está causando o CSS quebrado, você primeiro precisa mudar para um tema padrão do WordPress.
Vá para o painel do seu WordPress e navegue até a página 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 ‘Adicionar Novo Tema’ no topo. Os temas padrão do WordPress são nomeados após os anos.
Atualize sua área de administração após mudar para um tema padrão para ver se o problema de CSS foi corrigido.
Se o CSS agora estiver carregando corretamente, o problema está com o seu tema anterior.
Corrigindo Conflito de Tema
Para corrigir isso, você primeiro precisa verificar se há uma atualização disponível para o seu tema.
Vá para Aparência » Temas, selecione seu tema e clique em ‘Atualizar agora’.
Se isso não resolver o problema, você precisará revisar quaisquer alterações que tenha feito em seu tema. Verifique todas as personalizações do tema que podem causar o problema de CSS quebrado.
Em particular, você vai querer verificar qualquer CSS adicional ou código personalizado no arquivo functions.php em busca de erros.
Como último recurso, entre em contato com o desenvolvedor do tema para obter suporte ou considere mudar para um tema diferente.
Recomendamos o uso do WPCode para evitar esse tipo de erro no futuro. É o melhor plugin de snippets de código para WordPress que permite gerenciar todo o seu CSS personalizado em um só lugar e não requer 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 integradas para procurar erros.
- Você não perde seu CSS personalizado ao mudar de tema.
Uma versão gratuita do WPCode também está disponível com recursos limitados.
Usamos o WPCode em nossos sites para gerenciar snippets de código personalizados, incluindo CSS personalizado. Para mais detalhes, veja nossa análise do WPCode.
Etapa 4: Corrija Problemas de Cache
Normalmente, plugins de cache do WordPress não armazenam em cache a área de administração do WordPress.
No entanto, vimos configurações de cache incorretas causando conflito com o cache do navegador, o que pode causar problemas de CSS quebrado.
Para corrigir isso, você primeiro precisa limpar o cache do seu navegador.
Depois disso, você pode recarregar a área de administração do WordPress para ver se o problema foi resolvido. Se não foi, então você precisa limpar o cache do WordPress.
Este é o cache gerado pelo seu plugin de cache do WordPress. Temos um tutorial detalhado sobre como limpar o cache em diferentes plugins de cache do WordPress.
Etapa 5: Corrija Problemas de CDN
Se você estiver usando um serviço de Rede de Distribuição de Conteúdo (CDN), uma configuração incorreta pode, às vezes, causar problemas de CSS quebrados na área de administração do WordPress.
Veja como identificar e resolver esses problemas.
Primeiro, você precisa usar a ferramenta Inspecionar Elemento no seu navegador e mudar para a aba 'Console'. Aqui, você verá erros se seus arquivos CSS estiverem bloqueados ou não forem encontrados.
Em seguida, você precisa acessar o site do seu serviço de CDN e fazer login no painel da sua conta.
A partir daqui, navegue até a seção Cache » Configuração e clique no botão 'Limpar Tudo' na opção Limpar Cache.
Observação: Estamos mostrando a captura de tela do Cloudflare CDN. No entanto, você poderá localizar facilmente a opção para 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 foi corrigido, continue para a próxima etapa.
Etapa 6: Corrija Permissões Incorretas de Arquivos
Também encontramos permissões de arquivo incorretas que impedem o servidor de ler arquivos CSS, levando a CSS quebrado na área de administração do WordPress.
Veja como verificar e corrigir as permissões de arquivo.
Primeiro, você precisa conectar-se ao seu site WordPress usando FTP.
Uma vez conectado, você deve navegar até o diretório raiz do seu WordPress. Este é o diretório que contém as pastas wp-admin, wp-includes e wp-content.
Agora, clique com o botão direito na pasta wp-admin e selecione 'Permissões de arquivo' ou '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 para 644 e aplicá-las recursivamente apenas a todos os arquivos.
Para 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 ainda estiver lá, você precisará prosseguir para a próxima etapa.
Etapa 7: Repare Arquivos Corrompidos
Arquivos corrompidos podem causar CSS quebrado na área de administração do WordPress.
Seus arquivos do WordPress podem ficar 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 uma configuração incorreta pelo seu provedor de hospedagem do WordPress.
Veja como reparar ou substituir arquivos corrompidos.
Primeiro, você precisa baixar uma cópia nova do WordPress de WordPress.org.
Em seguida, extraia o arquivo ZIP baixado para o seu computador.
Em seguida, você precisa se conectar ao seu WordPress usando FTP e fazer o upload dos novos arquivos do WordPress do seu computador.
Escolha 'Substituir' quando solicitado para garantir que os novos arquivos sejam enviados para o seu site.
Assim que terminar, você pode visitar sua área de administração do WordPress para ver se isso resolveu o problema de CSS quebrado.
Se isso não resolver o problema, então é hora de passar para a próxima etapa.
Etapa 8: Verifique Extensões do Navegador
Extensões de navegador, especialmente aquelas relacionadas a bloqueio de conteúdo e 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 seu navegador e navegar até o menu de extensões/complementos.
Desative temporariamente todas as extensões, especialmente bloqueadores de anúncios e complementos de segurança.
Você pode simplesmente desativar as extensões ou removê-las completamente.
Assim que terminar, você pode ir para a área de administração do WordPress para ver se o problema de CSS foi resolvido.
Se o problema for resolvido, então você precisa descobrir qual extensão causou o problema.
Reative cada extensão individualmente e atualize a área de administração após habilitar cada extensão para identificar a que está causando o problema.
Uma vez que você identificou as extensões problemáticas, você pode verificar as configurações da 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
Esperançosamente, os passos acima resolverão os problemas de CSS na área de administração do WordPress. No entanto, se nenhum dos passos acima funcionar, você pode tentar estas dicas adicionais:
Atualizar Permalinks:
Atualize seus permalinks do WordPress para atualizar o arquivo .htaccess sem arriscar nenhum erro. Ocasionalmente, as regras de reescrita do WordPress podem impedir que os arquivos CSS sejam carregados corretamente. Esta ação ajuda a limpar e redefinir as regras de reescrita de URL.
Verificar Malware:
Às vezes, uma tentativa de hacking ou malware também pode fazer com que sua área de administração pareça quebrada. Verifique seu site WordPress em busca de malware potencial e tente limpar seu site hackeado.
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 querer ver nosso guia de solução de problemas do WordPress para maneiras adicionais de corrigir problemas do WordPress ou nosso guia sobre como pedir suporte ao WordPress corretamente.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Tem alguma pergunta ou sugestão? Por favor, deixe um comentário para iniciar a discussão.