Problemas CSS personalizados com o WordPress e como corrigi-lo

Pawan Sahu Blocked Unblock Seguir Seguindo 28 de dezembro de 2018

Como um usuário do WordPress, você pode encontrar vários tutoriais on-line que explicam como você pode personalizar seu tema adicionando CSS personalizado. Mas nenhum desses tutoriais explica o problema que você pode ter ao fazer isso.

Neste artigo, abordaremos os motivos pelos quais seu CSS personalizado não funciona. Também forneceremos uma correção para o problema, para que você possa personalizar seu website sempre que quiser.

CSS significa Cascading Style Sheets . Eles são usados para personalizar a aparência e a aparência do site. Se você é novato em personalizar o tema WordPress, as chances são de que você fique confuso sobre como personalizar seu site usando CSS personalizado ao criar um site.

Personalizar um site não é uma má idéia, pois dá a você a capacidade de polir um site e garantir que ele se parece com a maneira que você deseja. Todos os temas atuais do WordPress vêm com a opção de adicionar CSS e substituir o CSS antigo.

Por que CSS personalizado não está funcionando?

Para entender melhor por que o seu CSS personalizado não está funcionando, você precisa saber por que o problema está acontecendo em primeiro lugar. Se você seguir qualquer guia na Web, saberá como é fácil adicionar CSS personalizado, já que você sabe como o CSS funciona.

O CSS personalizado não funciona devido a vários motivos. Uma das razões inclui problemas em cascata.

Quando você instala seu tema, você obtém um conjunto de arquivos CSS associados ao tema. No entanto, as coisas ficam complexas quando você cria um tema filho. Temas infantis trazem uma nova complexidade para a mesa. Por exemplo, se você quiser alterar o CSS de um plug-in e alterar sua aparência no front-end, poderá ficar preso, pois o CSS personalizado não funciona. Isso acontece por causa de problemas em cascata.

Cascading é uma propriedade CSS que faz com que você substitua o CSS original associado ao próprio tema. Vamos dar um exemplo para entender melhor.

Vamos tentar mudar o fundo e a cor da fonte do rodapé. Para fazer isso, você precisa adicionar o seguinte código.

 rodapé {cor de fundo: azul, cor da fonte: vermelho}; 

Este código CSS acima substituirá o que é inicialmente implementado pelo tema.

O problema ocorre quando a cascata não funciona conforme o esperado. Se você criou um tema filho, o problema pode se intensificar, considerando que muitos plug-ins ainda levam o CSS do tema principal sobre o CSS do tema filho. Esses problemas ocorrem dependendo de como o desenvolvedor projetou o plug-in ou o tema para funcionar.

Como diagnosticar o problema e resolvê-lo.

Então, como você diagnostica o problema? Para diagnosticar, você precisa do Google Chrome. O Google Chrome permite inspecionar os diferentes aspectos da página da web e ajuda você a diagnosticar o problema que você está enfrentando. Para começar, basta clicar com o botão direito no elemento e clicar em inspecionar. Isso abrirá uma pequena janela com muito código.

Depois disso, você precisa clicar no <head>. Quando estiver lá, você verá uma lista do elemento. De lá você precisa descobrir as folhas de estilo que estão listadas lá. Se você vir mais de duas planilhas, isso significa que uma folha de estilo está em cascata na outra. Depois de encontrá-lo, você pode resolver o problema em cascata alterando sua posição ou usando a folha de estilo que precede a outra.

Outra maneira é simplesmente usar a função de enfileiramento do WordPress que permite priorizar o CSS personalizado. Você pode fazer isso adicionando o seguinte código.

 wp_enqueue_style ('parent-child-css', 
get_stylesheet_directory_uri (). '/ style.css', array ('total-parent-css'), '1.0', todos);

As funções wp_enqueue usam vários parâmetros para funcionar corretamente. De todos os parâmetros, o único parâmetro que merece atenção é o terceiro. É um parâmetro de dependência que controla a dependência das folhas de estilo umas sobre as outras. Ao usá-lo, você pode ter certeza de que a dependência está funcionando conforme o esperado.

Se você não tem certeza de onde e como fazê-lo, recomendamos contratar um web designer para fazer isso por você. Ou se você estiver usando um provedor de hospedagem confiável, eles também poderão ajudá-lo se o suporte deles cobrir o problema. Porque livre ou heap provedores de hospedagem , não oferecem muito suporte técnico.

Resolvendo o problema usando plugins

Uma das características surpreendentes do uso do WordPress é seu ecossistema. Alguns plugins podem ajudá-lo a resolver o problema. Os plugins que você pode usar são os plugins de depuração que o ajudarão a descobrir os problemas com o estilo do tema e o script.

Você precisa instalar Debug Bar e Debug Bar Script e Estilo Dependências . Depois de instalá-lo, você precisa ativar a depuração na barra de administração. Quando a depuração estiver habilitada, é hora de usar as dependências de script e estilo. Isso listará todos os estilos enfileirados e você poderá usar a função wo_enqueue_style.

Depois que o estilo de enfileiramento estiver definido corretamente, você poderá adicionar o código no CSS filho ou no arquivo CSS que você selecionou, e o CSS personalizado funcionará como pretendido.

Conclusão

CSS e WordPress podem parecer fáceis da superfície, mas as coisas podem ficar complexas se você tentar personalizá-lo. Além disso, o fato de o WordPress sempre enfileirar alfabeticamente pode levar a problemas. Isso é algo que os desenvolvedores de plugins e de temas precisam observar quando desenvolvem seu produto. Eles também podem garantir que esse problema não exista se eles fornecerem uma provisão para enfileirar o CSS corretamente. Isso não é tudo, pois os estilos podem ser especificados, o que pode levar a mais problemas. A melhor maneira de resolver é verificar manualmente os arquivos CSS <head> e enfileirar a sua exigência.

A quantidade de dependência que um CSS possui também pode levar em conta o problema. Não é apenas responsabilidade dos desenvolvedores, mas também como o WordPress os utiliza e implementa. Esperamos que este artigo tenha lhe equipado para resolver o problema personalizado de CSS. Se tiver, não se esqueça de comentar abaixo e nos informar se corrigiu o problema ou não. Nós estamos ouvindo.

Texto original em inglês.