Usando as ferramentas de desenvolvedor do navegador

Você consegue sentir o poder?

Todos os principais navegadores da internet que você usa possuem o que é chamado de conjunto de Ferramentas do Desenvolvedor. Isso inclui o Google Chrome, o Safari, o Firefox e o Internet Explorer. Assim, com todas essas opções, fica muito fácil usar um conjunto de Ferramentas do Desenvolvedor para fazer coisas bem legais! Nesta página, vou usar as Ferramentas de Desenvolvedor do Google Chrome, que podem ser acessadas clicando com o botão direito do mouse > Inspecionar (para uma breve visão geral das Ferramentas de Desenvolvedor do Chrome, clique em aqui). A seguir, apresentamos alguns pontos básicos sobre o que você pode fazer com as ferramentas de desenvolvedor do seu navegador e em que situações elas podem ser úteis para você.

Verifique os erros do console para descobrir por que algo pode não estar funcionando corretamente no seu site.

Se você perceber que o conteúdo da sua página não está carregando corretamente ou que algo parece ‘estranho’, é essencial poder verificar se há erros locais que possam estar ocorrendo durante o carregamento da página. Para começar, abra as Ferramentas do Desenvolvedor no seu navegador e acesse a guia “Console”. Uma vez lá, ative a opção “Preservar log”, localizada na parte superior, abaixo das guias principais, e clique em “Atualizar” caso nenhuma informação esteja sendo exibida.

Depois de fazer isso, serão exibidas eventuais mensagens de erro. Se você não tiver certeza do que uma mensagem de erro pode significar ou de como resolvê-la, vale a pena ler este artigo aqui. Se você ainda não souber como proceder, envie-nos uma captura de tela do que está vendo, acompanhada de uma breve explicação sobre o que não está funcionando, em um ticket de suporte.

Ajuste ou edite o estilo CSS e veja como isso afetará seu site antes de salvar as alterações no seu tema ou plugin.

Se você não gostar da forma como seu tema ou o MemberPress está exibindo seus estilos CSS, ou Se não estiver sendo exibido corretamente, o WordPress facilita bastante a edição disso com um plugin de terceiros. Recomendamos que você use o Plug-in CSS personalizado simplesmas também existem outras opções se você fizer uma simples pesquisa para plugins do WordPress com CSS personalizado. A ideia por trás desses tipos de plugins é que você possa criar qualquer CSS personalizado, colá-lo no plugin e ele será aplicado. Se você conseguir restringir o CSS ao seu tema, saiba que a maioria dos temas possui um local onde é possível adicionar CSS personalizado; portanto, pergunte ao desenvolvedor do seu tema sobre isso caso não tenha certeza de onde encontrá-lo.

Para este exemplo, digamos que eu gostaria que os títulos dos campos do meu formulário de cadastro MemberPress fossem um pouco maiores do que estão aqui:

A maneira mais fácil de fazer isso é clicar com o botão direito do mouse diretamente no elemento que você deseja editar. Portanto, se eu clicar com o botão direito do mouse em um desses títulos e depois clicar em inspecionar elemento, a aparência será a seguinte:

Você vai perceber que, quando fiz isso, a seção destacada em cinza nas ferramentas de desenvolvedor é o que está diretamente relacionado a esse rótulo do formulário. Aqui, estamos procurando a classe `div`, que nos dirá qual é a classe CSS que está sendo chamada e usada para exibir o texto. Quando passo o mouse sobre a classe `div`, ela destaca em azul o item específico ao qual está afetando; portanto, essa é uma boa maneira de verificar se você está identificando a classe correta. A classe para isso é mp-form-label e, embora neste artigo não vamos nos aprofundar muito nos detalhes de como o CSS funciona (mas se você quiser saber mais sobre CSS, aqui é um bom lugar para começar), mas saiba que, neste exemplo, para tornar o texto maior, eu precisaria inserir isso no plug-in CSS Custom Manager:

Alguns pontos importantes a serem observados aqui são: certifique-se de iniciar cada classe com um “.” (ponto), coloque o estilo entre “{}” (chaves) e é sempre uma boa prática incluir um !importante variável. O motivo pelo qual você pode precisar incluir a variável !importante A razão para isso é que, na maioria das vezes, ao adicionar CSS personalizado, você estará substituindo o CSS existente, e isso deve garantir que o seu CSS personalizado seja exibido em seu lugar. Veja como ficaria essa edição:

Verifique em qual servidor seu conteúdo está sendo carregado quando ele não estiver carregando corretamente.

Às vezes, você perceberá que uma parte específica do seu site não está carregando corretamente, como arquivos protegidos por regras de URI personalizadas. Isso geralmente ocorre quando o conteúdo está sendo carregado por um servidor que não seja o Apache, como o NGINX, que é uma causa comum desse problema. Para verificar isso, basta abrir as Ferramentas do Desenvolvedor e acessar a aba Rede. Se não aparecer nada, talvez seja necessário atualizar a página; caso contrário, você verá uma lista de todos os locais dos arquivos usados para carregar a página. Role a página para baixo até encontrar o local do arquivo que está obtendo o conteúdo que não está carregando corretamente (geralmente você saberá qual é, pois ele terá algum tipo de código de erro (no status) e clique no link. Isso exibirá várias informações, incluindo o código de status, mas aqui você deve procurar na seção “Response Headers”, como pode ser visto aqui:

Aqui você vai perceber que o conteúdo foi carregado pelo Apache, mas, novamente, se for outro servidor e você estiver enfrentando algum problema, será necessário fazer uma alteração. Mais especificamente, você precisa entrar em contato com o provedor de hospedagem e verificar se eles podem encaminhar as solicitações desses tipos de arquivo ao Apache para processamento, em vez de ao NGINX.