Usando as ferramentas de desenvolvedor do navegador

Você consegue sentir o poder?

Todos os principais navegadores de Internet que você usa têm o que é chamado de conjunto de ferramentas de desenvolvedor. Isso inclui o Google Chrome, o Safari, o Firefox e o Internet Explorer. Portanto, com todas essas opções, fica muito fácil utilizar um conjunto de Developer Tools para realizar algumas coisas bem legais! Nesta página, usarei as Ferramentas do desenvolvedor do Google Chrome, que podem ser acessadas clicando com o botão direito do mouse > Inspecionar (para obter uma breve visão geral das DevTools do Chrome, clique em aqui). Abaixo estão alguns pontos básicos sobre o que você pode fazer com as ferramentas de desenvolvimento do navegador e quando 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 estiver descobrindo que o conteúdo da sua página não está carregando corretamente ou que algo parece "fora do lugar", é essencial ter a capacidade de verificar quaisquer erros locais que possam estar ocorrendo ao carregar uma página. Para começar, abra as Ferramentas do desenvolvedor no seu navegador e navegue até a guia Console. Lá, ative a opção "Preserve log" (Preservar registro) na parte superior, abaixo das guias principais, e pressione Atualizar se nenhuma informação for exibida.

Depois de fazer isso, todas as mensagens de erro serão exibidas. 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 ainda não tiver certeza de como proceder, envie-nos uma captura de tela do que está vendo com uma breve explicação do que não está funcionando em um arquivo ticket de suporte.

Ajuste ou edite o estilo CSS e veja como isso afetará seu site antes de salvar as edições em seu tema ou plug-in.

Se não gostar da forma como o tema ou o MemberPress está exibindo o estilo CSS, ou Se não estiver aparecendo corretamente, o WordPress facilita bastante a edição com um plug-in de terceiros. Recomendamos que você use o plug-in Plug-in CSS personalizado simplesmas também existem outras opções se você fizer uma simples pesquisa para plug-ins personalizados de CSS para WordPress. A ideia com esses tipos de plug-ins é que você pode criar qualquer CSS personalizado, colá-lo no plug-in e ele será aplicado. Se você puder restringir o CSS ao seu tema, a maioria dos temas tem um local onde é possível adicionar CSS personalizado, portanto, pergunte ao desenvolvedor do tema sobre isso se não tiver certeza de onde encontrá-lo.

Para este exemplo, digamos que eu queira que os títulos dos campos do meu formulário de registro do MemberPress sejam um pouco maiores do que os 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ê notará que, quando fiz isso, a seção destacada em cinza nas ferramentas do desenvolvedor é a que está diretamente relacionada ao rótulo do formulário. Aqui estamos procurando a classe div, que nos informará qual é a classe CSS que está sendo chamada e usada para exibir o texto. Quando eu passar o mouse sobre a classe div, ela destacará em azul o item específico que está afetando, portanto, essa é uma boa maneira de verificar se você está obtendo a classe correta. A classe para isso é mp-form-label E, embora neste artigo não vamos discutir muito os detalhes de como o CSS funciona (mas se você quiser saber mais sobre o 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 que você precisa se certificar de iniciar cada classe com um "." (ponto), envolver o estilo com "{}" (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 variável se deve ao fato de que, na maioria das vezes, ao adicionar CSS personalizado, você estará substituindo o CSS existente, o que deve garantir que o CSS personalizado seja exibido em seu lugar. Esta é a aparência dessa edição:

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

Às vezes, você descobrirá que uma parte específica do seu site não está sendo carregada corretamente, como arquivos que estão sendo protegidos com regras de URI personalizadas. Isso geralmente é causado quando o conteúdo está sendo carregado por um servidor diferente do Apache, como o NGINX, que é um causador comum de problemas. Para verificar isso, você precisará abrir as Ferramentas do desenvolvedor e ir para a guia Rede. Se não vir nada, talvez seja necessário atualizar a página, mas, caso contrário, você verá uma lista de todos os locais de arquivos que foram usados para carregar a página. Role para baixo até encontrar o local do arquivo que está puxando o conteúdo que não está carregando corretamente (geralmente você saberá qual é o local porque ele terá algum tipo de código de erro no status) e clique no link. Isso exibirá várias informações, inclusive o código de status, mas você deve procurar no título "Response Headers" (Cabeçalhos de resposta), como o que você pode ver aqui:

Aqui você notará que o conteúdo foi carregado pelo Apache, mas, novamente, se for outra coisa e você estiver tendo um problema, precisará fazer uma alteração. Especificamente, você precisa entrar em contato com o servidor host e verificar se ele pode passar as solicitações desses tipos de arquivo para o Apache para que sejam tratadas em vez do NGINX.